Create a link button


#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

#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.


#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…