Tersus: Stage 4 - Saving visitor details and picture

Stage 4 - Saving visitor details and pictureDate: Jan 10, 2024Using Web StorageOur application is a standalone application, which saves data locally on the phone (read here on the more robust alternative of client-server applications).To save data on the phone we'll use HTML5's local storage of the browser (see http://www.w3schools.com/html/html5_webstorage.asp).Defining Data Structures

Zoom back into <Mobile View>/Visitors/Header/New/<On Click>/New Visitor/Header.

Rename Button to Save, then zoom into Save/<On Click>.

Add to <On Click> an action container (select Action from the Basic section of the palette). Name it Create Record.

Zoom into Create Record and model the creation of a data structure containing the visitor's details and picture:

Add an ancestor reference to the New Visitor dialog (right click inside Create Record and select Add Ancestor Reference -> New Visitor).
Also add to Create Record a data structure (select Data Structure from the Data Types section of the palette). Name it Visitor.
Add to Visitor 4 elements:
- Add a text element Name (select Text from the Data Types section of the palette).
- Add a second text element Title.
- Add a third text element Company.
- Add a fourth text element Picture (the encoding of the picture image).
Copy the data from the dialog fields to the data structure:
- Create a flow from New Visitor/Content/Form/Name/Text Field/<Value> to Visitor/Name.
- Create a flow from New Visitor/Content/Form/Title/Text Field/<Value> to Visitor/Title.
- Create a flow from New Visitor/Content/Form/Company/Text Field/<Value> to Visitor/Company.
- Create a flow from New Visitor/Content/Form/Image/<SRC> to Visitor/Picture.
Add to Create Record an exit through which the action returns the created record:
- Select Exit (output exit ) from the palette.
- Click inside Create Record, close to the middle of its right side.
- Create a flow from Visitor to the exit you have just created.
The model of Create Record now looks like this:

Saving Data Structures

Now we need to save the record along with previously defined records:

Right click on the Visitor data structure and select Copy.
Zoom back all the way up to the Visitors Page, and add a data structure Visitor List. This data structure will hold all visitor records defined so far.
Add to Visitor List the Visitor data structure (right click on Visitor List and select Paste (Reuse)). Make Visitor repetitive (by right clicking it and checking Repetitive):
Zoom back to <Mobile View>/Visitors/Header/New/<On Click>/New Visitor/Header/Save/<On Click>.
Add an action Save Visitor Record. Add to it a trigger Record, and create a flow from the exit of Create Record () to this trigger ().
Zoom into Save Visitor Record and add an ancestor reference to the Visitors page. Create a flow from the trigger to Visitors/Visitor List/Visitor:

As things stand now, any created record is added to the visitor list, but Visitor List exists only in the application's memory. We still need to save the information in the browser's local storage:

Still in Save Visitor Record, add an action Save Visitor List with a trigger List.
Create a flow from Visitors/Visitor List to Save Visitor List/List.
Zoom into Save Visitor List. Add a constant "Visitor List" (Text from the Constants section of the palette), Create JSON (from the Miscellaneous section of the palette), and Store (from the Display Actions section of the palette). Add flows like this:
Create JSON creates a textual representation of the whole data structure Visitor List, and Store saves it in the browser's local storage (with the key "Visitor List"). This is a valid solution for a small number of records, but of course not for large lists of visitors that should be saved for the long run.

The last thing we'll do at this stage is close the New Visitor dialog (when the user presses Save, after adding the record to the visitor list, we want to close the dialog and return to the Visitors page):

Back to Save/<On Click>, add Close Window (from the Display Actions section of the palette).
Right click inside Save Visitor Record and select Add Element -> <Done> (to add an exit that will indicate when Save Visitor Record is finished).
Right click inside Close Window and select Add Element -> Control (to add a trigger to Close Window).
Create a flow from the exit of Save Visitor Record to the trigger of Close Window (this means the dialog is closed only after Save Visitor Record finishes its work):

Save your changes and return to the browser. The application will automatically reload.

Now, when you press New, enter visitor details, and press Save, the details are saved in the browser's local storage (and will be available when you launch the application again in the future).

Download model: Stage 4Stage 5 - Displaying the saved data (guestbook) See Also:

To use the full functionality of this web site, JavaScript needs to be turned on.

For best results, use the Firefox browser..

Loading ...