How To Create a Spinner Component in PowerApps
Using a spinner is a good way to show your users that your app is processing data as well as a visual to make your app appear to run quicker. Using a PowerApps component makes it is even easier to implement in your apps across multiple screens. This post will show you how to create a spinner component in PowerApps. Continue reading and you too will be an office power user!
First thing you should do is to have an animated image to use for your spinner and add it to your media in PowerApps
Creating the Component
From the insert menu in PowerApps select Components > New Component
- Component
- Name: ComponentSpinner
- Width: 1366
- Height: 753
- Fill: RGBA(0, 0, 0, 0)
- Image
- Image: loading // You can change this to the name of the media you added for the spinner.
- Width: 124
- Height: 124
- X: 632
- Y: 297
Back in the Screens
We will insert a save icon to trigger the spinner component and then insert the spinner component.
- Icon
- Icon: Icon.Save
- Width: 44
- Height: 44
- X: 1027
- Y: 378
- OnSelect:
UpdateContext({varShowSpinner: true});
//Put your code here that updates data. This is what will process as the spinner is displayed.
UpdateContext({varShowSpinner: false})
- ComponentSpinner (insert your newly created component
- Name: ComponentSpinner_1
- X: 0
- Y: 0
- Width: 1366
- Height: 753
- Visible: varShowSpinner
You can copy this component onto each of your screens where you need it. You simply call it by setting the “varShowSpinner” variable to true and than back to false once processing is complete.
Note: when adding this component to your screens you need to reorder the control to the front so that when the spinner is running no other control can be selected.
Now you know how to create a spinner component in PowerApps! Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as new articles will be posted regularly.
Additional Component Resources
For more step by step guides using components please see my posts on:
how-to-create-a-popup-confirmation-in-powerapps
how-to-build-a-menu-component-in-powerapps
