Step-by-Step Guide – Creating your first mobile app based on a SharePoint List using PowerApps

December 15, 2016

By Mirko Bonello 

If you are running SharePoint in the cloud, chances are that you are on an Office 365 or Dynamics 365 subscription which gives you the capabilities to use PowerApps. Refer to the screenshot below for a lot of Office 365 and Dynamics 365 plans that include this feature. The scope of this post is to be a step-by-step guide to those who are absolutely new to PowerApps to create their first mobile app. And the better news is that no coding knowledge or knowledge of the Common Data Model (CDM) is required since this tutorial is based on a simple SharePoint list!

powerapps_1
STEP 1
The first step is to have a SharePoint list as a starting point. Please note that I use different data types in my list fields to show-case how these appear in the final mobile app.

powerapps_2

STEP 2
From the Ribbon of the SharePoint list click on “PowerApps” and then “Create an app”.

powerapps_3

STEP 3
On the right-hand side of the screen, a slider menu should appear. There you specify the name of your mobile app. In this case I call it “PA Ticket App Demo”. You can call you app whatever you want but make sure it is a friendly and meaningful name as this appears on the front-end to the user.

powerapps_4

You should now see a bunch of dialogs telling you that your app is being built and saved to your PowerApps instance.

powerapps_5 powerapps_6

STEP 4
When the process finishes, if all goes well, you are presented with the power apps web-designer. Describing each and every function is out-of-scope of this quick tutorial but on the left hand side you should see a form navigation pane where you can browse around the screens automatically generated by PowerApps. On the right-hand side, you can see a summary of the controls in the current view. You can change the order of the controls and make other changes. This is important if you want to keep the same order of fields of the SharePoint list (unfortunately the field order is not automatically remembered). You are also able to see previews of what the various CRUD forms will look like on the running app.

powerapps_7

powerapps_8 powerapps_9 powerapps_10powerapps_11

STEP 5
Clicking on the File menu shows you the familiar Office menu where you can Save, Save As and a bunch of other important functions. At this point you should save any changes you made to the app.

powerapps_13
STEP 6
From the menu above or from the designer ribbon you can decide to share the app with multiple people within your tenant. By default the app is only visible to you. This can be done using the button with the plus sign symbol. You can also run the app from within the PowerApps Designer by clicking the Play button. After you have reviewed it you can continue making any changes you like and repeat the process until you are satisfied that your app can be released to the rest of the organization (using the plus sign button).

powerapps_14

STEP 7
It is now time to view the app in the same way the other organizational users will see it. In this case I will launch it from the Dynamics 365 menu. If your tenant only has Office 365 then you launch the app in a slightly different but equally intuitive manner. Your mobile app will appear there together with the other apps that you have deployed in your tenant such as Dynamics 365 for Sales, Dynamics 365 for Operations or any other app you obtain from AppSource. I also show how the app appears within the iPhone PowerApps app. By default all PowerApps support BYOD scenarios so they can be used on multiple platforms.

powerapps_15 powerapps_12

STEP 8
Launch the app!
Below are some screenshots of the running app. Please note how in the SharePoint list I had a date control but which automatically translated into a nice date picker control on the mobile app. Also any data constraints are enforced – for example the Title field is a mandatory field. All this without any manual intervention or coding knowledge.

powerapps_16

STEP 9
Create, edit or delete some data from the app. In this example I am reporting a fault vending machine from the mobile app which makes me incapable of consuming any soda (not good)!

powerapps_17

STEP 10
Close the loop by checking that the data changes you did are reflected into the SharePoint list. In this case I see the record called “Ticket from PowerApps”. Please note that this happened automatically without the need to trigger any synchronization process between the phone and SharePoint in the cloud.
powerapps_18