Create a link button

Universal Dashboard Universal Dashboard Help
1

How do I create a button that acts like a link in UD?

I’m basically looking for the equivalent of this HTML code:
<button onclick="window.location.href='../MainMenu'">Cancel</button>

Thanks,
Tim Curwick

2

Here’s how you can achieve this.

   $Button =  New-UDButton -Text 'Cancel' 
   $Button.Attributes.href = "../MainMenu"
   $Button
1 Like
3

Ooh! I didn’t know we could modify attributes like that. That’s useful. Thank you.

Are these standard HTML5 objects or some variation thereon? (I mean, the thing in PowerShell is obviously something custom and weird, but can I use a standard HTML5 reference doc to understand what attributes are available for a given object and how the attributes will impact behavior?)

Thanks,
Tim Curwick

4

Plug-and-play for all attributes using standard doc (as far as I experimented with).
That being said, events cannot be added that way (I.E. onClick).

For instance, if you wanted to have a Copy row to clipboard button in a grid (or anything that need to execute client-side, you would need to use the New-UDHtml and define your element yourself.

New-UDHtml -Markup "<div class=btn onclick="CopyToClipBoard($Rowindex);">"

Custom function definitiion would need to be put in a javascript file, that you would link to your dashboard through New-UDDashboard -Scripts parameter.

1 Like
5

Can you change the color of a button?

6

@jrayo27 Sure, just change the color and background-color of the element. An easy way to do this is with a New-UDTheme, so all your buttons inherit the same styling, and you don’t have to hard code each one.

This theme would turn all your buttons red, with slight variations for on hover.

$ButtonTheme = New-UDTheme -Name 'RedButtons' -Definition @{
    
    '.btn'      = @{
        'color'            = "#ffffff"
        'background-color' = "#a80000"
        
    }
    '.btn:hover'      = @{
        'color'            = "#ffffff"
        'background-color' = "#C70303"
    }
    '.btn-flat'      = @{
        'color'            = "#000000"
        'display' = 'block'
    }

}
7

Thanks!

Looks good…

8

Do you happen to know if multiple themes are allowed?, for instance if I had a page that wanted to control items differently?

9

If you specify -Theme, you can still override individual elements with the manual controls for individual component parameters like -BackgroundColor -FontColor, etc.

You cannot specify 2 Themes and have different components use a specific one however.

10

Ok, thanks that could be a pain for some that currently do not have those parameters like buttons etc… I guess new-udelement might be the only way.

11

I add href property to new-udmubutton you can try this from the version in github

12

Yup, I saw that example, do you know where I can find any docs or help for the new buttons or better yet for all the new components?

13

The best we have so far is examples in the tests: https://github.com/ironmansoftware/universal-dashboard/tree/master/src/UniversalDashboard.MaterialUI/Tests

1 Like
14

Will work on this this weekend

15

Great I’ll play with these examples. thanks again guys this is bad @$$