Input Field Erase

Hi, can anyone help me erasing the content of the input field after a button is clicked?

The key is to have a page variable linked to the input field. Then on the component tap event for the button, use a Set Page Variable flow function and set the page variable (same as the one linked to the input field) to an empty value. Since two-way binding (page variable to input field) is used, when you set the variable to be empty it will reflect that change on the input field.

3 Likes

Thank you Steve. I got the idea, but I seem to be stuck on some other related problem.

The button I press is within an isolation mode composite component, as well as the input field, but somehow, the pageVar I created and configured as two way binding is not showing up when I select “Set Page Variable”.

The only option available for me on the set page variable flow function is to create a formula, but the pageVar I created also do not appear on the formula editor.

Any clues? Am I missing some restrictions on how to work with isolation mode functions?

1 Like

I haven’t done anything with the composite components yet. I took a quick look and it looks like you might have to choose to share properties and events (maybe page variables as well?).

It might be worth trying to get it to work without the composite approach to see if everything functions. Then maybe turning the container with input field and button into a composite will get you what you want?

1 Like

It is working perfectly without the composite components.

Will take a deeper look at the documentation to see if I can find additional guidance but so far the tool is looking incredible.

I`ll make sure to post the solution once found :slight_smile:

That sounds great. Looking forward to hear what you find

The issue here is that you should not be able to access page/data/app vars inside a composite component, but we’re only blocking that half way. At the same time, there’s a lot of powerful features coming up with components v2 support soon that enable a lot of advanced use cases. But in general, a composite component should only communicate to the outside world through its root properties and events; anything else is wrong (as it will also make the component non-reusable if its functionality depends e.g. on specific page variables being present).

Understood the concept involved here. I believe that documentation mentions that stating that I should use event_in and event_out to respond to clicks on a button inside a composite button. Will try that approach to see if it works since I am only trying to erase an input field when the button is clicked inside the composite.

So let’s say your composite component has a root level Input field value property that’s bound to the actual input primitive’s Value field. Changes propagate both ways, so if I bind a page variable to the composite’s Input field value, and change the page variable, it sets the Input field value, which then causes the binding to trigger the primitive’s Value to change. Similarly, if I change the Value of the primitive by typing into it, the changes propagate Value > Input field value > page variable.

This two-way binding mechanism means that if you use the Set component property flow function inside the composite component to reset either the input primitive’s Value or composite root Input field value to an empty string / null, the change will propagate and affect whatever’s bound to the composite instance as well as affecting the composite internals, including what’s rendered in the input field by the native code.

Hey Steve and Harri, just completed the work on composite components interaction logic and it worked like a charm.

I have made a quick guide on how to do it. Not sure if it is clear enough. Appreciate feedback.

Creating Logic from Isolation Mode Components.docx (899.2 KB)

2 Likes

Great tutorial, that’s exactly how to do it!

Alternatively, instead of a top level event, if you always want your button to clear whatever’s in the input field, you can in step 7 drag a Set component property node in, and set the composite root property Value to e.g. null formula, which will then cause the two-way bindings to trigger and set also the bound page variable to null.

1 Like