V3 Beta - arrangement of objects in pages

Universal Dashboard Universal Dashboard Help
1

I’m currently starting to work through and convert some existing pages to the version 3 code using the beta in PSUniversal. However, I’ve come across a couple bits for page arrangement that is making it frustrating. I’m not sure I understand best how to organize the code to get the desired result. I’ve looked over the example code, even have the demo site running to reference. Any input would be appreciated.

First bit is organizing a card with multiple input elements. I would like to have them show lined up vertically, instead of it attempting to put them all together on a horizontal setup.
Picture example:
ud3-input

code:

New-UDCard -Title 'Card Title' -Content {
                New-UDTextbox -Id 'SystemNames' -Label 'SystemNames' -Placeholder "System Names - Comma Seperated"
                New-UDSelect -Id 'Dataname' -Option {
                    $Cache:configdata.data.name | ForEach-Object {
                        New-UDSelectOption -Name $_ -Value $_
                    }
                }
                New-UDButton -Text 'Start stuff'
            }

Second bit, trying to setup my page grid. The first section of my page on the left has a list of expansion panels and takes up a bit. I then want two different input cards in the middle, the one referenced above and a CSV file upload section. Finally on the right, an output table of the jobs successfully running. I’m having difficulty getting the two boxes in the middle, this is what it ends up looking like.

picture:

ud3 page
ud3 page1396×847 99 KB

and my code example:

New-UDGrid -container -content {
        New-UDGrid -item -SmallSize 3 -content {
            New-UDCard -Title "title" -Content {
                #expansion panel code here
            }
        }
        New-UDGrid -Item -SmallSize 3 -Content {
            New-UDCard -Title 'Single Recipe Prepend' -Content {
                #input stuff here
            }
        }
        New-UDGrid -Item -SmallSize 5 -Content {
            #table here
        }
    }
New-UDGrid -Container -Content {
	New-UDGrid -Item -SmallSize 2 -Content {
		New-UDCard -Title "CSV Batch Upload" -Content {
			#upload code here
		}
	}
}
2

How’s this look?

image
image1334×703 15.6 KB

New-UDCard -Title 'Card Title' -Content {
        New-UDGrid -Container -Content {
            New-UDGrid -Size 12 -Content {
                New-UDSelect -Id 'Datanam e' -Option {
                    1..10 | ForEach-Object {
                        New-UDSelectOption -Name $_ -Value $_
                    }
                }
            }
            New-UDGrid -Size 12 -Content {
                New-UDTextbox -Id 'SystemNames' -Label 'SystemNames' -Placeholder "System Names - Comma Seperated"   
            }
            New-UDGrid -Size 12 -Content {
                New-UDButton -Text 'Start stuff '
            }
        }
    }

    New-UDGrid -container -content {
        New-UDGrid -item -SmallSize 3 -content {
            New-UDCard -Title "title" -Content {
                #expansion panel code here
            }
        }
        New-UDGrid -Item -SmallSize 3 -Content {
            New-UDCard -Title 'Single Recipe Prepend' -Content {
                #input stuff here
            }
            New-UDCard -Title "CSV Batch Upload " -Content {
                #upload code here
            }
        }
        New-UDGrid -Item -SmallSize 5 -Content {
            New-UDCard -Title "Table   " -Content {
                #upload code here
            }
            #table here
        }
    }
3

not quite the layout i’m looking for, but your code helps me understand how i might be able to make it work better. I’ll play around with a bit, and see if I can post up some new results on it to share with others :slight_smile:

4

Sounds good. I honestly had to mess with it a bit myself so if there is anything we should do to make this easier, let me know.

5

i think maybe if there was away to set lineup of items in cards, that would be a big help.

In terms of organizing the page, I hate to say it but the UDGrid method in v2.x was much more helpful to me. Moving the items in admin mode and copying the layout to put as final config for the page. Even if that wasn’t doable, the grid system now seems to only really work on the Row concept, with columns just being implied by your code. It makes it difficult to arrange the page when you have this different sized objects.

6

We can get UDGridLayout back in there. It’s actually just a stand alone component so we should be able to port that to v3 pretty easily.

7

So I made some progress on the layout. I’ll post the sample code below, but the trick was that I had to make the grid size small enough on the middle set so that it would properly align them vertically instead of horizontally. I was able to get the second card under it by tossing it into the same content scriptblock as the top card. While this works, I do think gridlayout would be immensely helpful in working with these scenarios. I also feel like the ability to set objects in cards or grid items on an axis alignment could be useful. Maybe something like -AxisAlign horizontal / vertical. That, or maybe it’s just me grasping a better understanding of the code layouts. Until you gave me the example to work from, I didn’t think to put another grid container inside one I had already established.

I also noticed this little bug, marked on the picture. The third column is part of the overall grid container for the page, yet it seems to be slightly higher on alignment.

ud3-newpage
ud3-newpage1615×673 46.7 KB

code example of the layout:

New-UDGrid -container -content {
        New-UDGrid -item -SmallSize 3 -content {
            New-UDCard -Title "Info Legend - Click names to see description" -Content {
                New-UDExpansionPanelGroup -Children {
                    foreach($data in $Cache:configdata.data){
                        New-UDExpansionPanel -Title $data.name -Children {
                            New-UDElement -Tag 'div' -Content { $data.description}
                        }
                    }
                }
            }
        }#first column end
        New-UDGrid -Item -SmallSize 2 -Content {
            New-UDCard -Title 'Single Prepend' -Content {
                New-UDGrid -Container -Content {
                    New-UDGrid -Item -Content {
                        New-UDTextbox -Id 'SystemNames' -Label 'SystemNames' -Placeholder "System Names - Comma Seperated"
                    }
                    New-UDGrid -Item -Content {
                        New-UDSelect -Id 'DataName' -Option {
                            $Cache:configdata.data.name | ForEach-Object {
                                New-UDSelectOption -Name $_ -Value $_
                            }
                        }
                    }
                    New-UDGrid -Item -Content {
                        New-UDButton -Text 'Start Prepend'
                    }
                }#>
            }#first card, second column
            New-UDCard -Title "CSV Batch Upload" -Content {
                New-UDGrid -Container -Content {
                    New-UDGrid -Item -Content {
                        New-UDButton -Text 'CSV Upload' -OnClick {}
                    }
                    New-UDGrid -Item -Content {
                        New-UDButton -Text 'Template Download'
                    }
                    New-UDGrid -Item -Content {
                        New-UDButton -Text 'Start Prepend'
                    }
                }
            }#second card, second column
        }#second column end
        New-UDGrid -Item -SmallSize 5 -Content {
            New-UDTable -Title "Current Login Session - Successful Prepends" -Data $session:PrependDataTable
        }#third column end
    }
8

Thanks for the feedback and glad to hear you’re having a bit more success. And like I said, we’ll get UDGridLayout back in there. It won’t make 1.2 but I’ll get it in vNext.

As for the bug with the spacing at the top, please file an issue. Seems like something we should fix.

9

I was working with layouts again on another page, and it’s not been going as easily as the previous example. It got me digging into the Grid component on MaterialUI’s site. I noticed under their Complex Grid example that there is a direction component in the code for grid items. It allowed the example to line up the grid items in a columned order. Don’t know if this would be workable into your existing code for UD, but I thought it worth bringing up.