Development On PowerApps For Office 365

Welcome to the fourth article on the development of PowerApps on Office 365. This article is a part of the series of complete development on PowerApps. You can read the previous parts of the series from the below links.

Here, we will see how we developers can connect SharePoint to our PowerApps and use it for various functionalities through the app.

Go to PowerApps.
Use this link to sign in with your organization’s Office 365 ID or with your Windows' ID.
Once you log in, you will arrive at this portal page.

Sign-in and you will arrive on the portal.
Click on the "Apps" section from the left menu.
You can connect your app with various everyday social or custom apps and use them in your process of development of your own PowerApps.

You can connect to the existing data sources and services, like Excel files, SharePoint lists, CRM records, your custom APIs, your Dropbox, or any such, to collaborate with your app. The best part is that you use a designer to customize or build an app that uses device capabilities, including cameras, GPS, and pen control, without writing any code.
Click on Blank App (Tablet layout); you will come to the screen like below.
Click on “Connect to data” and add a connection to your PowerApps.
The following screen will open. Click on New connection > Add SharePoint from the list.
Add your site on the connection box below and click "Go".
Once you click, it will fetch all the lists.
Choose the list you want to be the database of your PowerApps; for me, it’s AppDemo.
On the Insert tab, under Forms, click on "Edit".
You will see a grid appear like below.
When you click on the Data Source, choose your list name “App Demo”. All the pertaining fields in that column will get placed on the grid, as shown below.

You can align the fields and give them a neat look as below.
Click on Insert >>Button and add it to the form.

Add "Submit" and "Cancel" buttons as shown below.

Click on buttons. You will see the flowing configuration window populated.

On the window above, you will have to update the OnSelect code. Paste the following code for each submit.

Submit - SubmitForm(Form1)
SubmitForm is the function to submit the form and “Form1” is the name of my form
Reset - ResetForm(Form1)
ResetForm is a function to reset the form and similarly “Form1” is the name of my form

Click on the Form1 and view the Properties window on the right as below.

NOTE - This is the most important step.

Here, you are making the PowerApps automate to understand that if the ID >0, the form should open in the "Edit" mode and if not, it should open in the "New" mode. You will have to add this on the "Default" mode of the PowerApps and in a similar way, you will have to add that code on the ItemMode so that the PowerApps understand that when a new form should open and when an edit form.

DefaultMode- If(Value(Param("ID")) > 0, FormMode.Edit,FormMode.New)
ItemMode- If(Value(Param("ID")) > 0, First(Filter(AppDemo, ID=Value(Param("ID")))))

You are all set; "Save" & "Publish" the form. You will find the app under PowerApps. Choose and click on “Play”.

Your app will open as below.

Add in details and click on "Submit".
Go back to your list which you selected as the database.

You will see your record created through your own PowerApp.

Here is your first PowerApp through SharePoint. When you get to work on real-time scenarios, you will find many workarounds which need to be used for using PowerApps with SharePoint. We will see them all in my upcoming blogs and articles.

Keep following the series until then. Keep reading & keep learning!