Async Loading Components

PowerShell Universal Universal Dashboard
1 
Product: PowerShell Universal
Version: 3.4.1

Hello all,

I’m designing a dashboard to be used by the helpdesk of a small business. Right now, it’s a series of Expansion Panels, each one containing different information that might be needed by a Tier 1 support technician. (Active Directory information, asset info, assigned devices, contact info, previous issues, org chart, etc.)

Some of these datasets take awhile to query, which is leading to long page load times. I keep getting requests to add new panels, which creates more queries, which lengthens the load times further.

Is there a way to have an Expansion Panel load its data only when the panel expands? Or some other way to accomplish this “lazy loading” of content? If I end up with 20 expansion panels, that’s at least 20 queries, and I’d love if only a few fired on each page load, keeping the rest to only execute if requested.

The closest I’ve come up with so far is the -LoadData parameter on New-UDTable, but not all of these panels contain tabular data, so a horizontal table isn’t always the best way to display the info.

I’d be curious to know if there’s something I’m missing in dashboard design best practices, or if there’s a way to do this that I’ve missed.

2

You have a few options. In no particular order…

Scheduled Endpoints - PowerShell Universal

Use this to assign the data to variables every X minutes/Hours/etc. You can then use Invoke-UDEndpoint to manually refresh it, if a tech actually makes a change.

Next, you can use New-UDDynamic to load the data and display components. Using -LoadingComponent you can also visually show that it is loading the data.
Dynamic Regions - PowerShell Universal

Finally, use Tabs instead of Expansion Panels.
Tabs - PowerShell Universal

New-UDTabs supports -RenderOnActive. You can nest tabs as well.

3

Wow, I had completely overlooked Tabs. That looks perfect. Thanks Jori!

4

Glad to help. I recommend looking into the other pieces as well, they can be used in conjunction to speed up or otherwise provide a better user experience. For example, use tabs with -renderonactive with New-UDDynamic so that the user can get some feedback letting them know the data is being queried.

1 Like