Citizen Developers!

Build Mobile Applications for Your Organisation with Power Apps

What is “Power Apps”? Power Apps is a service provided by Microsoft that enables anyone to build mobile applications – even if you know nothing about programming. Microsoft calls these people “citizen developers” and it’s easy to see why! Power Apps is reminiscent of drag and drop website builders but allows an organisation to connect their Power App to their business data and develop a mobile application to make a manual process automatic and improve business operations. Examples of Power Apps you could develop for your business include an inventory management tool that allows the operator to scan barcodes through the app, a customer help desk which creates support tickets, and an employee Expense Handler that enables employees to submit expenses. These apps can be run on mobile devices such as smartphones and tablets but can also be used through a browser on a laptop or desktop.

In the following sections I will walk you through the process of building an Expense Handler Power App. The app will allow an employee to view, save and delete their expenses for a month and submit them when ready. When they do submit the month, their expenses are packaged up into an Excel file and sent as an e-mail attachment for approval to the finance department. The image below illustrates what the app looks like and how a user would interact with it.

Power App Builder Basics

The Power Apps builder has all the functionality you need to build mobile applications, even a complex one. On the left sidebar of the builder all the components needed to display information and create an interactive app can be dragged in to the canvas. On the right sidebar the properties of a selected component are displayed. This is everything from its colour, size, text-alignment and in the case of components such as buttons there are special properties such as what should happen when the user clicks the component.

If you are familiar with Microsoft Excel, then you will find using Power Apps to create dynamic content is similar. This is because Excel and Power Apps both allow the user to specify formulas to dictate the value of a cell or component. Take for example the name displayed at the top right corner of the app. This name will change depending on who is logged in to Office 365 and using the app. The formula used to achieve this is shown in the formula bar at the top of the builder:

User().FullName

This formula is entered in to the Text property of the component. The User() part of this formula allows you to access the information regarding the account, including their email and of course their name.

Business Data

If you are building a Power App for your business you will most likely need to connect it to your data. Power Apps offer almost any popular data source you can imagine, from databases such as Oracle and SQL and other services such as SharePoint, Google Drive or just regular files such as Word and Excel. An alternative to these is a service provided by Power Apps to manage data called the Common Data Service. This is a secure way to store and access data and is cloud-based so can be accessed anywhere any time. The Common Data Service is what this Expense Handler app uses to store expenses made by an employee. To store data such as an expense it must be defined as an entity. An entity is just a description of the fields that make up a piece of data – in this case an Expense. Below is an image of an Expense entity.

Every time a new Expense is saved by an employee, the fields of the Expense entity will be populated with data and this will make up a new Expense record and is automatically saved in the Common Data Service. The question now is how do we allow a user to add records to this database through the Power App?

Submitting Data with Forms

To add a form in to the Power App, you simply drag an Edit form on to the canvas. At this point it will be blank with no fields to fill out.

The next step is specifying what Entity the form is going to correspond to. By clicking on the form to reveal its’ properties, you will find one of the properties is Data source. Once you click this dropdown selection, you can view a list of Entities available to you. In this case we are choosing the Expense Entity.

This will automatically create some input cards relevant to fields in the Expense Entity. It is up to you to decide which fields you would like the user to have control over and ultimately you can disable or hide fields you don’t want the user to access. An example of this is in the Expense Handler form is the month field. This field is disabled and the user cannot edit it. The value of this field is set using a formula which checks what Month is selected in the dropdown control that the user can use to filter the expenses for a month. The image below shows this formula which is setting the Default value for Month input field.

This logic ensures that the expense saved will be for the month the employee is viewing. You could also simply hide this input field altogether and impliment this logic in the background, but it’s nice to emphasize to the employee what month they are saving the expense to.

The final piece of the form is a control to submit the data to the Expense Entity. To do this, a button is added to the canvas and its property OnSelect is given the formula:

SubmitForm(Form2); ResetForm(Form2);

In this case, Form2 is the name of the form. The SubmitForm() function is self-explanitory – it submits the form data, and the ResetForm() function clears the form fields. The semi-colon symbol simply allows you to execute more than one function in the same formula.

It is also worth mentioning that while creating an Entity, you can specify what fields are required (cannot be blank when submitting), or what datatype is accepted for a field (a number or email). This means that if the Employee enters bad data in to the form, such as a negative Expense amount, or a day outside of the month such as 32, they’ll get this error and the expense won’t save.

Displaying Data

We can now submit data to the Common Data Service, but it’s equally important to retrieve and display it. There are many ways to do this, but in the Expense App a component called a DataTable is used. This component can accept data from an Entity and arrange it into columns and rows. Much like the form, you simply drag and drop the DataTable component onto the canvas. It will be blank initially because you have to specify the data source.  Once you do that, the DataTable will create the relevant columns and display the records associated with the Entity specified. You can pick and choose the columns displayed and the order they appear. A feature of the DataTable is that it allows the user to scroll left and right if all the columns don’t fit in to the width of the DataTable component.

Once you specify an Entity to associate the DataTable with, it is going to display every record of that Entity which is not what we want in this case. We want to somehow filter the records to only display expenses for the year and month selected and the user logged in. A property of the DataTable that allows us to do this is Items. This property is what we can use to declare the specific data to display in the DataTable. For this task a function called Filter() will be used.  The parameters of this function are Filter(DataSource, Logical Test).  The Filter() method would look like this:

Filter(Expenses, And(Month = Var_Month, Year = Var_Year, ‘Expense Saved By’ = User().FullName))

As there are multiple fields to check the records in the Expense Entity against (Month, Year and the Expense owner), it’s necessary to wrap these up in an And() function so that if all of them are true the overall value is true (the Val_Month and Var_Year are both values defined by another formula that sets these variables to the value of the dropdown components). This formula will now filter all the records appropriate for the selected Month and Year and the logged in user.

Automating a Business Process

For the final part of the Expense Handler we want to be able to send an email, for example to the finance department to approve the expenses submitted. This can be achieved by connecting a Flow to the Power App and running it when the employee submits their expenses. A Flow is a set of steps to carry out in a logically defined order. The picture below illustrates the steps taken in the Flow triggered by submitting expenses for a month.

The first step simply declares that this particular flow will be triggered from within the Power App. Alternatively Flows can be triggered through other events such as a record being added to an Entity or a file being updated. The four steps after this, Initializing Variables, is the Flow asking the Power App to pass arguments to the Flow to initialize variables that will be used in the Flow. The image below displays the information inside these steps.

The next step in the Flow accesses the Common Data Service and queries the Expense Entity, getting the records associated with that year and month. These records are then passed on to the next step so that a CSV table can be created.

The next step is to send an email to finance with this CSV table as an attachment, asking for the expenses to be approved. The image below shows how this is described in the Flow. In the event the expenses are approved or declined, an email with the approval response is sent to the employee that submitted the expense.

A sample email that the finance department might get is shown below.

Conclusion

To wrap everything up, Power Apps is a powerful service that can enable an organisation to take control of their business processes. It is a tool provided by Microsoft that they market as allowing even non-technical people to build mobile applications, hence the term ‘citizen developers’. To get started on Power Apps go to https://powerapps.microsoft.com/en-us/

To stay up to date with Dataworks Limited news and events, connect with us via the links below :