Disable Live Updates & Only Update Row Only Upon Click

HI! I have some questions on updating rows from a screen. The gist is I'd like to build an Edit & Save feature.

As an example, I have a very simple "Customer Details" table, which is displayed on a "Customer Details" screen.

When people navigate into this screen, the details cannot be edited. Upon clicking the "Edit" button, all the details become editable.

(I made the fields editable by (1) Creating an "$Editing" boolean variable, triggered by the Edit button (2) And creating two copies of each of the data cells, one version is editable and one version is read-only. Each version's visibility is tied to the $Editing variable. So when the Edit button is clicked, the read-only version disappears and the editable version appears. Got the idea from another discussion!).

The problem I have is:
(1) When the fields are editable, the edits are being made live to the underlying row. Due to various reasons, I don't want the changes to be made live. Instead, I want the edits to only update upon clicking a "Save" button. Is there a way to disable the live editing? Or must I create an automation instead with a separate save button? What's the best way to do this?

(2) After the "edit" button is clicked, I'd like the text on that button to change to "Save" - (2a) is there a way to use a variable as the text on a button? (2b) can I then create automations for that button, conditional on what the word is on the button? (e.g. When the button reads "Edit", clicking leads to an automation for editing the cells. When the button reads "Save", clicking leads to an automation to update the rows.)

Thank you!

Hi @Lillian, thanks for posting here!

I understand what you'd like to do, and I can help you set it up. :slight_smile:

To achieve this, you'll want to make the data on the "Customer Detail" screen uneditable, and your "Edit" button should navigate to a new screen that allows updates for the data in editable input fields. In that new screen, the changes will not overwrite the existing data until the user clicks a "Save" button.

I created an app for you that demonstrates this:

I have a "Contacts Detail" screen with fields that display the info, but are not editable. There is an edit button, which when clicked, will take you to a new screen to update the info.

This is the next screen to update the info. I've passed in data from the previous screen and made the fields editable. These are just input field variables, so the changes made here will not update the original row until the user clicks on the "Save Changes" button.

These are the steps to set it up:

First, create an additional screen that will be used to update the contact info. On this screen, add data cells for Name, Phone, and Email (that are all set to variable and are editable) and "Save Changes" and "Cancel" buttons. You also need to have a data cell to pass in the row information, which I've placed at the top and named "RowToUpdate":

For the properties in the variables, make them editable and variables.

You can make the block or content box with the RowToUpdate value not visible, since that's just there to allow you to store the data.

Now, on your "Contact Details" screen, click on the "Edit" button and click on the "actions" tab in the properties. For the action, click on the "Navigate to New Screen" option and from the drop-down, select the name of your new screen you made to update your contact:

In that same action, click on the +Set Variables icon, and you will want to pass in the following values. The first passes in the row data (which I did based on the name for this case), and the next three pass in the three data values from the input row (name, phone, email data):

Now when you click on that "Edit Info" button in the app, it will navigate to the new screen passing in those values. These values will be editable on the screen. :slight_smile:

For the "Save Changes" button on your "Update Info" screen, click on the properties and action tab. You will want to add an automation with an Overwrite action that updates the data for the desired row:

Screen Shot 2020-08-27 at 12.15.59 PM
Screen Shot 2020-08-27 at 12.16.06 PM

And then add one more action that navigates to the previous screen.
Screen Shot 2020-08-27 at 12.16.13 PM

For your "Cancel" button, you would only need to add that navigate to previous screen button.

With all of the above set up, you now have an app where you can edit contact details on a new screen, that won't save any changes until the "Save" button is clicked. :slight_smile:

Screenshot showing editing the details:

And the new changes are saved, after clicking the "Save Changes" button:

Hope this is helpful! :honeybee: :slightly_smiling_face:

1 Like

Thanks @Alyssa, this is very helpful!

I wanted to test out both the way you described and the other method I had described above (with the $EditMode variable). I wanted to test the latter method, because it doesn't require creating a separate Edit screen.

In this method, though, I ran into what seems like a bug that I was hoping to get your help on. Here's how this method is built.

For each field in the table, I set up two duplicate data cells - one is editable and one is read-only. Each cell's visibility is tied to an $EditMode boolean variable (e.g. When $EditMode is TRUE, we see the editable cell. when $EditMode is FALSE, we see the read-only cell.) $EditMode defauls to FALSE when users enter the screen. However, if they click the "Edit" button, the button sets $EditMode to TRUE. The editable cell is set as a variable, as you have suggested.

After the user clicks "Edit" makes the changes, they click "Save Changes", which triggers an automation to update the relevant row with data from the editable cells. It then sets $EditMode to FALSE, so now we have exited edit mode and can only see the read-only cells.

In testing, the data is properly updated in the tables and the user interface works well! However, when I navigate to a different row, and choose to edit that row, the editable data fields are now incorrectly populated with data from the previously edited row instead. The video here shows the situation (sorry, used phone to record): https://drive.google.com/file/d/1X5txNUJo5tPzFoMh-FOEzOE3xOi4yYfA/view?usp=sharing

I've tested this in multiple scenarios and it still keeps happening. The only way this problem disappears is if I completely refresh the page. How can I fix this? Is this a bug?

Thank you!

HI @Lillian, in your Edit button, try updating the current screen variables of CustomerNameEdit, CustomerPhoneEdit, and CustomerEmailEdit to =[CustomerName], =[CustomerPhone], and =[CustomerEmail] respectively (or whatever your actual column names are).

That way every time you click/press Edit, it will wipe out the previous variable values and set them in correspondence with whatever the selected picklist item is.

Hi @aj thanks, that works! Great idea!

Any idea what was causing the previous problem so we can avoid it/watch out for it going forward?

(I also saw your pre-edited response, and tested having the Save button set CustomerName to "". When I tested that, the problem persisted. The next entry would show up as "")

Hi @Lillian,

I'm happy the method I gave and also @aj 's tip helped! :slight_smile:

And to answer your question of why that was occurring, it is because the input values you enter in the input fields still exist on the screen as is, until they are updated.

In the method I gave, clicking the "Save" button would navigate you away from the "Update Info" screen back to the "Details" screen (and my "Edit" button passes in the whole row to edit in the new "Update Info" screen each time).

Since in your method you stay on the same screen, the values you entered for those input variables will remain unless they are updated to either be blank or have the new desired input data. Which in your case, the new desired data would be the info of the selected customer to update from the picklist (which AJ helped you point the variable values to).

I hope that helps clarify! Let us know if you have any other questions around this. :honeybee:

1 Like