Help with New-UDGrid for UD V3

Universal Dashboard Universal Dashboard Help
#1

I discovered UD early this year, but just now able to start diving in and building out a POC. I’m new to UD, and I’m trying to learn v3, as v2 is now legacy. Unfortunately all the YouTube videos, the Udemy course, and most of the forum topics are for v2.

I’m trying to follow along with the Udemy video to learn UD, but I’m having to translate the v2 code in the course to the new v3. One of the first things in the course is to learn Layouts, using New-UDLayout; however that cmdlet does not exist in v3. When I search the v3 documentation, the only thing under Layouts is Grid (New-UDGrid), and to note, this v3 cmdlet is different from the v2 cmdlet (different parameters): https://docs.ironmansoftware.com/dashboard/components/layout/grid

When I copy the New-UDGrid code snippet examples directly from the page, into a dashboard, I cannot get them to work. I’ve tried both examples, and many variants I could think of, but no go. I keep getting a React error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=TypeError%3A%20Cannot%20read%20property%20’map’%20of%20undefined&args[]=

And that error url translates to: Objects are not valid as a React child (found: TypeError: Cannot read property ‘map’ of undefined). If you meant to render a collection of children, use an array instead.

Can someone help me understand how to use v3 New-UDGrid? Any working examples?

Thanks,
Rob

#2

Hey @Mentat,

This is working for me in the latest.

New-UDDashboard -Title 'Test' -Content {
    New-UDGrid -Container -Content {
        New-UDGrid -Item -ExtraSmallSize 12 -Content {
            New-UDPaper -Content { "xs-12" } -Elevation 2
        }
        New-UDGrid -Item -ExtraSmallSize 6 -Content {
            New-UDPaper -Content { "xs-6" } -Elevation 2
        }
        New-UDGrid -Item -ExtraSmallSize 6 -Content {
            New-UDPaper -Content { "xs-6" } -Elevation 2
        }
        New-UDGrid -Item -ExtraSmallSize 3 -Content {
            New-UDPaper -Content { "xs-3" } -Elevation 2
        }
        New-UDGrid -Item -ExtraSmallSize 3 -Content {
            New-UDPaper -Content { "xs-3" } -Elevation 2
        }
        New-UDGrid -Item -ExtraSmallSize 3 -Content {
            New-UDPaper -Content { "xs-3" } -Elevation 2
        }
        New-UDGrid -Item -ExtraSmallSize 3 -Content {
            New-UDPaper -Content { "xs-3" } -Elevation 2
        }
    }
}

Are you running 1.3.2 and does this example yield the error you are seeing?

#3

Hey @adam,

LOL…I tried that exact thing earlier and it did not work. Well, it did, but 2 seconds later the page said I needed to refresh, then it no longer worked. Now it’s working…every time :slight_smile:
I’ll blame gremlins for this one.

Thanks,

#4

#5

I have something similar in UD 3.2.1 running on PSU 1.5.2 where if i use Set-UDElement -Id “SomeButton” -Attributes @{hidden = $false} or @{hidden = $true} the dashboard crashes with
Minified React error:

image
image1596×109 13.6 KB

This does the same when i am trying to set attributes of a UdDynamic to hidden. Previously on 1.4x this worked well with buttons and UdElements.

Any thoughts @adam ?

#6

I just tried this and it works with this configuration. Can you provide a little more of an example?

Start-PSUServer -Port 8080 -Configuration {
    New-PSUDashboard -Name 'MTG' -BaseUrl '/' -Framework 'UniversalDashboard:Latest' -Content {
        New-UDDashboard -Title 'Test' -Content {
            New-UDElement -Id 'test' -Tag 'div' -Content {
                New-UDTypography -Text "Hello"
            }
    
            New-UDButton -Text 'hide' -OnClick {
                Set-UDElement -Id 'test' -Attributes @{
                    hidden = $true
                }
            }
        }
    } 
}
#7

Maybe im getting a bit far into the New-UdDynamic here! can you try that example with UdDynamic not UdElement? Or does UdDynamic have different attributes? The only 2 i have tested is New-UdButton and New-UdDynamic.

I have a workaround anyway but would be good to get this working.

Thanks Adam.

#8

My issue was i was trying to set attributes on UdDynamic, when i put this inside a UdElement it works fine.

Thanks again Adam.