Tersus: Stage 5 - Displaying the saved data (guestbook)

Stage 5 - Displaying the saved data (guestbook)Date: Jan 10, 2024Displaying a List of RecordsWhen 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 Visitor List (Copy from the Visitors page, and then Paste (Reuse) inside Init List).
Create 2 flows: 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:

Zoom to Visitors/Header/New/<On Click>/New Visitor/Header/Save/<On Click>.
Add an action Refresh List. Add to it a Control trigger (through Add Element), and create a flow to it from the exit of Save Visitor Record.
Zoom into Refresh List and add an ancestor reference to Visitors.
Add Refresh from the Display Actions section of the palette.
Create a flow from Visitors/Content/List to the trigger of Refresh:

If you now save your changes and return to the browser, any save of a visitor will cause a full refresh of the list.

Download model: Stage 5Additional EnhancementsTo make the application useful, you would probably want to enhance the application further:

Display the company name as well as the title (probably together as a single text field).

Add the ability to edit the details of a visitor.

Add the ability to delete a visitor from the list.

Save the visitor lists in a database (and not only in the browser's local storage).

Add paging and search (will become important once you have many visitors in your guest book).

...