In this lesson, we're going to learn how we can modify our create trip form so that it can also function as an edit trip form. And in so doing, we're going to learn how we make changes to existing data in our database.

So the first thing for us to do is actually add an edit button, which is going to trigger the edit form. So I'm going to add a trailing button here. And I'm just going to make this a little pencil icon. And let's make sure that we're using the phosphor icon library because that's what I have been using thus far. And I actually set it to be a black symbol.

And when this is clicked, if I go and add a workflow, we're going to show that same form that we already have existing, which is the create trip view.

So, we've got this create trip view. And in a lot of cases, the form where we're creating something can be really similar to the form where we're going to edit something later on. So, we're going to reuse this form. We're going to use it in two different contexts: both for creating a new trip and for editing a trip.

So this view which I'm currently calling the create trip view, we could perhaps call it something like the create and edit trip view. And even what would be smarter is for us to actually start it with trip so that it appears alongside these guys in the App Manager.

So I'll go trip create an edit and that means that all of our trip related views are all there next to each other in the App Manager.

By the way in the App Manager you can also create here a folder to organize your views. So we might have a folder for all of our trip related views. And then for each of the views in question, we can click these little three dots, hit Manage Folder, and select the folder there.

Okay? And so we could do this for all of our trip related views. And so using folders can be really helpful as your app starts to grow in size.

But I digress. What we were talking about doing was having this one view be able to create and edit trips.

And so first things first, let's from our trip details view add a place from which we can trigger the edit mode for this form. So I'm going to add a trailing button here. And I'm going to make this an icon button. And within the phosphor library, I'm going to use the pencil simple icon here. And well actually I'm going to make this icon dark, I think.

And then add a workflow which is going to go to that trip create and edit — only this time I might experiment with opening it as a modal.

And so what this means now is if I view a trip's details I can click this edit icon in order to open the edit modal. And then of course we need to now configure this view so that it can handle our save changes logic or our edit trip logic.

And just to get us started here, I'm just going to duplicate the create button that we have in here. And this button can be our button to save changes. And what we can do with this button is we can add a workflow which is going to handle our saving logic.

And our saving logic in Bubble lives under Data → Make changes to a thing.

Okay. And this is where we're going to get stuck because the thing that we're making changes to here we don't have access to right now within this view.

Okay. So this is a very similar problem that we just saw when we wanted to have our delete trip logic. And what we did here is when this delete icon was clicked, we displayed a delete confirmation sheet. And this delete confirmation sheet accepted as a data source a trip type of thing which meant that any of the actions that live inside of this sheet like one attached to this delete button could delete the trip living inside of the sheet.

So this is what we learned at the end of the last section in the course.

And so I want you to just based on what we've learned so far about how we pass data into views, which we're currently doing when one of these trip rows is clicked inside of this vertical list of trips. When one of these is clicked, of course, we're going to go to the trip details view. And what are we doing at that time? Well, we're passing in a trip, right? We've got a trip property that exists.

If we now go to trip details, our trip details view has a property. Remember when we set this up? So this is a little slot, a little compartment, a little window where we can pass data through this window and then into the corresponding view. In this case, the view details view.

So, knowing all of this, how do you think that we would inside of our create and edit trip view, how do you think that we would make our trip available to this Make changes to a thing?

Right, we need to somehow provide a data source that this action can access. Well, we're going to do it in exactly the same way as we are doing it when we are passing a trip into the trip details view. Namely, by creating a window, right? Creating a property on the view that we can then pass a trip into.

So, on our trip create and edit, I'm going to add a new property here. And that new property, no surprises, is going to be called a trip. And it's going to be a dynamic value of type trip.

Now remember this little guy optional. What do you think we would do here? We want this view, this form to be able to handle logic for creating a view and editing a view.

When editing a view, yeah, we already need a trip that exists that's accessible and that's been passed into this view via this property. But when we create a trip, will they be able to pass in a view into this property? No. Right? We're creating a new trip from scratch. So there will be nothing that could be set as the data source for this property.

So, we do want to have optional ticked because if we don't have optional ticked, we're going to get an error in the editor saying, "Hey, you must provide a trip whenever you use this view." Whenever you display this view.

So, now that we've got this trip property from any places in which we're now going to display this view, we can pass in a trip.

So, for example, right on our trips page, we've got this floating button which we were using to display the create trip view. And if we look at that action, notice here how there's a new field. And this is for that property that we just created. And notice how this property is empty. And of course, it should be empty because we are wanting to create a new view from this context.

But from the trip details view when we are clicking on this pencil icon we are displaying this view to create and edit a trip and we need to provide a trip into this view to be able to subsequently use that Make changes to a thing action or in other words in order to have a data source available to that Make changes to a thing action.

So we need to pass in here a trip. And of course makes sense that we use the trip that already exists within this view, right? This trip details view is already holding onto a trip. So we can just pass that trip right in.

And what this now means is inside of our create and edit trip view when the user hits this save changes button, what now can we make the change to? Well, we can make the change to and sometimes you need to refresh your browser if you don't see this new property. So, I'm just going to do that quickly.

So, I've just done that. And now when I select this, look, we have one new data source which is the view trip create and edit. We click this and we now have access to the property.

And now with this Make changes to a trip action, it behaves very similar to the Create a new thing action in that we specify for each field like this title field: what do we want to set the value of this field to? And so we can set this to be coming from that input title’s value, right?

And so if I was to test this out on, let's say, Thailand backpacking, hit that edit icon and then just add some new value for the title and hit save changes. What you'll notice is if we go and look in App Data and I make sure to hit refresh is that when we look in the App Data tab that we have here, some new value appearing for the title.

And note here how the rest of the fields are exactly the same as they were. That's because we did not include them here. We did not explicitly change any of these other fields.

But of course, this isn't really an intuitive user experience. If I, for example, want to edit family trip to Spain, I should probably see in this title field already the value family trip to Spain, which then I can edit and change. We shouldn't be starting from an empty input like this.

So to solve this in Bubble we actually use a property here for every input called Initial Content. And so what we can set here is some value that will appear when the user views the input and which can be directly edited.

Now note how that's in contrast to a placeholder which will be visible if there's no Initial Content and which will disappear as soon as the user starts typing something.

So what we want to do is we want to add Initial Content for all of these inputs and the Initial Content that we want to add needs to come from the trip that already exists — i.e. the trip that we are editing — and in the case of this trip create and edit of course where we are storing that trip in this property and then from the input’s point of view we're just going to pull out the corresponding field.

So for example, the title field. And so now when we go to edit one of these, you'll see that the Initial Content is appearing. So we can just straight away start editing it. And anytime we hit save changes, the new title will appear.

And so what I'm going to do now is just add the Initial Content for all of these inputs. And then in turn update our Make changes action. If I just hit here Add all fields, that's just a nice little shortcut here. And then I can just hook up each field to the corresponding input value — or rather set the value of each field to the corresponding input.

And then the last thing that we probably want to do is hide the form. And so we can just use here our trusty Go to previous mobile view. And that will result in this behavior here.

So, we've got family trip to Spain. Let's get rid of those exclamation marks. Let's change the start date to the 1st of April. Change the cost to 2000. And just add some text here that we can view next time just to see whether this has worked. And I'll hit save changes.

And you'll see here that the details for this trip within the trip details view have all changed accordingly. And if we wanted to be extra sure, we could always check the App Data tab. Sometimes you might just need to hit this little refresh data button down the bottom. And if you do that, you'll see that all of these values have changed. So we know our Make changes logic is working.

There's two big problems, of course, with the form as it is. One is that when we're editing a trip, it still says create trip. And the other is that we've actually got two buttons here visible at the bottom.

So, I'm going to deal with this label here first. And so, we want this title to say create trip when we're trying to create a trip. And, of course, edit trip when we're trying to edit a trip.

And so, I want you to have a go at trying to solve this yourself. It's using concepts that we've already learned. Otherwise, let's go through it here together.

And so, one of the ways that you might think to solve this is by writing a condition here in the Conditional tab. And so, we have to have some kind of data point here or data source which is going to indicate that we are either wanting to create a trip or edit a trip.

So, what data point can we rely on here? It's a data point that's essentially going to be true or false. It's either going to indicate that we're creating or we're editing. Well, what we could do is we could just look to the presence of a trip within this trip property that we created earlier, right?

Because when we are displaying this create and edit view directly upon the clicking of this create button on the trips view, we're opening the view and we're not passing any trip into this property. Right? So this trip property is empty.

In contrast, when the user is hitting this edit icon to open the view, well, in that situation, they are passing in a trip into this trip property. So, when a user is trying to edit a trip, there's going to be a trip living inside of this property. And when they're trying to create a trip, there's not going to be a trip in this trip property.

And so what that means is we can look to the presence or not of a trip in that property to determine how we want our elements and our logic on this view to behave.

So from the perspective of our app bar here, what that would look like is looking at that property, the trip property, and just looking at whether or not it's empty, right? Is it empty or is it not empty?

And so what we could say is if it's not empty, well in that situation, let's change the title. Let's change the title to say edit trip instead. And so what that means, of course, is when we hit the plus button from this trips view, we see create trip. But when we hit the pencil icon, we see edit trip. So this is a perfectly valid way to handle this.

What you can also do is just make use of the Formatted as text operator that we saw earlier. And you can simply write your expression in here that checks whether or not the trip is empty. So you can literally just say, hey, is that trip property living inside of this trip create and edit view? Is that trip empty and then literally just format as text.

We saw how to do this in our lesson on operators when we were setting up our trip details view. And so the value that we can put in place of yes here when it is empty is create trip, right? That's what's going to be displayed when the trip property is empty.

And when it's not empty, of course, a user has passed in a trip into that property which they want to edit. So, of course, we would say here, edit trip. And when we're doing something like this, we don't need an additional condition.

And so, the behavior here, if we test this out, should be exactly the same. It is for creating a trip and it is for editing a trip as well.

Now, the only thing that we have to do is show and hide these buttons conditionally. We can just do exactly the same thing for these buttons where we look at the existence of that trip property to determine whether or not we're going to display them to the user.

So we can look to see whether that trip is empty and if so we are going to show the create trip button and make sure that it is not visible on page load. And conversely for the save changes button, we're going to have the inverse condition, right? Where we're only going to show that when the trip in that trip property is not empty.

And so if we test this out, yep, create button is visible and no save changes button. And when we go to edit, then the inverse is true.

And this is a totally valid way of solving this problem. But I do just want to show you a different method for handling this which is going to introduce a new concept that we're going to use as we build out the rest of this app in the course.

So, I'll see you in the next lesson.