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.
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.
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
Width
X
Y
And this is how it looks after aligning it. Not the best of images, but works nonetheless.
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.
The next step is to control the visibility of the search image. Below is the formula for the Visible property of the image.
And below is the final behavior.
Hope this helped. You will also like the below posts.
Debajit Dutta
Business Solutions MVP