Clear button for Power Apps text input controls

Hello and welcome to my blog.

In this blog I will discuss rather simple but a very common requirement. How to show clear button for you text input controls? Especially when you are building search text boxes.

Clear button for search text input power apps canvas apps
Let’s see few options we have.

The first option is available out of the box. And trust me, many miss this property which is available in text input controls in Power Apps canvas apps.

Text input controls have a property ‘Clear Button‘ which you need to enable to show the cross icon.

Clear button for search text input power apps canvas apps

Once you enable this, whenever you type in any text in your input control, the clear button shall appear and then it would go away automatically when no content is there in the text box.

That’s great and in most of the implementations, you don’t need to take a step further. But there is a limitation to this. The clear button is not customizable. If you want to have a custom clear button, continue reading.

The first step is to disable the out of the box clear button. You now already know the property ‘Clear Button’. Turn it off.

I add an image control to the app and the first thing to align it properly in the textbox. Below are the property settings of the image control to align it correctly.

Height

Clear button for search text input power apps canvas apps

Width

Clear button for search text input power apps canvas apps

X

Clear button for search text input power apps canvas apps

Y

Clear button for search text input power apps canvas apps

And this is how it looks after aligning it. Not the best of images, but works nonetheless.

Clear button for search text input power apps canvas apps

Alignment is done. The next thing is to implement the functionality. The first functionality is to clear the text input on click of the Search box.

On Select of the image, I reset the Text input control. Make sure the Default property of the text input control is empty. Otherwise it shall start showing the default text post reset.

Clear button for search text input power apps canvas apps

The next step is to control the visibility of the search image. Below is the formula for the Visible property of the image.

Clear button for search text input power apps canvas apps

And below is the final behavior.

Hope this helped. You will also like the below posts.

Debajit Dutta
Business Solutions MVP


Discover more from Debajit's Power Apps & Dynamics 365 Blog

Subscribe to get the latest posts sent to your email.

Discover more from Debajit's Power Apps & Dynamics 365 Blog

Subscribe now to keep reading and get access to the full archive.

Continue reading