Developing your PowerApp with Microsoft Flow

[KC]

This post was originally published on the personal blog of Keith Craigo.

It was mentioned in the 2016 Microsoft Ignite video that PowerApps will replace InfoPath and Flow will replace SharePoint Designer.

In my day job I develop a lot with InfoPath and SharePoint so I decided I had better start coming up to speed on these two new technologies from Microsoft, actually I'm still trying to come up to speed, there is a lot more you can do besides what I will ​show in this post.

What is this about?

Let's walk through the process of building a Line of Business (LOB) Mobile Application to allow employees to submit Long Term Parking Requests.

When an Employee goes on business travel they sometimes request that they be allowed to park their vehicle on company property. This can be for an extended period of time, in a lot of cases, months at a time​. Some companies have policies that prohibit long term parking without prior approval and the vehicle is therefore subject to towing. ​But if you let Security know, they will try to work with you, at least at my company we try to make accomodations. Normally a request is made in advance but there have been times an employee will forget to let Security know, in this case efforts will be made to track down the owner of the vehicle but if unsuccessful then the vehicle will be towed at the owners expense. There have also been times an employee forgets until the day of or after their departure, then they don't remember the correct number, who to contact, so they involve their manager and or coworkers, not a good situation to be in.

It would be easier and less stressful if they could submit the request while waiting on their flight from the airport or from their hotel room and not have to worry about phone numbers. Traveling is hectic enough, so as a developer who has been in the same boat, I'm always thinking, how can I make things easier not just for me but for others with my software.

The app will be a phone app that will allow the user to submit a Long Term Parking Request to a SharePoint list, then Microsoft Flow will be used to send out a notification to Security that a new Parking Request has been submitted.

Requirements

1. O365 Account with Tennant Admin permissions - you can get an O365 Developer Account here or be given the ability by your IT Dept. to create apps for your company.
2. How to create? PowerApps is now available directly from within a modern SharePoint list.

   

   You can also download the companion desktop app if you desire, this is only available for Windows at this time. or you can create and edit your app directly in your web browser. Just be aware that if you create the app directly from your list, it will only create an app based on the phone form factor at this time. If you choose to create the app from either the Desktop app or within the PowerApps admin portal you can create your app from a number of predefined templates or choose a blank app for either the phone or tablet form factors.
3. Create a sharepoint list "LongTermParking" with the following schema. Make sure to set the Default value of ReadParkingPolicy to Yes.
   
   

End User Requirements

1. The user will need to have PowerApps Mobile on their phone or tablet, this is a central hub for all Powereapps provided by your company. PowerApps Mobile is avaialble from either the Apple App Store​ or Google Play.​​

Let's Get Coding Already!

PowerApps is a no code solution, well sort of. Let me explain.

First you add your data source connections from a variety of pre built connection options such as SQL Server​​, Azure, Blogger, Social Media services like Twitter, FaceBook, Slack, and a whole lot more... or create a custom connection, or use the Common Data Service to build your Entities.

For this app, let's select both the ​Sharepoint Connector and the Office 365 Users Connector.  First select SharePoint and the next screen will ask if you want to Connect ​directly (Cloud services) or if you want to connect to your on premise Sharepoint using a Gateway. 

In this post I'm using my O365 account so I chose Connect ​directly (Cloud services)​. Once you click connect, a connection will be created tied to your SharePoint tenant.

Now Add another Connection for the Office 365 Users.

You can select the Gateway option if you want but that's outside the scope of this post, this will allow you to connect to your Sharepoint on premise (Another Post?).

With our ​Sharepoint list "LongTermParking"​ ​​​created, open the PowerApps console and click the + New App button.

On the next screen select ​​the PowerApps Studio for Web button, then on the next screen, under Blank App, select the Phone layout button.

When the Editor opens your presented with a blank layout screen,  you can customize the layout as you desire or you can select from a variety of provided layout templates then modify the template to your specs. 

I chose the first template, the one with only the Title Bar.

 

 Change the Screen Name

Click either the Home or Content Tab in the Ribbon and select the Screen name, change this to Home.

Make Our Controls Dynamic

The way you add additional functionality to your app is by using the available out of the box Excel style formula's. For example:

If(IceCream.Selected.Value = "Vanilla", UpdateContext({ visible: true }),UpdateContext({ visible: false })); NewForm(IceCreamRequestForm) 

If the dropdown IceCream's selected value =  "Vanilla", if not already created create a context variable named visible and set it's value to true, otherwise set it's value to false, then if visible=true,  open and reset the fields in the form called IceCreamRequestForm. The IceCreamRequestForm visible property value is set to the value of the context variable "visible".

You can find out more about all the Formulas on the PowerApps Formula Reference page​​. More on this later.

In the Ribbon select the Content Tab then the Data sources button.

Select the connection to your Sharepoint tenant.

​You should now see something similar to this:

Click the Add data source to add Office365Users​ Connection., we will use this connection shortly to retrieve the current users Manager.

Create the Request Form

• ​​​In the screen editor click the grey area away from the screen layout, click the Property Panel Advanced Tab
• Set the OnVisible Action to UpdateContext({agreed: false}), this creates a Context variable we use to control the Toggle Button's state
• Add an HtmlText control to the screen, this is located in the Ribbon​ Insert Tab -> Text -> Html text​
• With the HtmlText control selected click the Advanced tab of the Property Panel and change it's Text to "Company Parking Policy HERE" or whatever you want.
• Directly under the HtmlText control​ add a TextBox with it's Text set to "I Agree" then place a Toggle Button to the right of the TextBox
• With the Toggle Button selected, click the Property Panel's Advanced Tab, set the OnCheck Action to  Navigate(ParkingRequestForm,ScreenTransition.Fade)
• ​Create a new screen by duplicating the current screen, click the elipsis button and select Duplicate screen
• Delete all the contents of this new screen except the Title bar and Title
• In the Ribbon select Insert->Forms->Edit Form 
• In the Ribbon select the Home Tab -> Form1
• Change Form1 to ParkingRequestForm
• Select the ParkingRequestForm then click the Advanced Tab
• Set the Datasource to ParkingRequest
• Click the Options Tab to show all the available fields we can add to our form

• Add the following fields to the form by clicking the eye symbol next to them:
  

  EmployeeId/EmployeeName  - ​select the elipsis then Advanced options, unlock this field by clicking the Padlock.
  Note: When you unlock and change a fields default values,  it now becomes a custom card and the Eye Symbol changes to an X .

  Each field is contained within a DataCard.

  
  Change the Display Name to "Employee Name", you can style the other fields, I'll leave that up to you.
  Click the Textbox inside the DataCard Value
  Set the Data Default ​Value to User().FullName
  I set the Disabled value to true and deleted the Disabled Fill value and set the Color property to RGBA(0, 0, 0, 1). 
• ​Click the Options tab to return to the screen shown above. 
  Add Manager. ​Go to the Advanced options and then make sure you have selected the DataCard value for the Manager.
  Set ​​the Data Default value to Office365Users.Manager(EmployeeId).DisplayName
• Add ContactNumber, VehicleLocation, StartDate, EndDate, Make, Model, Color, LicensePlate(Title), and Justification ​to the form and leave the defualts.
• Note: ​In the screenshot you notice a Yellow Triangle appears, this tells you that there is an issue that needs to be addressed, in this case I had forgotten to change the OnVisible property function to reflect the forms new name.
• After all the fields are placed on the form the way you like, add a button just after the end of the form as shown in the above screen shot
• Change the buttons Text to "Submit" and it's OnSelect Action to SubmitForm(RequestForm)​ 
• Change the OnSuccess Action of the form itself, select the form by either carefully clicking the side of the form, be careful you have not selected one of form fields or the easiest way in my opinion is to instead select the RequestForm from the Property Panel dropdown. 
• Set the OnSuccess Action to Navigate(Home,ScreenTransition.Fade)
• Save
• Run
• Submit a Request
  If you open the ParkingRequest Sharpoint list you should now see your request.

Create a Flow to Send a Notifcation to Security About Our Vehicle

You can create a Flow from​​ one of the following, the Flow portal page​ or create a Flow directly from the Sharepoint list which is what I'm going to do.

​​​Click the Flow button, then Create a New Flow

There are a number of available templates to choose from in Flow​​ and even more ​​on the Microsoft Flow Website​.

For our purposes choose the ​first option

 Click the above ​then click Continue​​, now we see the templated Flow

The Flow as it is right now only looks up the information for the current user, we need to change the To: field to a designated Security address.

Change  Subject to New Long Term Parking Request

Change the Body to:

A new Long Term Parking Request was submitted by [Created By Display​ name] ​, 

Details:

[LicensePlate]

​[Color]

[Make]

[Model]

[Vehicle Location]

Click on Advanced options and set the From field to ​[Display name]

We have to manually create the Link back to the request​​ here

https://{Link to your SharePoint tennant here}/Lists/ParkingRequests/DisplayForm.aspx?ID=ID

 The email will now contain a link to the current request.

 Display form:

Summary

We now have a working mobile phone PowerApps app, say that three times fast, to allow our co-workers the ability to make Long Term Parking Requests from any location.  The app is secured by our Company's O365 Account, we have email notification capability,  the data is easily accessed via SharePoint by Approved Personnel where it can be further processed as desired.​​