Development On PowerApps For Office 365 - Part Four

This article is part of a series of complete development on PowerApps. Today, we will develop an app and see a real-time scenario of what Power App has to offer.

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.

Development On PowerApps For Office 365

  • Sign-in and you will arrive on the portal.

    Development On PowerApps For Office 365

  • Click on the "Apps" section from the left menu.

    Development On PowerApps For Office 365

  • 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.

    Development On PowerApps For Office 365

  • Click on “Connect to data” and add a connection to your PowerApps.

    Development On PowerApps For Office 365

  • The following screen will open. Click on New connection > Add SharePoint from the list.

    Development On PowerApps For Office 365

  • Add your site on the connection box below and click "Go".

    Development On PowerApps For Office 365

  • 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.

    Development On PowerApps For Office 365

  • On the Insert tab, under Forms, click on "Edit".

    Development On PowerApps For Office 365

  • You will see a grid appear like below.

    Development On PowerApps For Office 365

  • 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.

    Development On PowerApps For Office 365
  • You can align the fields and give them a neat look as below.

    Development On PowerApps For Office 365

  • Click on Insert >>Button and add it to the form.

    Development On PowerApps For Office 365
  • Add "Submit" and "Cancel" buttons as shown below.

    Development On PowerApps For Office 365
  • Click on buttons. You will see the flowing configuration window populated.

    Development On PowerApps For Office 365
  • 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.

    Development On PowerApps For Office 365
    Development On PowerApps For Office 365

    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”.

Development On PowerApps For Office 365
  • Your app will open as below.

    Development On PowerApps For Office 365

    Development On PowerApps For Office 365
  • Add in details and click on "Submit".
  • Go back to your list which you selected as the database.

    Development On PowerApps For Office 365
  • 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!