Power Apps – Basic App

In today’s blog, we will see how to perform basic operations of Power Apps. And, then in the next blog, we will take it to an advanced level.

We will see how to add & submit a new data record, view the data, and then modify the data.

• Add and Submit new record
• View the data
• Modify the data

Navigate to make.powerapps.com, go to your environment & create a canvas app. I have selected the mobile format.

Add and Submit new record

Next, let’s add a blank screen & rename it to Home Screen.

Let’s put a vertical gallery (Insert > Gallery > Vertical) & add accounts table as the data source.

Items property of the gallery control is Accounts

Note – The blog is independent of the data source

Add & submit a new data record –

Let’s also add a new icon (Insert > Icons > Add) for adding new records to the accounts table.

And we will navigate it to a new screen for adding a new record. Add the Navigate function on the ‘OnSelect’ property of the icon

OnSelect : Navigate('Add Screen',ScreenTransition.CoverRight);

Let’s add a new screen (renamed to Add Screen) and add a form to creating new data.

Insert > Forms > Edit

Let’s update the data source to accounts in this case & add your selected fields from the ‘Fields’ property

Do not forget to update the ‘Default mode’ to ‘New’

Now our form is ready we need two things now –

A button to submit the data & a cancel button.

Let’s quickly add a button (Insert > button); rename the button to ‘Add account’ and update its ‘OnSelect’ property

OnSelect : SubmitForm(frm_NewForm);

Tip – It’s good to reset the form & navigate it back to the main screen (or another screen) for a good user experience.

OnSelect : SubmitForm(frm_NewForm);ResetForm(frm_NewForm); Navigate('Home Screen',ScreenTransition.CoverRight);

Let’s test the app. The gallery on the Home screen should be updated now with the record you just created.

So far, you have seen how to add a screen, insert a gallery and connect to a data source, how to add icons and put functions on it, how to add a form and a button and create a record.

Let’s quickly do a view screen, which is the read-only mode of the data.

Select the gallery first, then add an icon for viewing in the gallery (read-only mode) & update the existing icon for edit mode

Note – View screen is not always mandatory, but it’s good to view data if the end-user doesn’t have edit/write permissions.

View the data

Add a new screen (renamed to View Screen), add a form, update the data source & change the default mode to ‘View’

If you notice the form is currently blank, even after adding a Navigation function.

To view the selected user record, we will now pass this object to the second screen. So let’s move to the Home screen and add the following to the OnSelect function of the View icon

OnSelect : Navigate('View Screen',ScreenTransition.CoverRight, {selectedId: ThisItem});

Now come back to the View screen & update the Item property of the form to the object name – selectedId.

Item: selectedId

Now test the app & check. The data should be visible in read-only mode.

I have added an icon for navigating back to the Home screen.

Now, let’s work on the Edit screen.

Modify the data

Add a new screen (renamed to Edit Screen), add a form, update its data source.

Update the item property to selectedId (object variable passed from Home Screen/View Screen)

This time, the Default mode of the form will be Edit.

Add a button now to update your changes to the data source & update its OnSelect property

OnSelect: SubmitForm(frm_EditForm);Navigate('Home Screen',ScreenTransition.Cover);

For user experience, I have added Navigate function.

Test your app it should work & you can see updated data across all screens.

Your overall app should have by now –

• Four Screens
• Three Forms
• Two buttons
• One gallery  

Your Basic App is ready to use!

We will see in the next blog how to modify some of the forms & controls and make it a little better.

Hope this helps!
Keep reading, keep enjoying, keep exploring!