Saving to Local Storage Fails

Hi, I’ve looked at the 2 tutorials (the ToDo app and the Movie review app) and I am trying to build a simple Contacts app using the Local Storage. I’ve created 2 pages, one shows a list of Contacts (Name & phone #) and an Add Contact button, the other is supposed to show the selected contact or the blank form to add the new contact. This page has a Save and Cancel button.

I’ve encountered a number of issues but the first one I want to sort out is how to add a new record.My page has 3 fields visible and bound to Contacts.Name, Contacts.Mobile and Contacts.Email. The local data also has an ID field that is a UUID.

If I drop a Create New Record in the logic and bind it to the Tap Event of the Save button and follow that with an alert for success and one for failure, I always get failure. I believe it fails because there is no ID value. So I tried to add in a Set Data Variable step before the create new record and set the Contacts.ID to GENERATE_UUID(). This seems to let it get saved but the name, mobile and email address do not get saved.

I’m sure this is supposed to be dead simple and I am probably over complicating it. Can anyone help me out?

Set data variable sets the whole data variable to the new value, which is a bit inconvenient if you just want to update a single field. We’re in the process of making this more sane by having separate update/set functions for all variable types, so it’s clear that you’re updating a single field vs. setting the whole thing.

So what’s happening is you are essentially setting the whole data variable object to a new object that’s just {id: "generated_id_here"}.

In the meantime, to update a single field, you can use SET_KEY(data.myDataVar, "id", GENERATE_UUID()) to set the data variable value to itself + ID key updated to the generated ID (see for docs).

Alternatively, you can use Create record so that you don’t pass it the whole data variable value, but choose static object binding type, then bind ID field to GENERATE_UUID() and the other fields to their respective data variable fields.

Thanks. I understand your explanation of setting the data variable overwrites the entire thing.

Let’s see if you can help me get the logic correct:

  1. I’ve got a page which displays a button to Add a Contact.
  2. The button’s tap event opens the Add Contact page. So far so good.
  3. On the Add Contact page I have a data variable which is set to the resource “Contacts”. What should the logic here do? I have Page Mounted to Create Data Record. Is that all I need? Or do I need to do a Set Data Variable?
  4. Once the user has input the data they press a Save button which has the Tap Event set to Update Record and then an alert for success and one for failure. I always get the failure alert.

On the Add Contact page, the data variable should be of the “New” type; which initializes an empty data variable that you can then subsequently save to the backend (you can see the init logic if you select the data variable and open the logic canvas from the bottom of the screen).

Then, you simply set Create record node to your save button, and set its payload to SET_KEY(data.myDataVarName, "id", GENERATE_UUID().

Alternatively, you can initialize the empty data variable on page mount already with the ID, so you can then just save it without the formula.

To clarify, the data flow functions talk to the backend (or “local backend” in the case of the client-side storage), fetching data from there to use in app context, or taking data already available in app context (such as contact info inputted by the user) and sending it to the backend. Data variables are simply page variables that take their schema from the connected data resource, and include default logic to populate themselves.

Thanks, just to clarify what worked for me, in my Create Record
node I set the resource name to Contacts and the Record Properties
I set to a formula: SET_KEY(data.Contacts, “id”, GENERATE_UUID()).

This seems to be doing the job reliably.

1 Like