UDCard & UDSelect - Help with formatting

PowerShell Universal
1

Hello! Fairly novice to PowerShell Universal and I’m struggling with how to format content in my dashboards and get things to line up. Does anyone have any suggestions to how I could achieve this behavior below to get the UDSelect up next to the UDCard title? Thanks!

udselect

New-UDCard -Title 'Parking ID' -Content {

New-UDForm -ButtonVariant 'contained' -Content {

     New-UDSelect -Id 'selParking' -DefaultValue 1 -Option {
            New-UDSelectOption -Name 'Search' -Value 1
            New-UDSelectOption -Name 'Add' -Value 2
            New-UDSelectOption -Name 'Delete' -Value 3
        } -OnChange {
            Sync-UDElement -Id 'dyParking'
        }

    New-UDDynamic -Id 'dyParking' -Content {
        $value = (Get-UDElement -Id 'selParking').value
        
    
        #Search
        if ($value -eq 1) {
            

            New-UDTextbox -Id 'txtParkingSearch' -Placeholder 'Parking ID'

        #Add 
        } elseif ($value -eq 2) {

            New-UDRow {

                New-UDColumn -SmallSize 4 -LargeSize 4 {

                    New-UDTextbox -Id 'txtParkingEmployee' -Placeholder 'Employee Name'

                }
                New-UDColumn -SmallSize 4 -LargeSize 4 {

                    New-UDTextbox -Id 'txtParkingID' -Placeholder 'Parking ID'

                }                
                
            }

        #Delete
        } elseif ($value -eq 3) {

            New-UDTextbox -Id 'txtParkingDelete' -Placeholder 'Parking ID'

        }
    } 
         
        New-UDElement -Tag 'br'
        
    }
2

So personally I would not use the TITLE parameter on the card. Within the card you could create a DIV and place the text and select in the custom DIV. If this does not auto lineup then you will need to add the appropriate css to the div. Again I probably wouldn’t nest the form inside the card. But that’s just me

3

Personally,

I would get rid of the New-UDCard and replace it with New-UDGrid and rely on CSS for styling. I would then use New-UDHeading to display my title.

New-UDGrid -Container -ClassName GridContainer -Children {
        New-UDGrid -Item -ClassName GridItem -ExtraLargeSize 12 -Content {
            New-UDStack -Direction row -Children {
                New-UDHeading -Size 4 -Text "Parking ID"
                New-UDSelect -Id 'selParking' -DefaultValue 1 -Option {
                    New-UDSelectOption -Name 'Search' -Value 1
                    New-UDSelectOption -Name 'Add' -Value 2
                    New-UDSelectOption -Name 'Delete' -Value 3
                } -OnChange {
                    Sync-UDElement -Id 'dyParking'
                }
            }
        }
    }

CSS can be used to tweak the presentation to how you would like.

4

Thank you! I will keep this in mind. My main reason for using UDCard is because I have a dashboard with several different forms and having a card for each form seemed to be the cleanest way to distinguish them from each other.

5

Thank you! Using a DIV is looking to be a better solution. The reason I am using cards is I have several forms on one page of a dashboard and separating the forms into cards seemed like the cleanest way to distinguish them from each other.

6

You if you like the appearance of a udcard, you could use new-udpaper and expand on what matt advised like this:

New-UDPaper -Elevation 3 -Children {
    New-UDGrid -Container -ClassName GridContainer -Children {
        New-UDGrid -Item -ClassName GridItem -ExtraLargeSize 12 -Content {
            New-UDStack -Direction row -Children {
                New-UDHeading -Size 4 -Text "Parking ID"
                New-UDSelect -Id 'selParking' -DefaultValue 1 -Option {
                    New-UDSelectOption -Name 'Search' -Value 1
                    New-UDSelectOption -Name 'Add' -Value 2
                    New-UDSelectOption -Name 'Delete' -Value 3
                } -OnChange {
                    Sync-UDElement -Id 'dyParking'
                }
            }
        }
    }
}
3 Likes
7

That’s what l love about this product. There is so much you can do, and there is no one way to do it.

I used the CSS Class names to provide whatever styling I wanted.

1 Like