Input fields setup for both data display and update

Wanted to share how to improve the UX by having input fields with a dual function: fetch and display data as well as update that data.
(pardon my non tech language here, please feel free to suggest edits/fixes to make it as understandable as possible).

I’ll assume you already have data resources setup and will take it from the page and data variables setup.

Create a data variable that fetches (GET) the data from your resource.

Create a data var that will update the data in your resource with the text you type in to the field.

Now, in normal circumstances, your input field value should be bound to a data variable that acts as either a GET or a PATCH (UPDATE) on your resource, but not both functions at the same time.
To have that field do both functions, we need a variable that will act as a “data placeholder” that can be read and written using the function we want the field to accomplish as we interact with that field.

Create a page variable as an object and add the properties you will want to GET and UPDATE from the input fields. Make sure their types match the types you’ve set up in the data resource.

Back in the composer, we therefore bind the value of the input field to the matching property of the page variable we’ve just created.

I’m setting up the address input field, so I go get the address property in the page var.

Now your field is bound to that “placeholder page variable” that can serve to GET and UPDATE data.

When loading the page, we want the data fetched by the GET data variable to feed the page variable we’ve created since this is the variable that the input field is bound to and that it will need to get data from.
So we set page variable to the values of the GET data var.

Bind each property of the page var to the values stored in the data variable.

But data may take some time to go from the page variable to your page var, in that case, you may end up with an empty page (empty input fields), because the page var is still empty.
So we introduce an IF condition to verify whether we are ready to update the page var with the values of the data var or wait until data can be populated.

Create a TRUE/FALSE page var (mine: updateData).

Then back to the data var, we add a logic flow after the data var where we ask if Yes (true) or No (false) the data from data variable has arrived. Set page var bound to updateData. And assign a true/false answer to its value with the formula
BOOLEAN(data.THE_VALUE-PROPERTY_OF_YOUR_DATAVAR_YOU_WANT_TO_CHECK)
So with Boolean, we’re checking if the value property exists (true) or not (false).

The IF condition will read the true or false response from the page var and trigger the next step

If response is true, the data from data var has been fetched and can be stored in the page var we’ve created at the beginning, with a Set page var function:
image

Now you guessed it, we need to assign the data var property values to the property values of the page var:

If the response returns false, the data from data var has nt been fetched yet (slow connection, many data sets to retrieve…) then we create a loop on the condition so it checks again until data is finally retrieved.
image

So when the page loads, the page var value which act as a “placeholder” is set to the values of the data var. Data in the page var is read and displayed in the input field.
That same page var can be written with updated data. This happens when you type in new text in the input field.

Then we need to record this new text with a button.
Add a button and open its logic canvas. Add the Update record flow function and link it to the data resource you want to update.

Insert a Set data variable between component tap and Update record so that Update record can read the data variable values.


The Set data var has “adopted” the schema of the “update” data variable when we bound them (see second data var we’ve created at the beginning).

We want that data variable to have the text we typed in the input field. Since the field is bound to the page var, the page var holds that text. So let’s bind the right property of that data var to the value of the page var property we are interested in.
Click on custom object in the property panel of the Set data variable and you will see the schema of the variable.

Select Data & Variables, then page variables since the data we need to retrieve is there and then:

After you save, you will see how the property value of that data variable is bound to the value of the page variable which holds the text we’re updating.

Last, in the record binding, I chose to use the SET_KEY for my own purpose but your binding here may differ, depends on how you update your records in the database. I use:
SET_KEY(OBJECT_TO_UPDATE, "FIELD_NAME", VALUE_OF_YOUR_DATA_VAR) where VALUE is the value property (eg: address1) of the data variable we’ve just inserted. In my case the value is address1, it is fetched from the page variable which is bound to my input field.

And voila a two-way input field setup. Let me know if anything is not clear, both from a technical vocabulary standpoint and from a newbie standpoint.

3 Likes

Oh yes, right on time! I’m gonna try this, thanks for sharing.

2 Likes

Hi Fred, good stuff! it does work really well and it was just what I needed. Thanks a lot.
I used a data variable that loads with a page parameter as a variation to your set up:

The only thing that I did not manage to get to work was the IF function with the Boolean, but as a quick & dirty solution I set a delay of 1000 ms. The IF function made the Appgyver Preview app on my phone freeze.

Thanks again Fred, you’ve helped me tremendously.

1 Like

Glad it helped.
The delay was my original cheat but as @Vili explained, your page will not have time to load data if the internet connection is slow.
I did have the freeze issue too but managed to fix it with the IF.
So here is a brief again:

Create a true/false page variable with false by default.

In your page’s main canvas (click any grey area that is not a component), paste (Ctrl V) the Get record+Set Data Var flow functions that currently live in your data variable canvas (remove these flows with Ctrl X):

So your data variable canvas is now empty (you did a Ctrl X on the get record and data var that lived there):

Kudos to @Mihaly_Toth for this tip :point_up_2:

Back in your page canvas, make sure the data var still has the right bindings, the same as when this flow function lived under the data var canvas:

Add a Set page variable which is named after the true/false page var you created earlier.

The value assigned to Set page var should be true or false so use BOOLEAN(data.getProvider.id)
where you check whether or not your data variable has received data: data.getProvider.id is one of the property of your data variable (for me, it’s ID but it could be any property in your data var).

That Set page variable will return true if there is data received, and false if data not received yet.
The IF flow reads the response from the true/false page variable and triggers one of the two outputs.

If false, we have the loop back to the Set page var flow function.
If true, we can Set a page variable named after the page var you created and bound to your input fields:

And of course you assign the data variable values to this Set page var’s properties:

Hi,

Just a clarification here - the IF loop that freezes the app needs a Delay node if it’s false, otherwise it never gives a chance for the data to actually come through. The delay doesn’t need to be long, say, 50ms should be enough.

1 Like

Thanks for the tip. So like this:

Yes, that should help.

1 Like

Hello Fred-
Great tutorial!
Somewhat involved but something that I’m interested in since the app I’m working on will have a few views where using the same form for input / update will be needed. My other option is to have a separate view that basically displays the updates or outputs.

If I may ask, could you post the working app view(s) or a sample of the app so as to get a better picture?

Thanks
MANO

Ola,
Sorry I don’t understand your question :grimacing:

@MANO_Nogueira, there is a simple way to use input fields to both display current data and permit changes to that data IF YOU ARE NOT CONCERNED ABOUT MULTIPLE SIMULTANEOUS CHANGES BY DIFFERENT USERS.

I am new to Appgyver and struggled with this as well. I found a simple solution for me. The problem with binding the data variable to the input fields is that, by default, they update every 5 seconds (you can change this, of course). So, if you input data, it will get overwritten in 5 seconds! Bummer! I was mystified by this until it dawned on me what was happening.

The simple solution is this:

(1) Download your data
(2) Create a page (or app) variable to hold your data.
(3) Save the downloaded data to your page variable. Now your page variable holds the existing data BUT IT WILL NOT BE OVERWRITTEN with every data refresh.
(4) bind the page variable(s) to the input field(s)
(5) make whatever changes you want to make in the input fields
(6) Use the HTTP Request data flow node to manually update the database using the data contained in the page variable.

Bingo, you are done.

That’s the way I do it. But, I am not concerned about multiple simultaneous updates. That is important.

1 Like

Hi Randall-
Thanks for your excellent reply. I’m going to try it and see if I can get it to work for me and will let you know. In my app I have a number of input forms each with about a dozen lines so it would be awesome to get it work.

Best regards
MANO