Stage 5 - Displaying the saved data (guestbook)

Date: Dec 18, 2016

Displaying a List of Records

When we press Save, if everything works OK, we get back to the Visitors page, which is still empty. We would like to use it to display our guestbook (the list of visitors).

Zoom back to Visitors, and then zoom into Content.

Zoom into List and rename List Item 1 to Item.

Item is a repetitive element (because the list will contain multiple visitor items). An element can be made repetitive by right clicking it and checking Repetitive.

Zoom back to List and add an action that will populate the list with the details of all visitors currently stored in the browser's local storage:

Add to List an action container (Action from the Basic section of the palette). Name it Init List.

Add to Init List an action Get Visitor List, which is the opposite of Save Visitor List from the previous stage (reuse the constant "Visitor List" from there):

Add to Init List an ancestor reference to the Visitors page.

Also add a copy of VisitorList (Copy from the Visitors page, and then Paste (Reuse) inside Init List).

Create alows from the exit of Get Visitor List to Visitor List, and from there to Visitors/Visitor List. This will initiate the list in memory to the list we retrieve from the browser's local storage.

Add to Init List an action Create Visitor Item. Make it repetitive (it will be invoked for each record we retrieve).

Add to Create Visitor Item a trigger (name it Visitor Record), and an exit (name it Visitor Item).

Create a flow from Visitor List/Visitor to the trigger of Create Visitor Item.

Create a flow from the exit of Create Visitor Item to Visitors/Content/List/Item (each time Create Visitor Item is invoked, its output item is added to the list):

Model Create Visitor Item:

Zoom into Create Visitor Item.

In the Repository Explorer (on the left side of the Studio screen), select Guestbook/Visitors/Header/New/New Visitor/Header/Save/Visitor (the data structure) and drag it into Create Visitor Item. Create a flow to it from the trigger of Create Visitor Item.

Similarly, drag from the repository Guestbook/Visitors/Content/List/Item/Item, and create a flow from it to the exit of Create Visitor Item.

Copy data fields from Visitor to Item:

Create a flow from Visitor/Name to Item/Details/Title/<Value>.

Create a flow from Visitor/Title to Item/Details/Description/<Value>.

Create a flow from Visitor/Picture to Item/Thumbnail/<SRC>:

Save your changes and return to the browser. When the application reloads, you can see the details of the saved visitors:

Refreshing the List after Save

If you now add another visitor, you won't see it in the list unless you refresh the browser.

To make any new visitor appear once it is saved, we'll need to refresh the list immediately upon saving: