Do you have a PowerApps screen that's sluggish? A loading image can help with your user satisfaction. I recently created an app for our HR department in this series and there were screens where SharePoint was sluggish, so users would interpret that as nothing was happening. What can you do to fix this? In this post, I’ll show you how to create a loading spinner to give your users the perception that something IS happening inside the app.
Sure, we get those loading ants marching across the screen but at times users need a bit more of an obvious punch to show that something is indeed happening. There are two techniques to make this happen, an automated method and another where you have more control and can decide when you want to show the loading image.
Technique One – a generic automated way:
- Let’s begin back in our shoutout app I’ve been building. First, I’ll select my whole home opener screen.
- There’s a property in the Advanced tab (or the drop down in the top left) called Loading Spinner. When I select this, in the code bar you’ll see that LoadingSpinner.None is selected by default.
- In this case I’m going to set this to Data (LoadingSpinner.Data) which is what is making my environment more sluggish on this app.
- By setting this loading spinner to data, whenever it opens a screen and the data is coming in, it will give us a loading spinner to easily see that is happening. I do this on both screens on this app. In the drop down you’ll also see a loading spinner color option so you can control what your spinner looks like.
- You can also set a spinner to happen on the control side for if you have some slow controls like Power BI for example.
Technique Two – manually set a spinner for more control over the end user experience:
- Here, we’ll import an image for our loading spinner. To do this I’ll use a website called loading.io.
- With this method I’ll have the ability to hide and show that image on different screens and have complete control over my load spinner.
- First, I go to the loading.io website and simply choose and download my icon from tons of choices, some which are free or open source and some you’ll have to pay for. Before you download it, you’ll have the chance to view it in action and choose a color scheme as well as the speed and size of it.
- Once you’ve customized your spinner, you’ll download it as a GIF to import it into PowerApps in the Media section.
- I go into the second screen of my shoutout app and I want to implement it here to communicate to users that something is happening when they click the send shoutout button.
- In the tool bar up top, I click the Media drop down and select Image that I downloaded. As I’ve imported the image, I don’t need a URL in the code bar, I can just type in a key word in the image name and it should find it.
- I place my image above the send shoutout button to capture the eye of the user once they click it.
- Next, I’ll put a variable in place to let my application know that I don’t want to show this image by default. I go into On Visible and add the variable, VARLoading, and make its default state False. By setting it to False, I set it up to hide that image when the screen is first opened.
- Now I need an event to show the image/icon when the process happens of clicking the send shoutout button. I click on the send shoutout button and set the variable on the button to VARLoading True.
- So, I need to add 3 events in my code - to show the icon, to submit the form and then back to the previous screen.
That’s how simple it is to add a loading spinner to your application and it’s great to have the option to customize your spinner and have complete control over how you want to use it.
Just starting out with PowerApps? How about learning it for FREE? In partnership with Microsoft, Pragmatic Works’ virtual App in a Day course will get you started with PowerApps at no cost! Click the link below to register for your FREE course today!
-1.png)
Leave a comment