Power Apps: Craft Eye-Catching Loading Animations in Modern Buttons!
Power Apps
Dec 2, 2024 4:51 PM

Power Apps: Craft Eye-Catching Loading Animations in Modern Buttons!

by HubSite 365 about Reza Dorrani

Principal Program Manager at Microsoft Power CAT Team | Power Platform Content Creator

Citizen DeveloperPower AppsLearning Selection

Power Apps, Modern Button, UX, Loading Animation, Icon Rotation Angle, OnSelect Code

Key insights

  • Loading Animation: Enhance Power Apps with a loading animation using the Modern Button control. This feature allows the inclusion of an icon and its rotation, improving user experience (UX).

  • Interactive Button Function: On clicking the "Save" button, an animation starts. The button is disabled while the operation runs, changing the icon to an animated spinner and updating the label to 'Saving…'. Once completed, it returns to its original state.

  • User Experience Improvement: The animation clearly indicates that a request has been received, is in progress, and when it is completed. This enhances UX by providing visual feedback.

  • Implementation Steps: Use a Timer control to animate the icon. Set properties like Repeat (true) for continuous animation and Duration (1) for speed adjustment. Use context variables for dynamic updates.

  • Button Properties Configuration: Update Icon, IconRotation, Text, and DisplayMode based on whether saving is in progress (ctxIsSaving). Choose icons like ArrowSync for loading indication.

  • Timer Control Setup: Ensure the timer starts with ctxIsSaving as soon as the operation begins. Hide from screen readers by setting Visible property to false if needed.

Introduction to Loading Animations in Power Apps

Power Apps, a versatile platform for building custom business applications, continues to evolve with new features that enhance user experience (UX). One such feature is the ability to create loading animations within the Modern Button control. In a recent tutorial by Reza Dorrani, viewers are guided through the process of integrating these animations into their Power Apps applications. This enhancement not only improves the visual appeal of applications but also provides clear feedback to users about the status of their operations.

Understanding the Modern Button Control

The Modern Button control in Power Apps has been updated to allow the inclusion of icons, which can be animated to create a more interactive user interface. This update opens up opportunities for developers to add subtle yet effective animations that inform users about ongoing processes. When users interact with a button labeled "Save," for example, the button can be programmed to change its icon to an animated spinner and update its label to "Saving…" This transformation clearly indicates that the user's request has been received and is being processed.

Building the Animation

Creating a loading animation in Power Apps involves several steps. First, developers need to enable modern controls and themes in Power Apps Studio settings. Once this is done, they can add the new modern button to their screen, assign it a descriptive name, label, and icon. The next step involves adding a Timer control, which is crucial for animating the icon. The Timer control should be set to repeat automatically, allowing the animation to continue running until the operation is complete. Developers can adjust the duration property to control the speed of the animation.

Implementing the Animation Logic

To implement the animation logic, a context variable is created to track the rotation angle of the icon. This variable is updated each time the timer completes its cycle, creating the spinning effect. The button's OnSelect property is used to initiate the operation, setting a variable to indicate that the process has started. Once the operation is complete, the variable is reset, returning the button to its original state. This logic ensures that the animation only runs while the operation is in progress, providing clear feedback to users.

Practical Applications and Scenarios

Loading animations can be particularly useful in scenarios where users are required to wait for operations to complete. For instance, when performing bulk updates or exporting data to Excel using a flow, the animated button can keep users informed about the progress. By disabling the button during these operations, developers can prevent users from initiating multiple requests, reducing the risk of errors. Additionally, sharing the animated button with other makers or users can help maintain consistency across different applications and improve overall UX.

Challenges and Considerations

While loading animations enhance UX, developers must consider potential challenges and tradeoffs. For example, ensuring that the animation does not negatively impact performance is crucial. Developers should also be mindful of accessibility, ensuring that users with screen readers are not affected by hidden controls. Setting the Visible property of the Timer control to false can help address this issue. Furthermore, choosing the right icon and animation speed is important to maintain a balance between functionality and aesthetics.

Conclusion

Incorporating loading animations into Power Apps using the Modern Button control is a simple yet effective way to enhance user experience. By providing clear feedback about ongoing operations, these animations improve the usability of applications and reduce user frustration. Reza Dorrani's tutorial offers valuable insights into implementing these animations, making it accessible for developers looking to elevate their Power Apps projects. As Power Apps continues to evolve, features like these will play a crucial role in creating intuitive and engaging applications.

Power Apps - Master Power Apps: Craft Eye-Catching Loading Animations in Modern Buttons!

Keywords

Loading Animations Power Apps Modern Button Create How to Guide Tutorial Design Tips