Hi and welcome back to a new blog in this series. Hope you had fun and learned something, reading the last blog. On the end of that blog I noted that we would focus on adding, editing, and saving new records to our database through this app.

Well then, what are we waiting for, open the app and navigate to the screen “scrn_Item” by selecting one item in the gallery on the first screen. To let the adding and editing work properly we need the form to start in view mode. So we set the DefaultMode property to “FormMode.View”. You’ll see that you can’t change the properties anymore in play or preview mode. Now we’re going to focus on adding a new item. What we do first is adding an add icon (Plus) and a save icon (Floppy / Save).

On the add icon, we want to have a behavior that our form is going into the form mode ‘New’ when we click on it. To do that we set the OnSelect property to:

On the Save button, we want the behavior that it saves the form to our database, to do that we set the OnSelect property to:

When you configured the steps above you can try to add a new record to the database.

Now that we’ve created a new record in our database it is time to deal with the editing part. Let us add a pencil icon to our form screen and set the OnSelect Property to:

When you click on it while you have a record open in view mode, the properties of that record become editable. The only thing that rests is to change something and press save.

Now there is a possibility that you might want to discard the changes. If you want to have that option, add a cross icon and set the OnSelect Property to:

At this moment we’ve all the options to do maintenance on our database records, but let’s do some extras. Cause you might have noticed that when you add a new record, it doesn’t stay in the form, but shows another item. Let’s fix that.

Go to the properties of the frm_SelectedItem where you’ll see the OnSuccess property after you open the advanced section in the right banner. In this property, we can code some behavior when the submission of the form is a success. And what we want is, that when the form is submitted successfully to the database, the objSelectedItem is updated to this item. We do that by using the property a form provides us with and is called last submit. This last submit property contains the last record that was submitted by using this form and we want to change the form mode to view. The formula will look like this:

You probably noticed that, in the overall video at the start of this series, the edit and save icons change when the form changes. This is a way to make the Power App screen a little less crowded with all sorts of icons and keep it uncluttered. We can accomplish this functionality by changing two things in our app:

1. Remember the navigation button we put in our gallery, we need to add ViewForm(frm_SelectedItem) to that code. (Don’t forget the ; to separate the formula)
   
2. We are now going to let the form mode depend on which icon is shown. In the icon property of the pencil “Icon” we’re going to set a formula that looks like this:
   
   

Above functionalities make the icon change, but we also need to change the behavior in the OnSelect properties of this icon. So we need to combine the two functionalities with a condition. It will look like this:.

We can now delete the save button and try our new functionality. Also try to add a new record, this way the icon also changes to the save button.

As you might notice (or might have noticed in the past, this app doesn’t do well with users. The first response you’ll receive is something like: “Yuck, that’s an ugly app”. We can change that, but let’s deal with that in the next blog post. For now, I hope the above worked for you, and if you’ve any suggestions or adjustments, do not hesitate to leave a comment!

Part 5 – Design the layout of this canvas app –>

<– Part 3 – Navigate with context
<– Introduction – Index