Clearing components in UI Builder

[Steve Stivers1]

I am working in Utah UI Builder. I have a page with a textarea component and a select component. I would like to clear these components after my submit button is pressed and the data entered has been used. This will allow the user to then fill them again and repeat.

How can these components be cleared?

[Barrilito van D]

Hi. Create a script that clears the fields. And use the event  on the click event of the button to call that script so the fields get emptied.

If you think my answer put you in the right direction or you appreciated my effort, please mark the response as Helpful or mark my response as Correct.
Thanks in advance! Good luck!

[thomaskennedy]

I haven't used UI Builder in a few months and I'm starting to forget, so bear with me:

I'm going to assume the existing event handler for your button runs some Client Script. If the textarea and and the select have their values bound to client state variables, you could add a couple more lines:

api.setState("textareaVariable", "");
api.setState("selectVariable", "");

Do not add a second event handler to your button, as their run order is undefined.

I have not found a way to set the value of the textarea etc directly, and I believe that would be counter to UI Builder's way of doing things. I think you will find it best to bind these controls to client state variables and use event handlers, api calls et to set the variable, not the control.

If you have a list you need refreshed - for example if you just added those values as a row in an embedded list - set up a client state variable of type JSON and populate it like so:

api.setState("listRefresh", {"timestamp":Date.now()});

You can refer to this variable in the Refresh requested property of your list control. When the property changes, the list refreshes. According to my understanding, the actual date value doesn't matter, only that the property value (a JSON string) changed. The use of date.now() makes sure it does change. That worked fine last time I tried it a couple releases ago.

[Steve Stivers1]

Thanks.

Using a client state parameter in the value of the textarea then clearing that parameter is working to empty out the textarea.

However I have not found a way to do it with the select component. There is a selected item field but so far I have not been able to change anything with it. Refreshing the data resource that provides the items for the list does not clear the current selection either.

[thomaskennedy]

Can you show me what you have in place to define a client state variable for the list, and bind the select component to that variable? Does this actually work? When that's working we can look at updating the variable.

Another thing to do is use the page's onLoad to fire an event, and use that event to run a client script that peeks at the value of the select component. This gives you an idea what your client state variable needs to look like.