Design A Survey In Powerapp App Designer

Introduction

With Office 365 Microsoft have been promoting the empowerment of an organisation's staff – you can work in your way with Office 365 – from anywhere, at anytime, on any device. Part of this has been the introduction of three applications to the fold to help users get more from Office 365 – these are:

PowerAutomate

(formally "Flow") – this allows users to create automated workflows such that outputs from one application act as inputs or triggers to another application.

PowerBI

(from Business Intellegence) – allowing the user to create easy to understand visualizations of any data set that PowerBI can use as an input

PowerApps

A visual application development tool designed for non-programmers to use to build apps for smart phones and tablets.

These three are designed to enable non-ICT non-programmers to complete activities that were previously only possible for highly technical ICT staff or programmers. They do this by making tasks that were traditionally coding orientated far more visually driven.

In the past I've used PowerAutomate – when it was Flow – to automate the scheduled sending of an email, and the population of results from a forms survey into a sharepoint list. I've also used PowerBI to view statistics around an organisations virtual machines and SQL databases. But I've never had reason before to use PowerApps.

The Challenge

I was curious how PowerApps worked though an how easy it would be to create a PowerApps' App – so I set myself the challenge – could I create an App in PowerApps that showed the user a video and then presented them with a survey to complete based on the video. Ideally the App would also have an introduction screen, and a thankyou screen after the survey had been completed.

I managed to achieve all this in about 3-4 hours which was quite impressive. I'm sure if I'd understood how it worked initially I'd have managed it a lot quicker too.

Practical Uses

You might be wondering how this type of application can help – what problems does it solve? Think about staff induction and training for a moment – lets suppose you need all employees to watch a video introducing the business maybe, or talking about the business approach to racism, or maybe you want to teach staff not to respond to fishing emails, after they have done this you want them to complete a survey or quiz about what they've seen to ensure they have understood the content. If you want this to be accessible to your staff on mobile devices you could use PowerApps to deliver this.

Accessing Power Apps

Power Apps is accessed in Office 365 from the apps list on the main page:

PowerApps is accessed from the Office 365 main portal window.

When you select the Power Apps Icon it takes you to the Power Apps web application:

Once in the Power Apps application you have a number of possible options

Once there you have a number of options –

Start from data – start building an application based on the data you want to use
Make your own app – start building an canvas app or model-driven app or portal app from nothing.
Learning for every level – training in how to use Power Apps
Your apps – this isn't in my screenshot but below the bottom of it and lists the apps I've created

Additionally, on the left there is a navigation bar which provides more formal links to the same destinations.

Terminology

I spent the first few minutes wondering whether I wanted a canvas app, model-driven app or a portal app and trying to understand what the difference was between these options. Turns out that there are only two types of app, whilst portal is more of a custom website.

Canvas App: drag and drop items onto a canvas and then format the objects to achieve what you want.
Model Driven App: select your data and how you want it modelled and PowerApps worries about the rest.

What's the difference between them? If you are more worried about how it looks – then use a Canvas app, if you are more worried about the data structure – then use a model driven app.

I opted for a canvas app.

Getting Started

There are several ways to start building an app – but they really amount to whether you want to start from nothing or a template. I decided to start from nothing so selected the "Canvas app from blank" option:

Selecting this brings up an initial configuration screen:

The PowerApps initial configuration screen

There are two options here – give the application a name and choose whether you want the default format (i.e. the format in which you will design the layout) to be for a tablet or a phone.

I called my app "Training Video" and chose the "tablet" format then selected the "Create" button.

You are then presented with another suggestion form:

At this menu I really wasn't sure what I wanted so I selected "Skip" and this drops you into the PowerApps design screen:

This screen is quite complicated and took me a while to understand it – if you are familiar with a graphical DVD menu creation tool its quite similar to how those work. On the left you have a tree view of your app with objects grouped based on the screen they appear on (the picture below is a jump ahead – it shows what I created).

The Power Apps design screen navigation bar

You can see that my application has three screens, the first screen contains an icon used for navigation and a Microsoft Stream video, the second screen contains an icon used for navigation and a Microsoft Forms Pro survey, whilst the third contains an image, some text, and a button to exit the application.

If you select the horizontal bars on the left shown in a blue square (added by me) the icons expand to include the explanatory text:

Menu icons and words in Power Apps Design Window

These icons / words are pretty simple –

Tree View we've already covered
Insert adds things to the current screen
Data Sources allows you to tie other applications and their data to this app
Media allows you to add images and videos for use in the app – these cannot total more than 200MB and no one file can be more than 64MB.
Advanced Tools offers "Monitor" which is in preview and monitors activity for the app, whilst "Tests" is experimental and designed to validate the app works as you expect it to.

If you insert an image from the insert menu it will be added to the Media tab, if you insert something that requires a data source then the data source you use will be added automatically to the Data Sources tab.

I created three screens for my application "New Screen" button at the top left and renamed the screens "Video Screen", "Survey Screen" and "Thankyou Screen".

Adding and Configuring Objects

The First Screen

On my first screen I added a Microsoft Stream video. To do this you select the "+" tab and then expand the "Media" group and select the "Microsoft Stream" icon

This inserts a un-configured stream video box into the application – it will be selected as the latest item and you will see the top bar will have the parameter "StreamUrl" populated and is waiting for you to provide a value:

The top bar in Power Apps - its a little like the Excel formula bar!

You will also see on the right the properties box with all the configurable parameters in – all these parameters are also available in the top bar by selecting the drop down arrow.

Power Apps designer- the parameters box for a Microsoft Stream video

I resized the video to largely fill the screen and then configured it with the URL of my StreamVideo:

Inserting a Stream Video into a Power Apps application

My next challenge was to work out how to add a button that moved me to the next screen. I initially thought that the "button" option was the best for navigation but after some investigation I found that the button option was a pretty boring rectangle where I could change its colour and size and function but not much else. I decided in the end to insert an icon and to choose an icon that looked like it meant "next" or "move on".

To do this you select the expand icons button in the top bar:

Power Apps designer - top bar - insert an icon

This opens a list of possible icons as drop down, I selected the "Next" icon and then moved it to the bottom right corner of the screen. To configure what the icon does I needed to use the icon properties – advanced screen and set the action to:

Navigate('Survey Screen', ScreenTransition.Fade)

This tells the icon that when its selected it should cause the app to move to the "Survey Screen" using the Screen transition type "Fade".

Power Apps - setting the advanced configuration for a icon to navigate to another screen in the app.

This completed my first screen.

The first screen in my app was completed

The Second Screen

My second screen was similar, I used another icon for navigation – the only difference was around the Forms Pro integration. It should be noted that Office 365 E3 contains "Forms" but not "Forms Pro" but that PowerApps only integrates (as far as I could tell) into Forms Pro. I imagine that if you don't have Forms Pro there are other ways of achieving the same end – for example you could create a form natively in PowerApps that integrates into a Sharepoint list. In any event I created a form in Forms Pro. To connect the Forms Pro Survey to the Powerapp App you need this time to use the forms unique identifier not the URL as we did for the Streams video.

For example for my form the URL is (actual ID is replaced)

https://forms.office.com/ FormsPro/Pages/DesignPage.aspx? experienceType=base# FormId=123456789 abcdefghijklmnopqrstuvwxyz 123456790

and you only want the bit after FormId=

Configuring the survey ID for a Forms Pro form.

This completed my second screen.

The Second Screen of my PowerApps app was created

The Third Screen

For my third screen I inserted a picture to fill the screen added the word "Thankyou" and inserted a button. To tell the application to close itself you set the "OnSelect" value to "Exit()".