Spinner for Canvas App or Custom Page in PowerApps using Fluent UI

While developing canvas app/custom page forms, I have always been surprised that a spinner was not included as a UI control, being a staple in websites everywhere. I have seen methods of creating a spinner using an Icon paired with a Timer to calculate it's rotation to make the Icon appear as a spinner. However, I wanted the native feel of Dynamics when saving a form or loading data. The dots that go along the top (commonly referred to as "ants") to represent an operation is in progress are hardly noticeable and give a very bad sense of responsiveness from the application to the user.

To resolve this, I made a very simple PCF Control that is a spinner using the Fluent UI. This spinner PCF Control has parameters that can be of 4 different sizes (Large, Medium, Small, and Extra Small), has a customizable label & label position, and of course a visibility flag. 



Screenshot of saving a document.

                             

The video below shows how to interact with the PCF Control along with an example of creating an overlay screen to show the spinner and make it impossible to interact with the application with the loading screen is showing.

        

To download the source code or just the solution package to install into your environment, visit my GitHub repository.


   

Comments

Post a Comment

Popular posts from this blog

Power Fx with PCF

Image
  Today, I was checking up on PCF Controls to see if anything new has shown up, as I have stepped away from PCF development for a few months. I saw this new (at least new to me) 'Event' property. Event Control Manifest Microsoft Documentation I can do what?!  Pass PowerFx formulas to be called inside PCFs?! I dug some more into it. Event PCF Usage Microsoft Documentation So it seemed that the context would have an event object, with event(s) as properties of that event object. (I assumed this would be generated the same as properties were). I followed the Microsoft documentation and created an event in my manifest file. It failed on build with an error saying "Error Definitions are not supported." Assuming this was a very new feature, I decided to dig into pcf files in the node modules. I found a file called featureFlags.json and found a property called "pcfAllowEvents" and set it to "on". Setting this to on let my project build. I then tried to ac
Read more

Search ALL formulas, controls, screens and more within a Canvas Apps & Custom Page!!

Image
    Finally, one of my most sought after features in PowerApps has made it's debut! The ability to search for a keyword in any formula, control, screen, and just about anything within a Canvas App & Custom Page. No more of having to flip from the 'Variables' page and back to see where values are initialized and referenced. Everything can be easily searched with this very powerful feature! Example of searching 'Contact' (Click GIF to enlarge)                                                                The feature is in Preview section of Upcoming features. First go to settings of your app and turn on the 'Search' feature. Enable the 'Search' feature at the bottom     Upon enabling that feature, you should immediately see a magnifying glass on the toolbar on the far left side of your screen. Click that and you will see the Search Pane. The Search Pane without any filters      From here, you can search for just about everything. It will search va
Read more