Documentation Questions

Hi yall

I’m struggling to find documentation on various commands and i wanted to make sure I had all the methods of looking them up?

For example, I can’t find anything on New-UDElement

Any help appreciated.

Product: PowerShell Universal
Version: 1.5.8

Hello @MaCCa hope you keeping well man…ok I am not on PU just yet, but from the cmdlet name I know that one exists in UD, and sure there is help so out of curiosity I tried:-

PS C:\Users\Adz> help new-udelement

NAME
    New-UDElement
    
SYNOPSIS
    Create new HTML and JavaScript elements.
    
    
SYNTAX
    New-UDElement [-ArgumentList <Object[]>] [-Attributes <Hashtable>] [-AutoRefresh] [-Content <ScriptBlock>] [-Endpoint <ScriptBlock>] [-Id <String>] [-OnMount <String>] 
    [-RefreshInterval <Int32>] -Tag <String> [<CommonParameters>]
    
    New-UDElement [-ArgumentList <Object[]>] [-AutoRefresh] [-ComponentName <String>] [-Endpoint <ScriptBlock>] [-Id <String>] -JavaScriptPath <String> [-ModuleName <String>] 
    [-Properties <Hashtable>] [-RefreshInterval <Int32>] [<CommonParameters>]
    
    
DESCRIPTION
    Create new HTML and JavaScript elements. Create static and dynamic components.
    

RELATED LINKS
    Online Version: https://github.com/ironmansoftware/universal-dashboard/blob/master/src/UniversalDashboard/Help/New-UDElement.md

REMARKS
    To see the examples, type: "get-help New-UDElement -examples".
    For more information, type: "get-help New-UDElement -detailed".
    For technical information, type: "get-help New-UDElement -full".
    For online help, type: "get-help New-UDElement -online"

So it would seem in UD there is help associated, however trying
https://docs.ironmansoftware.com/?q=new-udelement
didn’t give me any exact examples of the cmdlet but did show it in use with other cmdlets. So not sure if it is @adam plan to have documentation for old UD commands stored on the original site like here:-

which explains new-udelement, or if everything will be moved to the new site? Just for clarification you cool to bullet point or list the other commands you cannot find help for. Thanks

Yeah good thanks, hopefully you are too!

That’s a huge help, thanks for the links. I will be sure to update my post with other examples I’ve found when I stumble across them again.

I’m stuck on trying to get a footer button on a Modal to reflect a select option, any ideas on the below? Button label should show selected drop down

Show-UDModal -Content {          

            $DefaultValue = "True"                        

        New-UDSelect -option {                                                            

            New-UDSelectOption -name "True" -Value "True"

            New-UDSelectOption -name "False" -Value "False"

        } -DefaultValue $DefaultValue -OnChange {

            $UserSelectedValue = $EventData

            Sync-UDElement -Id 'Boolean_Buttons'

        }

                                                                                                                                                    

    } -Footer {                                                  

        New-UDElement -Tag button -Id 'Boolean_Buttons' -Content {

            

            New-UDButton -Text "$($UserSelectedValue)" -OnClick {                                                                                                                                                                         

                #Show-UDToast -Message "$($sqluery.query)"

                Hide-UDModal                                                            

            }                                                        

            New-UDButton -Text "Cancel" -OnClick { Hide-UDModal }

        }

    }

Cheers

All good in the uk despite a new lockdown…anyways man…nest it in a DIV tag as here you are trying to nest a UDBUTTON inside a HTML button…so a DIV is just like a HTML component like an empty box, then stick the stuff in there it should work :slight_smile:
Was out collecting some essential items for the family, so have not had a chance to try your code, but that is what stuck out to me was using Tag button try Tag 'div'

Dude, you know I am a nice guy so I cooked this up…bearing in mind this is running on UD as New-UDSelect does not have a default parameter, but apart from that this is what I cooked up for you:-

   New-UDRow -Columns {
        New-UDColumn -Endpoint {
            Show-UDModal -Height "450px" -Width "450px" -Content {
                New-UDSelect -option {

                    New-UDSelectOption -name "True" -Value "True"

                    New-UDSelectOption -name "False" -Value "False"

                } -OnChange {
                    $Session:State = $EventData
#Instead of calling sync-udelement use set-udelement to set the state on the id that actually needs changing as sync seemed to set it in the props not the state
                    Set-UDElement -id 'Boolean_Buttons' -Attributes @{text = "$Session:State" }
                }
            } -Footer {
                New-UDElement -Tag 'div' -Endpoint {
                    New-UDButton -Id 'Boolean_Buttons' -Text "$Session:State" -OnClick {
                        #Show-UDToast -Message "$($sqluery.query)"
                        Hide-UDModal
                    }
                    New-UDButton -Text "Cancel" -OnClick { Hide-UDModal }
                } -AutoRefresh
            }
        }
    }

Which should give you as it does for me:-
modal
I hope this answers your question on how to achieve this :slight_smile:

P.S @MaCCa I never knew you could do this with the footer so learnt something new myself

1 Like

Duuuuude you are such an asset to this community, thanks for taking the time to get a working example :slight_smile:

That didn’t quite work for me due to New-UDElement reporting an error on the endpoint, however you most definitely helped me progress, i believe the Set-UDElement was key to the problem.

Can you explain what you mean by state vs props?

And can you explain or provide any keywords for me to search/read more on the -Attributes? How did you know the key was text?

Thanks legend

Interesting comment about the props vs state,

Hello @MaCCa maybe need to change my new-udelement to be inside a -CONTENT scriptblock instead of an endpoint script block. This did all work for me in UD hence I was able to post the GIF. I honestly didn’t ever think about doing something like this myself, so was cool to do.
Ok I am NO react master, but as I understand PROPS are all the things the REACT component you are working with will accept. Like Powershell parameters…however the PROP value might not reflect on the screen…So with the button, I noticed the Sync-UDElement was setting the PROP TEXT value to the $EventData value but was not actually showing anything on the button as it was in the PROP value TEXT and not the STATE value TEXT…The state of the text was still showing blank, hence I used SET-UDELEMENT and this then changed the STATE of the text which then reflected that change on-screen.
I use firefox and I have installed:- React Developer Tools – Get this Extension for 🦊 Firefox (en-GB)
So when I press F12 in the browser I now get a REACT tab…I can then inspect every component on the page. So as you gave the button an ID I was able to look at all the PROPS and STATE of the button. Like with CSS you can change stuff on-the-fly in the browser. So when I typed the value into the STATE text attribute I knew I needed it to change that attribute.
I do use this react add-on in the course I released on building a custom component:-
Video Course With Me | Powershell Blog
To show you it whilst building a component. I hope this explains PROPS and STATE a bit better…? I am not a REACT master, but I can get stuff to work. Anyways man try changing the endpoint to a content script block and let me know how you get on :slight_smile:
something like:-

  New-UDRow -Columns {
        New-UDColumn -Endpoint {
            Show-UDModal -Height "450px" -Width "450px" -Content 
                New-UDSelect -option {
                    New-UDSelectOption -name "True" -Value "True"
                    New-UDSelectOption -name "False" -Value "False"
                } -OnChange {
                    $Session:State = $EventData
                    Set-UDElement -id 'Boolean_Buttons' -Attributes @{text = "$Session:State" }
                }
            } -Footer {
                New-UDElement -Tag 'div' -Content {
                    New-UDButton -Id 'Boolean_Buttons' -Text "$Session:State" -OnClick {
                        Hide-UDModal
                    }
                    New-UDButton -Text "Cancel" -OnClick { Hide-UDModal }
                }
            }
        }
    }

This still works for me…sadly I do not have the -Default value in the select option as I am still on UD…I am thinking I could possibly hack this with this component I built:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDSingleSelector

oh nice plugin, I tried the same version on chrome but couldn’t get very far, ill test it in Firefox tomorrow as broke my midnight curfew just now :sweat_smile:

Looking forward to doing your course in the near future, focusing purely on the base functionality of my project but i can tell there will be custom components I’m going to need :slight_smile:

Cheers for the code too will review it tomorrow, all the best mate

1 Like