Use New-UDProgress to show step-by-step progress

PowerShell Universal Universal Dashboard
1 
Product: PowerShell Universal
Version: 2.0.2

Hey everyone,

Following Adam’s YouTube video posted on the New-UDForm page, I was able to create a form using New-UDTypography combined with New-UDProgress to create a visual step-by-step progress for a dashboard. This was done with placing this in the -OnProcessing script block

        $session:output = "Querying Server:  $comp..."
        New-UDDynamic -Id 'output' -Content {New-UDTypography -Text $session:output}
        New-UDProgress

Then in multiple areas of the -OnSubmit script block, I’d call the New-UDDynamic -Id ‘output’; giving different different values of $session:output

        $session:output = 'Testing Connection...'
        Sync-UDElement -Id 'output'

This works great! However, a new dashboard I’ve written is not a form, so I don’t have these script blocks to work with. The script takes time to do its thing, so I’d like to provide a step-by-step progress, without using a form. There will not be any user interaction, just the script gathering data, massaging it, then creating a chart and a table.

When the page is loading, I’d like to show 3 progress notifications. One for “Gathering Data …” while we query SQL and other data from a remote server. The next one for “Crunching Numbers …” while we massage data. The last one for “Making Data Pretty …” while we create our UDChartJS and UDTable. Then load everything on to the page.

Over the past few days, I’ve tried everything I can think of. I’ve gotten various degrees of partial success, to straight up failure. Is this possible? If so, is there an example out there someone can point me to?

Thanks,
Rob

2

I haven’t tried this code exactly but here’s something you should be able to do:

New-UDDynamic -Id Progress -Content {
        New-UDTypography -Text $session:output
        New-UDProgress
}

New-UDDynamic -Id charts -Content {
     $session:Output = 'Gathering data...'
     Sync-UDElement -Id 'progress'
     # gather data
     $session:Output = 'Crunching numbers'
     Sync-UDElement -Id 'progress'
     # crunch numbers
     $session:Output = 'Making data pretty...'
     Sync-UDElement -Id 'progress'
     # make data pretty
     # New-UDChartJSChart
}

As the first dynamic loads, the second will be updated. Then create your chart at the end.

3

Adam, you’re a mad genius, thank you!

This worked with one issue. Once the dashboard fully loaded, the last call of Sync-UDElement keeps the UDProgress running indefinitely at the top of the page. To make it go away, I added one more call to Sync-UDElement with $session:Output = ‘Done’. Then added an if statement to New-UDDynamic -Id ‘progress’.

New-UDDynamic -Id 'progress' -Content {
     if ($session:output -ne 'Done')
          {
          New-UDTypography -Text $session:output
          New-UDProgress
          }
     }

New-UDDynamic -Id charts -Content {
     $session:Output = 'Gathering data...'
     Sync-UDElement -Id 'progress'
     # gather data
     $session:Output = 'Crunching numbers...'
     Sync-UDElement -Id 'progress'
     # crunch numbers
     $session:Output = 'Making data pretty...'
     Sync-UDElement -Id 'progress'
     # make data pretty
     # New-UDChartJSChart
     $session:Output = 'Done'
     Sync-UDElement -Id 'progress'
}
1 Like