error
Cannot process argument transformation on parameter ‘Icon’. Cannot create object of type “UniversalDashboard.Models.FontAwesomeIcons”. The property ‘className’ was not found for the ‘UniversalDashboard.Models.FontAwesomeIcons’ object. The settable properties are: [value__ <System.Int32>].
Can you share the code you used to generate this error?
i have a custom button component and i have notice it was using the following
param(
[Parameter()]
[string]$Id = ([Guid]::NewGuid()),
[Parameter()]
$Text,
[Parameter()]
[Switch]$isLoading,
[Parameter()]
[UniversalDashboard.Models.FontAwesomeIcons]$Icon,
[Parameter()]
[ValidateSet(‘left’, ‘right’)]
[String]$IconAlignment = ‘left’,
[Parameter()]
[Endpoint]$OnClick,
[Parameter()]
[String]$BackgroundColor,
[Parameter()]
[string]$loaderType,
[Parameter()]
[Switch]$Disabled
)
if ($OnClick) {
$OnClick.Register($Id + 'onClick', $PSCmdlet)
}
if ($PSBoundParameters.ContainsKey("Icon")) {
$IconName = [UniversalDashboard.Models.FontAwesomeIconsExtensions]::GetIconName($Icon)
}
can you kindly advice what change do i need to do in above code for this component to work with new udicon
thank you
even now if i try to use the free font awsome it works on the page icon but with my custom button component if i try the following which was working before.
New-UDButtonCustom -Text “Monitor” -Icon (New-UDIcon -Icon ‘AddressBook’) -IconAlignment left -BackgroundColor "#27B52B " -onClick { }
am getting a deferent error each time for example
Cannot process argument transformation on parameter ‘Icon’. Cannot create object of type “UniversalDashboard.Models.FontAwesomeIcons”. The property ‘border’ was not found for the ‘UniversalDashboard.Models.FontAwesomeIcons’ object. The settable properties are: [value__ <System.Int32>].
Don’t use the FontAwesomeIcons enum. Change the parameter to this if you are just going to be passing in an Icon via New-UDIcon
[Parameter()]
$Icon,
And then you can get rid of this.
if ($PSBoundParameters.ContainsKey("Icon")) {
$IconName = [UniversalDashboard.Models.FontAwesomeIconsExtensions]::GetIconName($Icon)
}
Just pass $Icon to New-UDButton.
ill try and post back if there is still an issue.
i did try your idea but the icon is not showing and no error message.
can u kindly share the component and powershell function for new-udbutton so i can compare it with my custom component button since the icon works with new-udbutton component but no longer works with my custom button component.
Here is the button code.
function New-UDButton {
<#
.SYNOPSIS
Buttons allow users to take actions, and make choices, with a single tap..
.DESCRIPTION
Creates a new button. Buttons allow users to take actions, and make choices, with a single tap.
.PARAMETER Text
The text to show within the button.
.PARAMETER Icon
An icon to show within the button. Use New-UDIcon to create an icon for this parameter.
.PARAMETER Variant
The variant type for this button. Valid values are: "text", "outlined", "contained"
.PARAMETER IconAlignment
How to align the icon within the button. Valid values are: "left", "right"
.PARAMETER FullWidth
Whether the button takes the full width of the it's container.
.PARAMETER OnClick
The action to take when the button is clicked.
.PARAMETER Size
The size of the button. Valid values are: "small", "medium", "large"
.PARAMETER Style
Styles to apply to the button.
.PARAMETER Href
A URL that the user should be redirected to when clicking the button.
.PARAMETER Id
The ID of the component. It defaults to a random GUID.
.PARAMETER Color
The color of the component. Valid values are: 'default', 'inherit', 'primary', 'secondary'
.PARAMETER Disabled
Whether the button is disabled.
.PARAMETER ClassName
The CSS Class to apply to the button.
.PARAMETER ShowLoading
Displays a loading spinner while the OnClick event handler is running.
.PARAMETER LoadingIndicator
A custom element to display instead of the built in spinner for -ShowLoading
.PARAMETER LoadingPosition
The position of the loading indicator. Valid values are: 'start', 'end', 'center'
.EXAMPLE
PS > New-UDButton -Variant 'text' -Text 'Text' -Id 'button1'
PS > New-UDButton -Variant 'contained' -Text 'Contained' -Id 'button2'
PS > New-UDButton -Variant 'outlined' -Text 'Outlined' -Id 'button3'
Basic buttons|UDButton comes with three variants: text, contained, and outlined.
.EXAMPLE
PS > New-UDButton -Text 'Click me' -OnClick {
PS > Show-UDToast -Message 'Hello, world!'
PS > } -Id 'button4'
Handling clicks|PowerShell that is executed when the button is clicked.
.EXAMPLE
PS > New-UDButton -Text 'Secondary' -Color secondary -Id 'button5'
PS > New-UDButton -Text 'Success' -Color success -Id 'button6'
PS > New-UDButton -Text 'Error' -Color error -Id 'button7'
Color|Adjust the button color with -Color
.EXAMPLE
PS> New-UDButton -Variant 'text' -Text 'small' -Id 'button8' -Size small
PS> New-UDButton -Variant 'text' -Text 'medium' -Id 'button9' -Size medium
PS> New-UDButton -Variant 'text' -Text 'large' -Id 'button10' -Size large
PS>
PS> New-UDButton -Variant 'contained' -Text 'small' -Id 'button11' -Size small
PS> New-UDButton -Variant 'contained' -Text 'medium' -Id 'button12' -Size medium
PS> New-UDButton -Variant 'contained' -Text 'large' -Id 'button13' -Size large
PS>
PS> New-UDButton -Variant 'outlined' -Text 'small' -Id 'button14' -Size small
PS> New-UDButton -Variant 'outlined' -Text 'medium' -Id 'button15' -Size medium
PS> New-UDButton -Variant 'outlined' -Text 'large' -Id 'button16' -Size large
Sizes|For larger or smaller buttons, use the -Size parameter.
.EXAMPLE
PS > New-UDButton -Icon (New-UDIcon -Icon 'User') -Text 'View User' -Id 'button17'
Icon|Display an icon within the button
.EXAMPLE
PS > New-UDButton -OnClick { Start-Sleep 3 } -ShowLoading -Text 'Load Data' -Id 'button18'
Loading|Show a loading indicator while the OnClick event handler is running.
#>
[Component("Button", "Stop", "Creates a new button.")]
param
(
[Parameter (Position = 0)]
[string]$Text = "Button",
[Parameter (Position = 1)]
$Icon,
[Parameter (Position = 2)]
[ValidateSet("text", "outlined", "contained")]
[string]$Variant = "contained",
[Parameter (Position = 3)]
[ValidateSet("left", "right")]
[string]$IconAlignment = "left",
[Parameter (Position = 6)]
[switch]$FullWidth,
[Parameter (Position = 7)]
[Endpoint]$OnClick,
[Parameter (Position = 8)]
[ValidateSet("small", "medium", "large")]
[string]$Size,
[Parameter (Position = 9)]
[Hashtable]$Style,
[Parameter (Position = 10)]
[string]$Href,
[Parameter()]
[string]$Id = ([Guid]::NewGuid()).ToString(),
[Parameter()]
[ValidateSet('default', 'inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning')]
[string]$Color = 'primary',
[Parameter()]
[Switch]$Disabled,
[Parameter()]
[string]$ClassName,
[Parameter()]
[Switch]$ShowLoading,
[Parameter()]
[object]$LoadingIndicator,
[Parameter()]
[ValidateSet('center', 'start', 'end')]
[string]$LoadingPosition = "center"
)
End {
if ($OnClick) {
$OnClick.Register($Id, $PSCmdlet)
}
if ($Color -eq 'default') {
$Color = 'primary'
}
if ($Icon -is [string]) {
$Icon = New-UDIcon -Icon $Icon
}
@{
# Mandatory properties to load as plugin.
type = 'mu-button'
isPlugin = $true
assetId = $MUAssetId
# Command properties.
id = $Id
text = $Text
variant = $Variant.ToLower()
onClick = $OnClick
iconAlignment = $IconAlignment
disabled = $Disabled.IsPresent
icon = $Icon
fullWidth = $FullWidth.IsPresent
size = $Size
href = $Href
style = $Style
color = if ($Color) { $Color.ToLower() } else { $null }
className = $ClassName
showLoading = $ShowLoading.IsPresent
loadingIndicator = $LoadingIndicator
loadingPosition = $LoadingPosition.ToLower()
}
}
}
And here is the JS side of things.
import React from 'react'
import classNames from 'classnames'
import Button from '@mui/material/Button'
import LoadingButton from '@mui/lab/LoadingButton'
import UdMuIcon from './icon'
import { withComponentFeatures } from 'universal-dashboard'
import makeStyles from '@mui/styles/makeStyles';
import { useState } from 'react'
const useStyles = makeStyles(theme => ({
button: {
margin: theme.spacing(),
},
leftIcon: {
marginRight: theme.spacing(),
},
rightIcon: {
marginLeft: theme.spacing(),
},
}))
const UdButton = props => {
const classes = useStyles();
const [loading, setLoading] = useState(false);
const handleClick = () => {
if (props.onClick == null) return
setLoading(true);
props.onClick().then(() => setLoading(false)).catch(() => setLoading(false));
}
var icon = props.icon ? (
<UdMuIcon
{...props.icon}
style={
props.text ? props.iconAlignment === 'left' ? { ...props.icon.style, marginRight: 8 } : { ...props.icon.style, marginLeft: 8 } : props.icon.style
}
/>
) : null
if (props.showLoading) {
return <LoadingButton
variant={props.variant}
size={props.size}
disabled={props.disabled}
className={classNames(classes.button, 'ud-mu-button', props.className)}
fullWidth={props.fullWidth}
href={props.href}
onClick={handleClick}
style={{ ...props.style }}
id={props.id}
color={props.color}
loading={loading}
loadingIndicator={props.loadingIndicator && props.render(props.loadingIndicator)}
loadingPosition={props.loadingPosition}
>
{props.iconAlignment === 'left' ? icon : null}
{props.text}
{props.iconAlignment === 'right' ? icon : null}
</LoadingButton>
}
return (
<Button
variant={props.variant}
size={props.size}
disabled={props.disabled}
className={classNames(classes.button, 'ud-mu-button', props.className)}
fullWidth={props.fullWidth}
href={props.href}
onClick={handleClick}
style={{ ...props.style }}
id={props.id}
color={props.color}
>
{props.iconAlignment === 'left' ? icon : null}
{props.text}
{props.iconAlignment === 'right' ? icon : null}
</Button>
)
}
export default withComponentFeatures(UdButton)
can you kindly post the button group JS component and script.
Thank you