PowerApps – Display a loading icon until the screen loads completely

Hello Everyone,

First, I would like to personally thank everyone for providing such a great response to PowerGuide Program and keep your spirits up during this tough Covid time!

I wish you well during this challenging time. Stay at home. Be healthy and God bless you!

Keep Learning and Don\’t Let Your Learning Lockdown…

I am Starting today\’s Power Guide Mentorship Program with a Positive Thought:

TOUGH TIMES DON\’T LAST

TOUGH PEOPLE DO

Today, I am going to share a #PowerGuideTip7 – Isn’t it a great idea to show a cool animated image until your canvas app screen is loading? Interesting Isn’t…!!!

So in today\’s program, I am going to share a tip to design a loading Icon or displaying a loading message until your Canvas App Loads the Controls and Data on the screen.

Of Course, it will improve your app\’s user experience as well.

In PowerApps, we have two techniques to provide this feature:

Technique 1 – Out Of Box Loader

Out Of Box Canvas App, provide a property called LoadingSpinner and LoadingSpinnerColor.

LoadingSpinner property is used to displaying a Canvas App OOB Loader Image unless your screen finishes loading.

LoadingSpinner can be used in three ways:

  • LoadingSpinner.None- Setting it\’s a value to None means it won\’t show the Loading Image on the screen.
  • LoadingSpinner.Controls – Setting it\’s value to Controls means, it will show the Loading Spinner unless all the controls present on the screen gets loaded completely
  • LoadingSpinner.Data – Setting it\’s value to Data means, it will show the Loading Spinner unless all the data gets retrieved on the screen from the defined data source

LoadingSpinnerColor property is used to change the color of the loading image (as per your need).

Please see below, how can you find these two properties in Canvas App Screen:

Click on the Screen in your Canvas App and then You\’ll be able to see LoadingSpinner and LoadingSpinnerColor Property

By default, LoadingSpinner value is set to None, but you can change it either Data or Controls as per your need
Different ways to display the LoadingSpinner
Can change LoadingSpinner Color using LoadingSpinnerColor property
This is how OOB Loading Spinner Looks like


Technique 2 – Design Custom Loader

I always promote using OOB features as much as possible whether it is Microsoft Dynamics 365 or Power Platform, however, while using this feature, my experience was not satisfactory to be very honest. Maybe Microsft will come up with some new enhancements to make it more mature.

And it\’s not me only who is complaining about this feature, you can find a lot of people (see reference below) having trouble using it especially in case of data loading.

https://powerusers.microsoft.com/t5/Building-Power-Apps/Custom-Loading-Spinner/td-p/268416

https://powerusers.microsoft.com/t5/Building-Power-Apps/Screen-new-property-LoadingSpinner/m-p/110767

Also, you can\’t change the Spinner Loader Image and its other properties (except its color).

Hence, to get rid of this situation, making your own loader is the best way, so that you can handle its appearance and Hide/Show as per your need.

Let\’s get started…

Step 1: Download the Gif Loader from the Internet (whatever you like)

Can refer following articles for the same:

Step 2: Add some Controls in your Canvas Screen where you want to display the loader

a) Rectangle Icon – To cover the whole screen and provide a placeholder for a loader.
b) Label – Display Progress Message (For Ex: \”Please wait, Thanks for your patience…\”)
c) Image – To display Gif Loader Image.

Note: You can also design the loader screen as per your need by adding more controls.

Step 3: Declare a Variable to manage Hide/Show of Loader and all the Controls created in Step 2. 

Set the Variable to all the Controls (on Visible Property)

In the screenshot below, I have set the Variable for Label Control only. However, you have to do the same for the Rectangle and Loading Image as well.

Note: After setting a Variable (DisplayLoader) name, you\’ll get an error on the controls. Please ignore it for the time being. It is because we didn\’t set its value yet anywhere on the screen.

Step 4: Set the Variable value to True when you want to display the Loader, else set the value to False when you want to Hide the Loader (can hide/show as per your need)


In the below example, I am creating a Lead in Dynamics 365. and I have used the following formula on Create Button Control (OnSelect Property).

I have Set the Variable value to True (to display loader) at the beginning of my code and Set the Variable value to False (to hide the loader) at the end of the code

// Display Loader
Set(DisplayLoader, true);

//patch the daa into D365
Patch(Leads, Defaults(Leads), { firstname: firstName_6.Text },{ lastname: lastName_5.Text },{emailaddress1: emailAddress_5.Text},{jobtitle: jobTitle_4.Text},{mobilephone: mobilephone_5.Text});

// Save Data Locally by adding above collection in Local Cache
Navigate(SuccessScreen,ScreenTransition.Fade);

//Once done with the operation. Hide the Loader
Set(DisplayLoader, false);


Step 6: Run and Test the App

So thumb rule of displaying this loader is:

Set the Variable Value to True at the beginning of your code

Set(DisplayLoader, true);

/////Logic 1

/////Logic 2

/////Run Power Automate 1

/////Run Power Automate 2

/////Run Power Automate 3

/////Run Power Automate…..n

/////Logic …n

//Perform all the logic/create/update/delete/retrieve

Set(DisplayLoader, false);

Set the Variable value to False at the end of your code

Important Note: In the above example, I have used the loader while pushing the data/record in the database. However, If you want to display the loader on the load of the screen, you can use the same algorithm (as shown above) on OnVisible property of your Canvas App Screen.

That\’s all folks for today.

Stay Tuned for my Next Tip – PowerGuideTip8. 

Published by arpitpowerguide

My name is Arpit Shrivastava, who is a Microsoft MVP in the Business Applications category. I am a Microsoft Dynamics 365 and Power Platform enthusiast person who is having a passion for researching and learning new things and acquiring immense knowledge. I am providing consistent help, support, and sharing my knowledge through various Social Media Channels along with my Personal Blog, Microsoft Community, conducting online training and attending various 365 Saturday Events worldwide and sharing the best Solutions to the readers helping them achieve their goals and objectives in Customer Relationship Space.

18 thoughts on “PowerApps – Display a loading icon until the screen loads completely

  1. Thanks for one marvelous posting! I enjoyed reading it; you are a great author. I will make sure to bookmark your blog and may come back someday. I want to encourage that you continue your great posts.Full Stack Training in Chennai Full Stack Course Chennai Full Stack Training in Bangalore Full Stack Course in Bangalore Full Stack Training in Hyderabad Full Stack Course in Hyderabad Full Stack TrainingFull Stack CourseFull Stack Online Training Full Stack Online Course

    Like

  2. My spouse and I love your blog and find almost all of your posts to be just what I’m looking for. Appreciating the persistence you put into your blog and the detailed information you provide. I found another one blog like you Data Analytics .Actually I was looking for the same information on internet for Data Analytics Service and came across your blog. I am impressed by the information that you have on this blog. Thanks once more for all the details.

    Like

  3. I wish to show thanks to you just for bailing me out of this particular trouble. As a result of checking through the net and meeting techniques that were not productive, Same as your blog I found another one Inbounce Marketing .Actually I was looking for the same information on internet for Inbounce Marketing and came across your blog. I am impressed by the information that you have on this blog. Thanks once more for all the details.

    Like

  4. Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support in this area. same as your blog i found another one Web Analytics .Actually I was looking for the same information on internet for Web Analytics and came across your blog. I am impressed by the information that you have on this blog. Thanks once more for all the details.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: