Dynamic colouring of UDCollapsibleItem title background

Universal Dashboard Universal Dashboard Help
1

I’ve been hacking about with this for a day or two and I think I’ve reached a dead-end.

I would like to change the background colour of the title bar for a collapsible item based on the status of a service. I’ve managed to automate the colour of the title bar, but this code only runs when the dashboard starts up. So, although the content of the collapsible can be dynamic using an endpoint, the parent object doesn’t refresh even when the page is reloaded.

In the example below, the desired behaviour is for the title background colour of the last item to change from green to blue depending on the punchline.

Is there any way to achieve this?

$CustomHeaderTheme = New-UDTheme -Name "CH" -Definition @{ 
'li[id$="_blue"] .collapsible-header' = @{
    'background-color' = 'blue'
    'FontColor' = '#ffffff'
}
'li[id$="_red"] .collapsible-header' = @{
    'background-color' = "red"   
}
'li[id$="_orange"] .collapsible-header' = @{
    'background-color' = "orange"   
}
'li[id$="_yellow"] .collapsible-header' = @{
    'background-color' = "yellow"
}
'li[id$="_green"] .collapsible-header' = @{
    'background-color' = "green"
}
'.collapsible-header' = @{
    'background-color' = "#999999"
}
} -Parent "Default"

$MyDashboard = New-UDDashboard -Theme $CustomHeaderTheme -Title "Coloured Collapsible headers" -Content{

New-UDCollapsible -Id 'collapse1' -Items {

    New-UDCollapsibleItem  -Id 'default' -Title 'What cheese do you use to get a Bear to follow you?'  -Content {
        New-UDHeading -Color '#000000' -Text 'Camembert!'
    }

    New-UDCollapsibleItem  -Id 'manual_orange' -Title 'What was  the Prize for the dentist of the year?'  -Content {
        New-UDHeading -Color '#000000' -Text 'A little plaque!'
    }

    $Cache:random1= get-random -Maximum 10
    $Cache:random2= get-random -Maximum 10

    New-UDCollapsibleItem  -Id ($Cache:id + @{$true="_blue";$false="_green"}[$Cache:random1 -gt $Cache:random2]) -Title "$Cache:random1 $Cache:random2 Why did the cow cross the road?"  -AutoRefresh -Endpoint {
        $Cache:random1= get-random -Maximum 10
        $Cache:random2= get-random -Maximum 10
        New-UDHeading -Color '#000000' -Text (@{$true="To get to the udder side!";$false="To go to the mooooooovies!"}[$Cache:random1 -gt $Cache:random2])
        } -RefreshInterval 1
    }
}

Start-UDDashboard -Port 8083 -Dashboard $MyDashboard

2

Hello @robert.heritage this is a good question, and something I have never personally thought about doing before. Thankfully I been on this forum a long time so seen a lot of questions being asked, and I think you would be better using the new-udelement and setting it on that rather than in the theme. I remember this question:-

This seems like what you are trying to do. There is code put here, but I am sure you could apply the same principal. Hopefully this helps?

3

Either that, or do some dirty CSS:

This works: but is not optimized in any way:

New-UDCollapsibleItem -Id (“colorchanging”) -Title “$Cache:random1 $Cache:random2 Why did the cow cross the road?” -AutoRefresh -Endpoint {
$Cache:random1= get-random -Maximum 10
$Cache:random2= get-random -Maximum 10

    New-UDHeading -Color '#000000' -Text (@{$true="To get to the udder side!";$false="To go to the mooooooovies!"}[$Cache:random1 -gt $Cache:random2])
    Sync-UDElement -Id "Changecolorbro"
    } -RefreshInterval 1       
}
New-UDElement -Tag span -Id "Changecolorbro" -Endpoint {
    if ($Cache:random1 -gt $Cache:random2) {
        New-UDHtml -Markup "<style>#colorchanging .collapsible-header {background-color:green;}</style>" 
    }
    else {
        New-UDHtml -Markup "<style>#colorchanging .collapsible-header {background-color:red;}</style>" 
    }
}
2 Likes
4

I don’t think this will work because New-UDCollapsible doesn’t seem to support -Endpoint…

5

Thanks @BoSen29 -that works over here too. Neat trick! Now if only I could modify the title too… :slight_smile:

6

although one ui element such as a collapsible may not have an endpoint, another UD element you nest inside it such as the new-udelement does have an endpoint so you could use that, but yes very nice thinking outside the box by @BoSen29 I wouldnt have thought of that as my HTML skills are not good, but probably adapted the sample I posted. Either way great to see a solution to this specific problem was provided. And big-up for posting the question as the more solutions that are provided for problems makes it easier to learn this product for everyone.