How do I nicely format a modal with headers and spacing?

Universal Dashboard
1

I recently bought a license for UD Dashboard and love it and would appreciate some help.
I currently have a modal popup for creating a new user that looks like this:
image

I’d like it to be wider and break up the inputs into sections, like this:

  1. Make it wider
  2. Break into sections with headers
  3. Have some items be on the same line, others not
    image

I’ve tried a few things, including using new-udhtml with custom CSS (which is new to me). I’d welcome pointers on doing this.

Thanks!

2

Hey @Hugepickle there are number of ways to do this but the simplest way to get as close to what you want would be something like this

It doesn’t have the line separation your are looking for but might give you a starting point / some ideas:

$Dashboard = New-UDDashboard -Title "Hello, World!" -Content {
                
                New-UDCard -Title "User Information" -Content {
                    New-UDParagraph -Text "Create User"
                    New-UDTextbox -Id "txtFname" -Label "First Name" -Type text
                    New-UDTextbox -Id "txtLname" -Label "Last Name" -Type text 
                    New-UDTextbox -Id "txtDisplay" -Label "Display Name" -Type text
                    New-UDTextbox -Id "txtTitle" -Label "Job Title" -Type text
                    New-UDParagraph -Text "Logon Information"
                    New-UDTextbox -Id "txtUserName" -Label "User Name" -Type text
                    New-UDTextbox -Id "txtUserName" -Label "Password" -Type password 
                    New-UDParagraph -Text "License Information"
                    New-UDTextbox -Id "NewScriptModalTextBoxName" -Label "Office 365 License" -Type text
                }

                New-UDElement -Tag div -Attributes @{
                    style = @{
                        textAlign = "right"
                    }
                } -Content {
                    New-UDButton -Text "Next" -Icon folder_plus -OnClick {
                        
                        # Get Input Data
                        $FirstName = ((Get-UDElement -Id 'txtFName').Attributes["value"])
                        $LastName = ((Get-UDElement -Id 'txtLName').Attributes["value"])

                        # do something
                    }
                }
}

Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Dashboard $Dashboard -Port 10001
3

Cool, thanks. I appreciate the start and will play around with this. Do you also know what the cmdlet is to include a drop-down?

4

Hey @Hugepickle I posted the other-day about spacing between input fields here:-

As for including a drop-down, just bookmark this site www.poshud.com and you will see nice examples for everything like:- https://poshud.com/New-UDSelect
If you want to be able to have multiple selections then check out this component I released here:-
Ironman Software Marketplace - UniversalDashboard.UDSelector
I hope this helps you in your journey with UD. Peace

5

Looks great, thanks! @psdevuk and @leeberg, appreciate the speedy response, very cool to have a platform backed by folks to help new folks like me understand it. .

1 Like