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
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
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:-
I hope this answers your question on how to achieve this
P.S @MaCCa I never knew you could do this with the footer so learnt something new myself
Duuuuude you are such an asset to this community, thanks for taking the time to get a working example
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?
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
something like:-
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
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
Cheers for the code too will review it tomorrow, all the best mate