Power Apps Button Animation

A few days ago, I was guiding one of my clients on how to save form data locally in Power Apps using collections. For saving data, I used the Collect() function instead of the Patch() function. There, we face an issue: when the submit button is clicked more than once, duplicate data is stored in the collection.

It’s because the client hasn’t figured out whether the data is being saved or not, so they were clicking the button multiple times. To avoid this issue, I researched and found how to animate the save button while submitting and prevent users from clicking while the submission is in progress.

You can see the screenshot for reference.

I will explain how to animate the Power Apps modern button control in this article.

Create a Loading Animation in Power Apps Modern Button Control

Before creating a loading animation in the button control, I would like to mention that there are alternative solutions to the above mentioned problem.

• Reset the controls after submitting data.
• Make the submit button disabled while submitting.
• Display a notification that the data is being saved.

However, as end users, they will understand things better when we show images or animations instead of just data or messages every time.

Let’s see the steps to create animated buttons in Power Apps now!

1. To get the modern controls in Power Apps, open Settings, go to Updates, and then enable Modern controls and themes.

2. Add a modern button control, then provide a name for the button in the Text property, and select an icon.

3. Create a collection of the App OnStart property to store the details in the app itself.

ClearCollect(
    colProjectDetails,
    {
        ProjectName: "",
        ProjectID: "",
        TaskTitle: "",
        ClientName:"",
        AssignedDate:""
    }
)

4. Add the text input and date picker controls, as shown below, and then provide the code below in the OnSelect property of the submit button.

UpdateContext({varSaving:true});
Collect(
    colProjectDetails,
    {
       ProjectName:txt_projectName.Text,
       ProjectID:txt_ProjectID.Text,
       TaskTitle:txt_tasktitle.Text,
       ClientName:txt_clientname.Text,
       AssignedDate:Text(dtp_Assignedto.SelectedDate)
    }
);
UpdateContext({varSaving:false})

Here, the varSaving variable value is assigned to true at the start and then, after collecting the information, is updated back to false. The Collect() function will save the data present in controls to the colProjectDetails.

5. Then, update the Icon and DisplayMode properties of the button control with the following code.

Icon:  If(varSaving, "ArrowSync", "Save")

DisplayMode:  If(varSaving,DisplayMode.Disabled,DisplayMode.Edit)

6. Add a Timer control and update the below values and formulas for the given properties.

OnTimerEnd:  UpdateContext({varRotationAngle:Mod(varRotationAngle +10,360)});

Start: varSaving

Repeat: true

Duration: 1

Y: -Self.Height

Visible: false

Here, the varRotationAngle variable value will be updated every time by 10 from the current value. When the varSaving value is true, then only the timer will start and update the varRotationAngle variable.

7. Provide the code below in the IconRotation property of the button control.

If(varSaving,varRotationAngle,0)

To rotate the icon, we use the varRotationAngle variable when the varSaving variable is true; otherwise, it is set to 0.

Save the changes and preview the app. While submitting data, the button will become disabled and the loading icon will appear until the data is saved.

This way, we can develop an animated button control in Power Apps!

In this article, I explain how to display an animated button control and prevent multiple clicks while submitting data in Power Apps. Follow this article if you are trying to implement an animated button like this! I hope you found this helpful article!

Also, you may like!

• Power Apps Modern Spinner Control – How to Use
• Power Apps Loading Spinner: How to Add and Use for Better UX
• Create Multiple Tabs in Power Apps Form [Download Lead Management App Example]
• Power Apps Pen input [Capture a Power Apps Digital Signature]