Using the Modern Progress Bar to Create a DYNAMIC Loading Bar in your Canvas App!

In this Pragmatic Works tutorial, Nate Halliwell, a senior trainer, demonstrates how to create a dynamic loading bar in a Canvas App using the new modern progress bar control. This video builds upon his previous tutorial where he created a Power Automate flow to generate multiple child items whenever a parent item is added.

Overview

Nate explains how the dynamic loader prevents users from interacting with the app until all child items are created. The loader updates in real-time, giving clear feedback on progress and ensuring smooth user experience.

Step-by-Step Process

1. Create a Form: Add a simple form for parent items with fields such as asset name and quantity.
2. On Success Action: Use the form's OnSuccess property to trigger the loader pop-up by updating a context variable (e.g., VAR_loader).
3. Build the Loader Container: Insert a full-screen container with semi-transparent background to prevent other interactions. Inside, add another container with white background, border radius, and shadow for aesthetics.
4. Insert Modern Progress Bar: Use the new progress bar from the modern controls. Set its Visible property to the loader variable. Adjust color, shape, and thickness as desired.
5. Configure Max and Value: Use the form's last submit property to dynamically set the max value (total child items to create) and value (items created so far). Use a CountIf function to count child items in the child table corresponding to the parent record.
6. Use a Timer for Real-Time Updates: Insert a hidden timer to refresh the child items table every second. Start and stop the timer automatically using a variable (e.g., VAR_start_timer) to control progress bar updates.
7. End Conditions: Add an IF statement to check if all items are created. Once value equals max, hide the loader and reset the form.
8. User Feedback: Optionally, add a text label showing progress like "10 out of 25 items created" for clarity.

Additional Tips

• Enable modern controls in settings under “Upcoming Features.”
• Use nested containers to leverage border radius and drop shadow styling.
• Control loader visibility during development with a temporary button for testing.
• Keep the timer hidden in production for a cleaner user experience.

Conclusion

This tutorial provides a practical example of how to use modern Canvas App features to create a real-time, dynamic loading experience. By combining Power Automate, the modern progress bar, and smart use of context variables and timers, developers can ensure users see exactly how many child items have been created before proceeding. Nate’s clear demonstration makes this advanced concept approachable, providing a solid foundation for building more complex apps in the future.

Don't forget to check out the Pragmatic Works' on-demand learning platform for more insightful content and training sessions on Canvas App and other Microsoft applications. Be sure to subscribe to the Pragmatic Works YouTube channel to stay up-to-date on the latest tips and tricks.