Introduction to Power Apps – First Time User Tutorial

Posted on by

Introduction

Today’s tutorial is to go through the basics of Microsoft Power Apps.

Power Apps is a tool from Microsoft that allows you to build custom apps with connectivity and functionality from Office 365 services and the Microsoft platform.

The main benefit of Power Apps is that it is so simple to create your own application. You don’t have to know how to code and the process to design, build and publish is very quick and simple.

This post is the first in a series of tutorials to cover the basics of PowerApps functionality. Please also check out my other videos for specific apps and use cases which I have come across while building various solutions.

Intent

  • Business Mobile applications: Simple applications to solve Business problems
  • Internal Applications: Due to licencing and technical difficulties with sharing, the main use is for internal applications
  • Browser or Mobile Device: Apps are able to be viewed through a browser or a mobile device that has access to a company’s Office 365 instance

Integrations:

As it is part of the Office 365 platform, it is very simple to integrate with a huge range of services such as SharePoint, Onedrive, SQL Server, Active Directory, Excel Online, etc. and there are also many third party connections available such as Google suite and Dropbox. Premium connectors also exist. Check out more details here.

Use Cases

Returning to the workplace:

  1. Desk Booking
  2. Visitor Registration
  3. Attendance Registration
  4. Communication Apps

More traditional applications:

  1. Leave/Holiday Management
  2. Employee Directories
  3. Expense Approval
  4. Employee Onboarding

How to use it

Open Power Apps

There are a couple of approaches to access PowerApps

For those that don’t have Office 365 licences, you will need to head to the Power Apps Website and click “Start Free” to start a trial.

However, if you or your company already have an Office 365 licence, then you can go through office.com, click “More Apps” in the bottom-left hand corner and click on Power Apps.

Create first app

There are a couple of options to quickly create your first app.

You have the ability to “start from data” using any number of sources that exist within the Office 365 environment. The most common and simple ones are SharePoint and Excel, however there are many other sources available as required.

The second most common option is to start your app from blank and build out the screens and sources yourself.

Prepare Data

For the first example, I’m going to select a SharePoint list as the data source.

It is very simple to create a SharePoint site and create a list.

Simply go to “SharePoint”, click create, then create list.

In the example list “ExpenseList”, I’ve pre-populated some entries to use for the sample app.

Create App

Back in PowerApps, I’m going to select the SharePoint option to “Start from Data”.

First I need to select the SharePoint site that I am using for this example.

Then select the list that was created and pre-populated.

Once Site and List are selected, click on the “Connect” button.

Basic Generated App

We are now in the Studio section of PowerApps and our very first app has been generated.

To test out the app as is, we can click on the “Play” Icon to Preview the app. You can also use F5 shortcut key to toggle between preview and edit.

Navigating – Preview App

Powerapps has automatically added a number of default icons and functionality for our list including.

  • A search bar – to allow you to search through the list.
  • Sort – To adjust the alphabetical sort of the list.
  • Add + Icon – To enter in a new record in the list.

Navigating – In Edit Mode

An alternative to going into the preview mode is to hold the “Alt” Key on the Keyboard to navigate  through the application while in Edit Mode.

As you hold the “Alt” key, you will see your cursor change when you are able to click and the color of the icons change if they have a hover color set.

Navigating – Tree View

The next key part to navigating through PowerApps is the “Tree View” on the left hand side.

This is a view of all the screens and underlying “Controls” within each screen.  “Controls” are what PowerApps refers to as things within your screen, such as Labels, Text, Icons, Inputs to name a few.

You will also see the “Components” tab which I explain how to use in a separate video, however that is used for reusable “Controls” across multiple screens. Examples include Menus, Headers and Footers.

In this generated app, the screens are set up in three different views. When using Lists (such as SharePoint), you will generally have three different Screens to view and manage the list data:

  • Browse Screen – to view the total records. This is generally the home screen to browse and drill down into the item
  • Detail Screen – to view the details of an individual item when navigating from the browse screen.
  • Edit Screen – to edit an existing item (via the Detail Screen) or create a new item (via the Browse Screen)

A few useful things to note about the Tree view is:

  • When you select the “Control” on the left, it will highlight on the right and so everything that is visible in your screen will correspond to a “Control” on the left.
  • You can also do it the other way around and select an item on the right to view the detail on the left
  • You can double click on the “Control” to rename to something more useful
  • You can change the depth of the individual items to bring forward or send backward (similar to other office applications)

Navigating – Properties

For an overall view of the properties, the next area of interest is on the right hand side. As shown on the screen, if you are selecting a “Text” control, you can also edit the text or update formatting, size or colors.

Another example is to modify the view of the list. PowerApps refers to these lists as “Galleries”. You can manually move around the content for each line, or you can use the Layout option to automatically adjust the content and spacing.

Other options include clicking on icons to change their icon, color, action, etc.

Customising the app

Chances are that you want to further customise the app including additional screens, additional navigation and this is very simple to do.

In this example, I would like to add a “Help” screen.

First of all, let’s create the new Screen to which we will navigate.

At the top of the screen, we have the “Insert” Ribbon and you will be able to select “New Screen”.

Let’s select a blank screen and once created, you can go to the new screen from the Tree View.

I’d suggest at this point, you rename the screen to something that makes sense. In this case, I will rename it to “HelpScreen”.

Now let’s create an icon that will be able to navigate towards the new screen.

Go back to your “Browse” screen and click on the Insert Ribbon. There are many other options for inserting controls, however let’s select an “Icon”.

You will likely want to adjust the Icon, colour and size to match the other “Icons”. In this case, let’s change the colour to white, shrink the size and change the position to match the other icons. You can also copy an existing icon and adjust and rename as required,

Now, you can’t click on the icon as it is, so we need to make the icon navigate to the “Help” Screen. To do this, we need to assign an action. At the top menu, click on “Action”, then “Navigate” and select the required screen and Transition effects. Once we have completed this, you will notice that a formula has been applied against the “OnSelect” property. This shows the function Navigate with the values of the screen and the transition effect.

Once the Navigate action has been assigned, you can now hold down “Alt” and click on the icon to navigate to our Help Screen.

In the Help Screen, we need a way to get back to the main screen, so to do this you can add a button or you can add an Icon using the back or home symbol.

In the same way that we applied the Navigate action for the Help Screen button, you can easily click on the icon, Action, Navigate and select the Home Screen.

The Help Screen is blank, so let’s start filling it in with some Text. To add text, you can either click on Insert Ribbon as previously shown, or you can use the + symbol on the left. Let’s click Text Lable and we can edit the text.

Other useful functions include

  • Reorder – To change the layering of the controls
  • Align – To move the control alignment within the screen e.g. left, right, center
  • Grouping – To group similar items to help moving or applying certain formulas and logic.

Now that our screen has some details and our home button is working, let’s click back through to our home screen.

Navigating – Formula Bar

The formula bar is located at the top of the screen and allows you to edit certain properties after clicking on a “Control”. An example is by clicking on something like this text and updating the details directly in the formula bar. You can select the various properties by using the dropdown menu on the left of the formula bar.

If you are familiar with Excel, the formula bar and formulas themselves are very similar.

For existing buttons, you can use the formula bar to understand the logic behind how these buttons have been defined.

You can also click through the formula symbol to see formulas that are available for use or for more information on each formula, you can click through to “Learn More” for an external guidance page.

Navigating – Navigation Bar

You now should have a fairly good view over the basics of the Studio when editing an application

There are a few additional areas of the studio that will be of use. On the left hand side, we can expand the navigation bar and see what each symbol means. We have gone through “Tree View” and “Insert”. The next section of importance is the “Data” view and this will show all the connections that your application has. As we only have the one SharePoint list, this is shown here. You can use this to “Refresh” data if the underlying data has changed and the Application has not automatically refreshed. If you have uploaded Media, then you can see the overall media in the application here.

Saving

To make sure that you don’t lose your application, let’s go back to Save and save a version. Once you have saved initially, Power Apps automatically saves. However, you might want to save at certain points to make sure you don’t lose anything.

Share

Now we have saved, we can go and Share the application.

In order for users to be able to use the shared application, you must share the underlying data with them.

In this example we used SharePoint and so users must have access to the underlying list data in SharePoint.

You can also access the application via the listed direct link.

Conclusion

If you found this video useful, make sure you check out other videos and subscribe to my YouTube channel.

Feel free to leave a comment if you are interested in seeing something specific covered in a future video.