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
Table of Contents
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.
- Icon1 – I’m using the phone icon but you could use any other icon that you like.
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.
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.
Setting the Icon Locations
The X property of my icon is set to a variable XIcon
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.
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.
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 ?
You will need the timer to autorestart as well and make sure that the duration is short enough. something like 50 or 100 is good for that.
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);
Sounds good