Align the udcard horizontally

PowerShell Universal Universal Dashboard
1

How do you align the udcards horizontally? I literally spent hours and couldn’t figure it out. Am I to use UDGrid instead? if so, does it work the same as the card? I will be nesting a table and a photo in the card or grid but I prefer for the cards to populate horizontally instead of the vertical default. Seems really easy so I’m hoping to hear from someone on this one soon. Thanks

Using v3 btw.

2

Are you looking for something like this?

image
image1584×299 6.77 KB

I used New-UDStack to do this.

# Put code you'd like to run during dashboard startup here. 

New-UDDashboard -Title 'PowerShell Universal' -Pages @(
    # Create a page using the menu to the right ->   
    # Reference the page here with Get-UDPage
    New-UDPage -Name 'Home' -Content {
        New-UDStack -Direction row -Children {
            New-UDCard -Title 'Card 1' -Text 'Card 1'
            New-UDCard -Title 'Card 2' -Text 'Card 2'
            New-UDCard -Title 'Card 3' -Text 'Card 3'
        }
    }
)
1 Like
3

Yup! this is perfect thank you Adam. I started looking into udstack but hadn’t tried it. I wasn’t sure if it would change what I already had going on because i’m not a strong coder at all.

4

Hey @adam, thank you for the example. It worked in this example but i’m not having the same success in the code:


# Function to create cards for each item in the CSV file
function Create-Cards {
    $csvData = Import-Csv -Path 'C:\dashboard.csv'
    $cards = @()
    foreach ($item in $csvData) {
        $imageName = $item.ID
        $area = $item.area
        $detector = $item.detector
        $type = $item.type
        $date = $item.date
        $now = Get-Date
        $time = $item.time
        #$eventTime = [datetime]::ParseExact("$date $time", 'M/d/yyyy H:mm:ss', $null)
        #$eventTime = [datetime]::ParseExact("$date $time", 'yyyy-mm-dd hh:mm:ss', $null)
        #$elapsedTime = $now - $eventTime
        #$elapsedTimeString = $elapsedTime.ToString('hh\:mm\:ss')

        $data = @(
            @{area = $area; detector = $detector; type = $type; date = $date; time = "$($elapsedTimeString)ago"}
        )

        $Columns = @(
            New-UDTableColumn -Property detector -Title detector
            New-UDTableColumn -Property type -Title type
            New-UDTableColumn -Property date -Title date
            New-UDTableColumn -Property time -Title time
        )

        $card = New-UDCard -Title $area -Content {
            New-UDTable -Id ‘awesometable’ -Data $data -Columns $Columns 
            New-UDChip -Label "video clip" -Id "chipIcon2" -Icon $Icon -OnClick {Show-UDToast -Message 'video' } -Style @{
                backgroundColor = '#00838f'
                margin = '15px'
            }
            New-UDChip -Label "live" -Id "chipIcon3" -Icon $Icon -OnClick {Show-UDToast -Message 'live'} -Style @{backgroundColor = '#00838f'}
            New-UDChip -Label "test" -Id "chipIcon4" -Icon $Icon -OnClick {Show-UDToast 'dispatch' } -Style @{
                backgroundColor = '#00838f'
                margin = '8px'
            }
        } -Image /images/$imageName.png
        $cards += $card
    }
    $cards
}

# Create page with element that calls the Create-Cards function
$pages = @()
$pages += New-UDPage -Name 'Home' -Content {
    New-UDElement -Tag 'div' -Endpoint {
        New-UDStack -Direction row -Children {
            New-UDColumn -Content {

        Create-Cards
            }
                }
    } -AutoRefresh -RefreshInterval 5 
} -NavigationLayout permanent -Navigation $navigation

New-UDDashboard -Title "test" -Pages $pages

I swear it worked at first, then, my script changed slightly and it went back to a vertical stack… I’ve been retracing my steps to no avail.

5

got it!

I moved the “Create-Cards” function directly under the “New-UDStack” cmdlet. As far as the New-UD column, I added it to the $cards variable. I have to admit, I had “help” with that part. Here’s the portion of the script that was changed:


 $cards += New-UDColumn -Content {
            $card
        }
    }
    $cards
}

# Create page with element that calls the Create-Cards function
$pages = @()
$pages += New-UDPage -Name 'Home' -Content {
    
    New-UDElement -Tag 'div' -Endpoint {
        
        New-UDStack -Direction row -Children {
            Create-Cards
        }
    } -AutoRefresh -RefreshInterval 5 
} -NavigationLayout permanent -Navigation $navigation
1 Like