Author Details

avatar-teacher

Evolvous

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

How to Make an Animated Search Field in PowerApps

In this blog Animated Search Field in PowerApps, we will discuss how we can add animation to a text input field. Mostly no other text input field requires animation, but we can use this with the search input field so that our app looks better.

The search input is a very essential field that we often use in our app to search items. Imagine, if we can design it to something like — when we click the search icon it will open an input field with animation and close it with the same animation. Interesting, isn’t it? Check out the below image and following, and learn how we can achieve that.

 PowerApps - Evolvous

In the App Component
OnStart = UpdateContext({varOnStart,true})
This variable is exclusively for scenarios when the app loads. We want the search field to be hidden and only show when the user clicks on the search icon. You will see its use later on other controls.

Next, we will add a text input field, a timer, a search icon, and a cancel icon just like the picture above.

For Search Icon:
OnSelect = Reset(Timer1);Set(varStart,false);Set(varStart,true);Set(varExpand, true);Set(onStart,false)

How can I add animation to my power Apps

This will reset the timer. It will also set the varStart variable’s value to true so that we can use that to trigger our timer control and sets the varExpand variable’s value to true which indicates that the search field is now open.

For Cancel Icon:
OnSelect = Reset(TextInput1);Reset(Timer1);Set(varStart, false );Set(varStart, true); Set(varExpand, false )

 Animated Search Field in PowerApps - Evolvous

This function will reset the search field and start the timer to close the search field.

For Timer:
Start = varStart

How to Make an Animated Search Field in PowerApps

Duration = 300

How to Make an Animated Search Field in PowerApps

The duration is in milliseconds it’s better to set between 300 to 1000. The animation will be dependent on the duration you choose. Higher the duration slower the animation and vice versa.

Search Input Field:
Width = If(varExpand, (320*Timer1.Value)/Timer1.Duration,320-320*If(onStart,1, Timer1.Value/Timer1.Duration))
This function will expand and collapse the text input field according to the above condition and we continue using the onStart variable to keep the search field hidden until the user clicks on the search icon .

*Note: The above 320 is the maximum width of the search field. You can add your own maximum width value.

Now all the primary values are set so what we want is that if the user clicks on the search icon it will hide it and show the cancel icon and vice versa.
You can use the varExpand variable to hide the search and cancel icon accordingly.
Search icon: Visible = !varExpand
Cancel icon: Visible = varExpand
You can also hide the timer by setting its visible property to false.

Well, this is the end of this post. This is an optional trick to make your app looks better. Let me know if you have any queries or suggestions in the comment below. I will see you next time, till then Happy coding!

See our Power Platform Services

=====

Read more

Power Apps-Component Library