Power Apps Counter

Custom Component: Counter Animation

0 Shares
0
0
0

This component brings a little joy and visual improvements to your apps. It automatically animates the desired number:

When adding the component, you can set the desired number to count up to, the speed until that number is reached, a trigger (when should it start counting), and some formatting. If you need to troubleshoot, there is also a button for that.

Important: Since this component is using timers, the counter only works in preview, not in the editor!

How to configure

  1. The speed in milliseconds until the desired number is counted up to. 1500 = 1.5seconds
  2. The desired number to show. You can use values like CountRows(<data source>)
  3. A variable when the animation should start to count. E.g. gblStartAnimation (you could set Set(gblStartAnimation,true) on the Screen.OnVisible). Before setting the variable, it’s a good practice to Reset the component. E.g. 
    Reset(<component name>);
    Set(gblStartAnimation,true)
  4. If you ever need to troubleshoot or would just like to see the animation again, simply set this to true and click the button (not in preview). Then, trigger the start variable again
  5. Some basic formatting options
properties-explained.png

I kept the component very simple so you can adjust & customize the result however you like. The icons and labels below are not part of it. 

Where to use it

Basically everywhere you need to display numbers, such as

  • Reports 
  • simple informational content
  • CountRows
  • …you get the idea…

Here is another example of a design:

counterAnimation2.gif

I hope you’ll enjoy this little component and if you do, please consider sharing it.

If you have any questions or would just like to get in touch, just leave a comment or hit me up on social media.

0 Shares
You May Also Like
styles in a sharepoint list

Power AppsPower Apps Style Guide: 3 Great Ways To Consistently Brand Your Apps

By saving in a data source like SharePoint and then connect it with Power Apps, you can easily have a centralized style library. This ensures that all your apps look consistent and you don't have to go through the hassle and change every element, once you decided to change your primaryAccent color. It makes sense to take your time to sit down, think of the way you'd like your styles to be structured and stay with that through all your app-creations.
Read More
Power Apps Screen in MS Teams

Power AppsPower Apps: Link To Specific Screens & Items in MS Teams

Now with the renaming of Common Data Service to Dataverse and the launch of Dataverse for MS Teams you might be wondering how to create a Power Apps link to specific screens or even to a specific item in your app. The use of parameters for Power Apps has been around for a while now, but when it comes to MS Teams this gets a little more complicated. In this blog post, we're going to check how we can still leverage deep links to Power Apps within MS Teams.
Read More