In this lesson, we're going to round out our diary entry functionality by having the ability for you to click into a diary entry to view more details for that diary entry, as well as for you to be able to edit a diary entry.

Just like in the last video, I challenge you to build this functionality without watching this video first. The video will be here if you get stuck, but building this doesn't require that we learn any new concepts. New concepts are going to come after this lesson, but we need to build these views out first so we have a foundation for some of the more advanced functionality that we're going to build. So try and have a go at this yourself first. Otherwise, let's go through it together.

Our first job is to create the view that the user sees when they click on one of these diary entries, which shows the full details for that diary entry, including, of course, the content.

I like to steal parts of my application that I've already built. This saves time and keeps our design consistent. On our Trip Details view, I've got a group here, which has a Date Value as well as a paragraph of text. This is pretty much the same look that we're going for on our Diary Entry Details view.

So, all I'm going to do is copy this, and then create a new view: New Mobile View, which will be our Diary Entry Details, and we'll keep it as a Scrollable View. Then I'm literally just going to paste in that content group.

First things first: this diary entry view needs to hold onto a diary entry in order to have something to display within these dynamic text values. So we're going to add a new property.

This is exactly the same thing we did when we set up our Trip Details view.

Remember on our Trip Details view, we've got this trip property? Now, for our Diary Entry Details view, we need a property for our Diary Entry. This is going to be a dynamic value of type Diary Entry.

We don't want it to be optional. It makes no sense to show a diary entry details view when there is no diary entry to show the details for. So, we won't make it optional. We will be forced to add a diary entry anytime we display this view.

Next, I'm going to set up a Top App Bar. For this one, I'm going to keep the title style on iOS as Center rather than Large. Large works okay when the title is relatively short, but longer titles get cut off, so Center is safer.

For the title, if I clear out the previous dynamic expression, I’ll set the dynamic data source to be the diary entry that lives inside the property we just created. So we’re going to show the Title value.

For the other values, we will set them up accordingly. Clear out any broken expressions, because we copied these from the Trip Details view. Set the Date to the diary entry's date, formatted as before. Set the Text to the diary entry's content.

We can remove unnecessary elements we copied along the way, such as Group Cost, since a diary entry doesn't have a cost. This also clears up any other issues.

Now we can set up the logic to display this view. From the Trip Details view, we've got our list of diary entries. We can add a workflow on the vertical list item, which will navigate to the corresponding diary entry view.

The navigation should Go to View, open in a Stack, and target the Diary Entry Details view. We must add a diary entry to this view, which will be the current item’s diary entry.

If we test this, clicking a diary entry like the bottom one in our Family Trip to Spain opens it in a tidy layout. We can use sample content to test appearance.

Next, we want an Edit Button in the top right corner. Add a trailing button with a pencil icon. When this icon is clicked, we go to the Diary Entry Create/Edit Form in a Modal.

We need to configure the form to handle editing. Add a new property to the form to pass in the diary entry to edit. This property should be optional, so we can use the form in both create and edit modes.

We can use conditional display for UI elements. When the property is empty, show Create Entry; when not empty, we can show Edit Entry (or leave the title blank, as we'll see).

For initial content, when editing, set the fields to the existing diary entry values. When creating, default the date picker to the current date/time.

We may also want a character limit on the content field (e.g., around 7,500 characters).

For workflows, we need two actions:

When making changes, update all fields except the trip itself, as diary entries cannot be reassigned.

We can reuse expressions from the create action for the edit action, just changing the condition to check if the diary entry property is not empty.

Finally, ensure that when we show this form from the edit icon, we pass in the corresponding diary entry from the diary entry details view.

After testing, everything works: the fields populate correctly in edit mode, changes save, and the user can create or edit diary entries successfully.

We've now implemented the full diary entry concept in our application, alongside the Trip data type. In upcoming lessons, we'll dive deeper into other ways to work with data, including categorizing trips and adding basic filtering.