Transcript
Over the next few lessons, we're going to expand our data structure to encompass this concept of a diary entry.
Here’s how it’s going to work: from within the context of a trip, a user can view diary entries they may have already added and can, of course, add a new diary entry as well.
First, let's visualize what we’re doing.
We have a trip in our database, and we want to have one or more diary entries. Each of these entries will have a relationship with a single trip.
This relationship, where multiple database things are related to a single database thing, is structurally the same as what we already have between a user and a trip. All of these trips point back to a user via the creator field on the trip data type. You can see this in the app data tab.
If we amend our trips view by clicking the pencil icon and adding the created by column, we can see multiple trips tied to the same user.
We’re now doing the same conceptually for our new data type, diary entry. Each diary entry will have a trip field pointing to a particular trip.
This is a many-to-one type of data relationship: many database items connected to one single database item. This kind of relationship is foundational for features like:
showing trips created by a certain user
filtering tasks based on a project
filtering documents based on their type
Next, let’s build the diary entry functionality.
The diary entry will have a few fields:
a date field for when the entry is logged
a content field (text type)
We’ll display these from the trip details view, which currently needs to change from a scrollable type of view to a vertical list element so that multiple entries can appear.
To preserve the trip details at the top, cut or copy the content group, switch to a vertical list element, and paste the group body into a header group section. Adjust its position in the elements tree if needed.
Now, we need a button to add a new diary entry.
We can copy the existing floating group button from the trips page. Adjustments:
add an icon and a label, with the label set to create diary entry
remove fixed width
set height to 40 pixels
reduce icon size
optionally save as a new style, e.g., fill dark primary with rounded corners
remove margin on the floating group and set to float horizontally in the center
set safe area behavior to apply to the container
ensure the element is visible on page load
enable box shadow for floating effect and optionally adjust opacity
For testing, we can add a simple workflow that immediately creates a diary entry:
link the trip field to the trip in the trip details view’s trip property
set the date field to the current date and time
Creating a few diary entries will confirm that they have a relationship with the correct trip.
To make this clearer in the app data tab, click primary fields and set it to display the title of the trip instead of the unique ID.
Now, let’s display diary entries in the trip details view:
select diary entry as the type of content for the vertical list
for the data source, perform a search for diary entries
add a constraint: trip = trip property of the trip details view
sort by date, descending to show newest entries first
update the text element to display the current item’s date and content
optionally format the date using simplified extended ISO for debugging
Testing shows that diary entries appear only for the trip being viewed. Creating a new entry immediately displays it in the list.
Next, we will build a dedicated form for creating diary entries, triggered when the create diary entry button is clicked.