We're going to pick up where we left off in the last lesson here, where we are going to allow the user to hit this Add Diary Entry button and then display a form for creating their diary entry.

Now, in this lesson, we're not actually introducing any concepts that you haven't already learned. So, what I encourage you to do is try to build this functionality in your app without using this video as guidance first. And if you get stuck, then come back and follow along with me as we build it here together.

So, first things first: when this diary entry button is clicked, we no longer want to do this action, which we just had temporarily in the last lesson. We actually want to navigate the user to some kind of view where they can create a diary entry.

We already have in our application a view for creating a trip, and perhaps we can just reuse this view for creating a diary entry. So all I'm going to do here is, on Trip Create and Edit, I'm going to click these three dots and hit Duplicate. This can be our Diary Entry Create and Edit.

We're actually going to do things a little differently here. When we're adding the diary entry, the button to create is actually going to be here in the top and not a floating button down the bottom, just to show you a different way of doing things. So, I'm going to delete the floating group with the button in it that we copied across.

I'm also just going to delete all of the fields that we don't need. So, I'm going to delete Cost and the End Date field. The Title field can stay. The Summary field can stay. And for now, let's just clear out this initial content, so we can just focus on what we need to do to create this diary entry.

Again, in the title, let's just clear this out and just for now have this say Create Entry.

I've got here a trailing button, which is set up to go to the previous mobile view, and that's fine, except I actually want it over on the left-hand side here. So, I'm actually going to create a Leading Button, which is identical, and have a workflow on this one to go to the previous mobile view.

This trailing button is actually going to become our Create Button. So, I'm going to change the color of it accordingly and maybe even just bump up the font weight slightly.

If we edit the workflow for this one, we can actually remove this Go to Previous Mobile View action that we copied across and instead add the action for creating our new diary entry.

So, we're going to Create a New Diary Entry. We're going to set here the Content field to that multi-line input, which is currently labeled as Summary. We could probably rename it here as Content.

We're going to set the Date field to that Date Time Picker, which is currently saying Date Time Picker Start Date. That's fine. We can leave that label.

We also have a Title Input, but we haven't created a field on the diary entry yet to hold a title. So, as a little shortcut, I can just hit Create a New Field, and we'll just call this the Title Field, which is going to be of type Text. We can point this to be the value in that input title.

So, what we need to do is make sure that whenever we're displaying this Create Diary Entry form, we pass a trip into it so that this create action can make use of that trip data source and store it here on the diary entry.

Luckily, because we copied this from a view that already had a trip property, we have a trip property that we can use. So we can just simply point this to the property that lives inside of the view.

Then, what we should probably do is go to the previous mobile view as well. Now we need to add the logic to actually display this form in the appropriate part of our application. And that, of course, is on this button that we already set up on our Trip Details view.

Inside of this workflow, where we had started to set up the navigation action, let's set the target view here to be this new view that we just created. We'll actually set this up as a modal for now, and make sure that we're passing in here, as the trip, the trip that's already living inside of this Trip Details view.

If we go and test this out now, I'm going to hit Create Diary Entry. That's going to display the form, and I could say here, "A test entry, some test summary," and hit Create.

We're not displaying those new values anywhere here on the interface. So, to make sure this worked, we can head over to the App Data tab and see that indeed the Content, Date, and Entry fields have been set accordingly.

One thing we possibly need to change here for the initial content is the Start Date or the date of the diary entry, just to be the current date/time. That feels like it's going to be more useful from the perspective of the user experience, right? You're just going to add a diary entry for today, potentially, but they can of course change this with the date picker.

Another little UX tweak: notice that when we add a diary entry here within our reference application, that the top title input is focused right away, and the keyboard becomes visible. Whereas in our application, the user can open the form but then have to separately click into the title input.

We can save them a step here by autofocusing this title input whenever this view is displayed. We can do that within the Workflow tab by simply adding an event trigger called Page is Loaded. This should probably be called View is Loaded, since it's not a page but a view in the context of mobile that we're using. Then, we just add a handy little action called Set Focus to an Input Element and choose the input that we want to be focused. This results in the behavior where the user can start typing as soon as the view is displayed.

The last thing we want to do is just change the appearance of each of these diary entry rows to display the Title and the Date formatted nicely.

Back on our Trip Details view, I'm going to change this to be the current diary entry's Title Field and duplicate it. Note that the vertical list item here is defaulting to the Row Layout. So I'm going to change this to be a Column. I will have to make slight adjustments to the text elements within, namely making sure that they both have Fit Height to Content toggled on.

I’m just going to add some content for each. This allows me to adjust the style slightly. I might want to start with Body 16 for the first one, but perhaps Body 14 with a gray font color just to deemphasize it a bit. That gives us a tidy look.

Then we should set the data source dynamically for the Date Field to be the Date Value, and format it as we like in our application.

If I take a look at how this works on a new trip here, you'll see that it appears as follows. That looks relatively nice. I can add another one here, maybe another one just to really test out how this looks.

Out of the box, the styling is quite nice. Notice we actually have this hairline divider going all the way across; that's just the way the vertical list element was placed by default. The only thing I might want to do is replace the color with one of my color variables. This way, if I ever decide to change the colors throughout my entire application, I can just do that within the Styles tab.

Okay. So, this is the result so far.

In the next lesson, we're going to set up some more nested views: namely, the ability to view a diary entry by clicking on it and also to edit an existing diary entry.

See you in the next lesson.