Custom Components for UD

[adamdriscoll]

Moved to: ironmansoftware/universal-dashboard#9

It would be super awesome to be able to allow people to create custom components built on the UD framework. This would allow for users to select JavaScript libraries and share custom components with others.

[adamdriscoll]

Here is my prototype for this functionality. I would like some feedback from the community on this.

New-UDElement

New-UDElement -Tag <string> [-Attributes <hashtable>] [-Content <scriptblock>] [-Id <string>]

This cmdlet lets you specify any HTML tag and attributes for those tag. Tags can be nested within each other to create the mark up for a page.

So for example, if you wanted a header that is a link, you could do this.

New-UDElement -Tag "h1" -Content {
    New-UDElement -Tag "a" -Attributes @{ href="http://www.google.com" } -Content { "Google" }
}

This would produce:

Google

But! It would do it using the React virtual DOM so it is faster than just writing DOM.

Helper Functions

I am planning on adding functions to the UD module or possibly creating a separate module, due to the massive amount of functions included, to mimic each of the valid HTML tags.

That means, the above example can become as short as:

h1 { a -a @{ href = "http://www.google.com" } { "Google" } }

Events

Although the above is helpful for creating static content, it would be possible now with New-UDHtml. With the new custom component functionality, you could also add scriptblocks to events in the Attributes Hashtable.

This would mean that you could wire up JavaScript events to PowerShell.

    button -a @{ 
        onClick = {
            Start-Process Notepad
        }
    } -Content { "Open Notepad" }

Set-UDElement

Events are nice but this could be done with New-UDInput\New-UDInputField. In addition to triggering arbitrary PowerShell, you could also update the UI's state based on actions in the events.

In this example, we update the content of the span "mySpan" to have different content after clicking the button. You could also change attributes or the tag entirely.

    span -Id "mySpan" -Content {
        "Some text"
    }

    button -a @{ 
        onClick = {
            Set-UDElement -Id "mySpan" -Content {
                "Some other text"
            }
        }
    } -Content { "Click Me" }

Get-UDElement

Getting data from the UI would work the reverse of setting. If you wanted to get the value of another field in an event, you could call Get-UDElement.

    input -a @{type="textbox"} -Id "txtProcessName"

    button -a @{ 
        onClick = {
            $element = Get-UDElement -Id "txtProcessName"
            Stop-Process $element.Value
        }
    } -Content { "Stop Process" }

Custom Components

All of this would lead to the ability to create custom components in PowerShell. For example, if we wanted to create a component for the Material Design Collection, we could do something like this.

function New-UDCollection {
    param($Items, $Header)

    ul -a @{ className = "collection with-header" } {
        li -a @{ className = "collection-header" } { h4 { $Header } }
        foreach($item in $items) {
            li -a @{ className = "collection-item" } { $item }
        }
    }
}

In our dashboard, we could then import the module that defines this custom component and then use it just like any other UD component.

        $dashboard = New-UDDashboard -Title "Test" -Content {
            New-UDCollection -Header "Alvins" -Items @("Alvin", "Alvin", "Alvin", "Alvin")
        }

[kort3x]

Interesting, but to me this doesn't look or feel like powershell anymore.

ul -a @{ className = "collection with-header" } {
        li -a @{ className = "collection-header" } { h4 { $Header } }
        foreach($item in $items) {
            li -a @{ className = "collection-item" } { $item }
        }
    }
}

[adamdriscoll]

Ok. That's a good point. I was kind of stealing from Pester syntax here but I can understand this is deviating a bit. My thought was that the casual UD user likely won't be using this syntax much and it would give the poweruser an avenue to make customization short and sweet.

But I can totally understand it getting confusing when it becomes that terse. New-UDElement could always still be used and the shortened function names could be eliminated.

Also, what if I used dynamic parameters for attributes instead of hashtables? Attributes would just be parameters to the cmdlet then.

New-UDElement -Tag "ul" -className "collection with-header" -Content {
     New-UDElement -Tag "li" -className "collection-header" -Content {
            New-UDElement -Tag "h4" -Content { "$Header" } 
     }
     foreach($item in $items) {
          New-UDElement -Tag "li" -className "collection-item" -Content { $item }
     } 
}

[kort3x]

Maybe I am not qualified to comment on this topic. I am not a webdeveloper. But thats exactly why use your module.

[adamdriscoll]

No worries. I really appreciate the feedback and what you mentioned makes me think a little bit harder about the final implementation.

I hope this functionality will lead to new, simpler controls and won't need to be used by everyone.

[chreestopher]

I would really like to see the Set-UDElement functionality and the ability to use onclick attributes to execute powershell code on the server and update the UI easily.

I feel like that would really take this module to the next level. Just my 2 cents.

[adamdriscoll]

Moved to: ironmansoftware/universal-dashboard#9