Vibrating icons

Last week I got a strange question about how to make vibrating icons. So this post is to show you how to make icons vibrate so that you can point them in the right direction.

Icons in Power Apps

Icons have X and Y locations to make my icon vibrate. In this post I will adjust the X only but of course if you wanted to vibrate your icons by adjusting the Y then that would be fairly similar.

I’m creating an app that has the following controls added to a screen.

  1. Icon1 – I’m using the phone icon but you could use any other icon that you like.
Create vibrating icons in Power Apps Microsoft Office 365 image 16

2. Timer1 – The timer will adjust the location of my icon.

3. Button1 – This control will start my phone ringing when it has been pressed.

So the general idea of this example app is that when i press the ring button the phone icon will start vibrating for a specified amount of time.

App start up

In my App Onstart I’m using the following code to set a variable. This makes sure that my phone doesn’t immediately start rining when I run my app.

Set(varRinging, false)

Then the Autostart property of my timer is set to varRinging. This means that my timer will start running when the button is pressed. Potentially you could do this by getting the user to press the timer button directly, but personally I like to separate my timer code from my button code.

Create vibrating icons in Power Apps Microsoft Office 365 image 18

Configuring the ring button

The ring button, now just needs to lines of code.

  Set(varRinging,!varRinging);
  Set(varTimesToRing,0);

The first line will enable the timer and therefor the phone ringing. The second line controls how long my phone rings for.

Create vibrating icons in Power Apps Microsoft Office 365 image 19

Setting the Icon Locations

The X property of my icon is set to a variable XIcon

Create vibrating icons in Power Apps Microsoft Office 365 image 17

Finishing the vibrating icon

Now the final part of the vibrating icon code sits within the timer.

If( XIcon = 202, Set(XIcon,200), Set(XIcon,202));
Set(varTimesToRing, varTimesToRing+1)

The first part of the code will switch the value of the icon location between 200 and 202. This will give the vibrating effect for the icon. The second line counts the vibrations so that the phone stops ringing after a while.

vibrating icon

Then one final step is to set the duration of the timer to 100. If you want the icon to vibrate faster/slower or longer/shorter just adjust the numbers used in this post.

Avatar for Pieter Veenstra

By Pieter Veenstra

Business Applications and Office Apps & Services Microsoft MVP working as a Microsoft Productivity Principal Consultant at HybrIT Services. You can contact me using contact@veenstra.me.uk.

4 thoughts on “Create vibrating icons in Power Apps”
  1. Good neat trick Pieter. I tried this out, but seems like only the icon moves position once at the start of the timer. It is not vibrating basically. Am i missing something or should we need to find update the XIcon on timer value change instead of On Start prop ?

  2. I made two additions to make it work.
    – Added this code to the OnTimerEnd property of the Timer: If(varTimesToRing=10, Set(varRinging, false))
    – Added this code to the Repeat property of the Timer: varRinging

    Furthermore I added this line to the formula in the App Onstart, which makes the icon initially also position well:
    Set(XIcon, 200);

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.