Beginners Guide to PowerApps

Connor Deasey

0 comments

Citizen development, Power Apps, what is all the fuss about?

Citizen development is the hottest term at the moment in the Gartner dictionary, but what does it mean and what is a citizen developer? Gartner describes a citizen developer as the following :

“A citizen developer is a user who creates new business applications for consumption by others using development and runtime environments sanctioned by corporate IT.”

In short, this means that “citizen development” refers to non-developers who have the skills to create business applications, tools or processes.

Is citizen development a good thing?

Yes. Who else other than the business owner himself, knows enough about the requirements to build the business app he/she wants to use best? No longer thinking about who I should hire to make my Power Apps, how much will it cost or whether the developer will understand our needs.

To help get us started, here’s an example of an app in Power Apps:

In the past business users who wanted to create an application to ease their daily tasks didn’t have the tools and ended up creating complex Excel spreadsheets with macro’s, advanced formulas, and even sometimes some low-end code. These spreadsheets were often then passed on to the IT department to be maintained and supported going forwards.

Modern companies want to have a grip on the tools their employees use and are happy

that citizen development is now a ‘thing’.

Because of this reason, power users of Power Apps offer a much greater value to their company. Power Apps is part of Office 365 and allows power users to create business applications in as little as a couple of hours. Don’t waste any time and use this article to start learning the basics of Power Apps.

How do I start developing a Power App?

Power Apps development can either be completed in Power Apps Studio, which is a downloadable client application or directly inside your browser.

Previously, Power Apps Studio had much more functionality, however, at the moment the browser has caught up and has virtually the same features. The browser version has also become much faster to use than ever before.

Start with a Power Apps Template…

My recommendation, if you’re just starting, is to create your first Power App from one of the templates included in the product.

There is no need to worry for hours about how your Power App is going to look. Just click on the “create” button (on the Power Apps start screen) and pick a template to use in your business environment. Even if there is no need for you to use this business application, it can be an excellent way to learn about what’s possible and share ideas with your team.

Branding and building for mobile devices

You will notice that some applications in the templates section have multiple design modes. In the example of the Estimator Pro Power App, there are two design modes: the phone factor and the tablet factor.

A phone factor doesn’t mean your Power App cannot be displayed on a PC or tablet; it means it will work optimally for a phone (having a small rectangular design).

It is up to the Power App creator to choose the design mode, the orientation of the Power App (landscape or portrait) and also consider whether the aspect ratio and orientation should be locked.

I am sure you will agree, this is a great start! In just a few clicks it gives you, the creator, a working Power App. However, keep in mind that this is only the start of your Power App creation. The branding and responsiveness factors are up to you.

Next to the “orientation” option, the user can also choose the required “size” of the target device.

When branding your Power Apps, I recommend that you have a consistent brand and colour. Be sure to set your colour only once (for example on the top bar of the first screen). On the other screens, don’t copy this colour.

You should copy the attribute (“fill”) from the first screen’s top bar. Using one value for

your colour is how you maintain consistent branding throughout your Power App.

In the screenshot above, I have set my fill to a colour, then referenced it as shown below:

A tour of the Power Apps user interface

The Power Apps interface looks as follows, where each section has its purposes.

The first section (top) is the simplest to describe because this is the most familiar one: the ribbon. Microsoft introduced it in Office 2007, and since then it has never left. Now it

is also available in the Power Apps designer and allows you to achieve the same functionality that you are used to in Excel or Word. A few examples of what you can do are underlining text, aligning content and setting formulas on your objects (in comparison to formulas on cells in Excel).

If you are used to Excel, there will be a mind-shift you will have to go through when creating mobile applications instead of creating excel worksheets. The most significant difference is that you will have to start thinking in “screens”. These will be shown in the second section (bottom-left). The first screen in this section will be your start screen with subsequent screens displayed in order below. To change the order of these screens, simply drag them up or down to your preferred location, think of it as similar to the slide sorter in PowerPoint.

In the third section (bottom-middle), your Power App screens are displayed. You can use this section to select your controls (and afterwards set formulas on these) or to simply drag objects to another location.

In the fourth section (bottom-right), you can define the attributes for the selected control, like in the formula bar. You will see there is quite some overlap between these two sections. Some attributes can only be selected in this section though, for example connecting to your data and picking the correct data layout template.

“When holding the alt key, your Power App is not in developer mode anymore, but in run- mode. Allowing you to test the app without the need of pressing the play button at the top right.”

Power Apps Tip

Formulas and Attributes

Power Apps contain many formulas and attributes. Formulas are always coupled to an attribute; attributes are dependent on the object you have selected. For example, a screen will have attributes such as BackgroundImage, Fill, ImagePosition, LoadingSpinner and LoadingSpinnerColor allowing you to set some design preferences. It will also have some start handlers like OnHidden, OnStart and OnVisible allowing you to execute some actions like refreshing data sources etc.

Other objects will have different attributes like OnSelect where you can define what should happen when you click the object.

Objects that allow you to show data will have the attribute Items where you can define your correct data source.

Top 10 Formulas

There are around 150 formulas that you can use with Power Apps, details of which can all be found on Microsoft’s documentation site. I asked our Power Apps group on Facebook which ones they used most frequently and listed them below.

Formula Description
If Determines if an expression evaluates to true. If it is then a specified value is used, otherwise, a default value is returned.
SortByColumns Allows you to sort a table by one or more columns.
Sort Sorts a table based on a given formula and sort order.
SubmitForm Saves the contents for a form to the underlying data source.
Filter Allows you to filter a set of records based on a given formula.
Search Allows you to search for a set of records based on a given search query.
UpdateContext Allows you to store any useful value in a context variable. Scoped to the Power Apps Screen.
Set Similar to UpdateContext only this time the variables stored are globally scoped.
Lookup Finds the first row in a table matching a specified formula. Returns a single record.
ClearCollect Clears all records from a collection and then adds a different set of records to the same collection.
UpdateIf Update a value if a condition is true.

Connecting Power Apps to External Data

Power Apps has great support to connect to data from other systems. There are already more than 180 connectors available. Examples of the most common ones are shown in the screenshot below:

Connecting to on-premises data

It’s also possible to leverage data that’s stored in your on-premises data stores. This is achieved by using a gateway. To set up a gateway you will need to use a data source from this list:

  • SQL Server
  • SharePoint
  • Oracle
  • Informix
  • Filesystem
  • DB2

The process for configuring and managing your gateway can be found in this article.

Connecting to data in the Common Data Service

Microsoft Power Apps can utilise data via a service known as the Common Data Service. In Microsoft’s words – “The Common Data Service (CDS) for Apps lets you securely store and manage data that are used by business applications. Data within CDS for Apps is stored within a set of entities. An entity is a set of records used to store data, similar to how a table stores data within a database. “

The poster below gives an overview of which entities currently exist within the common data model.

Do more in Power Apps with Microsoft Flow

Power Apps allows you to create mobile applications easily and quickly. Along with your mobile application, you will probably also need some automation to be done in the background, like for example, sending e-mails when a user clicks on a reservation button. Simple tasks like this can easily be done in Power Apps, however, when more advanced logic is needed, Microsoft Flow offers more flexibility to handle this.

Power Apps integrates very well with Flow, and they make their connection via the Power Apps and Flow buttons, each one allowing the other to be started. You can even use MS Flow to handle some Power Apps maintenance and governance.

Power Apps Mobile App

To run a Power App on your mobile device simply install the Power Apps application via the Google Play Store (for Android devices) or Apple App Store (for Apple devices). The first time you start the Power Apps app, it will ask you to sign in to your organizational account. When this is done, all your company apps will be displayed here (at least all the ones that are shared with you). If you have a couple of apps that you use frequently you can add them to your home screen (pulling them out of the Power App app) – however, this functionality only works on Android at this moment.

The screenshots below are sourced on the Google Play store (provided by Microsoft) and give a great example of what a Power App looks like on a mobile device.

If you don’t want to install another app, then don’t worry, you can access them via your browser.

Going Offline with Power Apps

One of the major use cases for Power Apps is to allow workers to use apps on the road. One common scenario for remote workers (such as a travelling salesman) is that they may not always be connected to the internet.

You will be pleased to know that Power Apps does offer some support for working ‘offline’. To build support in our Power App to handle offline data can be achieved by utilising a few useful expressions as follows:

Expression Description
Connection.Connected Allows us to test if our Power App is connected to the data source. If it’s isn’t then we need to save and query the data from the local storage (on the mobile device).
Clear This will remove records from your collection.
Collect Allows you to store records in the local cache if we have no connection.
LoadData Allows you to load data into a collection locally.
SaveData Allows you to save data to a collection locally.
Patch Updates/creates a record in the data source. Ideal if you have a connection.

As you can see, offline support can be quite a complex subject if you’re not a developer by trade, however, once you’ve grasped the concepts it’s quite straightforward.

How to support multiple languages

It is entirely possible to create a Power App that renders text in the language of the logged-on user. Note: If you think your Power App may need to be multi-lingual in the future then it’s wise to provide support from day 1. Delaying it will result in you having to refactor every label, text, tooltip and message which can be a painful job.

How to return the language for the current user?

Before we do anything, we need to retrieve the user’s language. The language can be determined by calling the “language” function. “Language()” returns the “language”, “script” and “region” for the current user as a tag, e.g. “en-GB” would return for someone living in Great Britain.

Change all of your hard-coded text to the current language

The golden rule when adding support for multiple languages in your Power App is not to hard code text. Instead, you should use a function that looks up the language from a local dataset that stores the key name and string.

Your dataset can be imported from something like Excel and would be in this format.

Now that we know which language the user needs and have a language dictionary, all we need to do is perform a lookup like this (note, you will more often than not store the user’s language somewhere locally):

LookUp(LanguageDict, Key = “SaveTooltip” And Language = “en”)

Publishing & Sharing your Power App

When your Power App is ready, give it a good name, icon and description and then publish it. After publishing don’t forget to share it with the correct users so they can access it from their Power Apps app on their mobile device.

Power Apps also has versioning enabled, which means users will only be able to view and access published versions. This means you can make changes to your app in the background without affecting their use of the tool. For example, you could work your way up from version 1.0 to version 1.7 before publishing this to version 2.0. Users would continue to use version 1.0 of the app until version 2.0 was made available to them.

Licensing of Power Apps

The Licensing model for Microsoft Power Apps changed from 1st October 2019, this change was intended to simplify pricing, however, when first announced it, it did seem to be very confusing and complex. Hopefully, this section can help you understand the model.

The license models for Power Apps are effectively broken down into five key areas:

  • Seeded Apps
  • Per User Licenses
  • Per App Licenses
  • Portal Licenses
  • AI Builder Licenses

The easiest place to start is Seeded Apps.

Seeded Apps

What was this before 1st October? This was previously referred to as Power Apps for Office 365 or Dynamics 365, where a user could create an app with the intention of extending the functionality of Office 365. It had a number of connectors available to it interacting primarily with other Office 365 services and was all paid for as part of your standard subscription

What is it after 1st October? Following the changes, not much really changes with this. It is still part of your Office 365 or Dynamics 365 licensing, it still allows you to create apps to extend your exploitation of Office 365, and it still has a number of standard connectors that allow you to interact with other services.

The key differences are that some of the Pre-Change connectors such as Azure SQL, Azure DevOps, Azure Automation (NOOOOOOOOOOO!!!!!) are going to become premium connectors. Likewise, some of the Dynamics 365 connectors will also move to premium.

Per User Licences

What was this before 1st October? This was previously split into two levels, known as Plan 1 and Plan 2. Plan 1 gave you access to the Premium Connectors, the Data Gateway and the ability to create Custom Connectors. Plan 2 gave you the Common Data Service and access to the suite of management tools. Regardless of the plan, if an app was created using premium functionality, then both the creator and the user of the app would need the relevant license.

What is it after 1st October? The simplest way to look at this is that the Per User plan is Plan 1 and Plan 2 consolidated into a single plan. A user with this license assigned to them has the full capability of Power Apps at their fingertips: all of the connectors, the management tools, CDS, everything!

But given that the Per User Plan will cost $40 per user, per month, this can quickly become quite expensive for smaller organisations. So, for this reason, Per-App Licenses have been introduced.

Per App Licences

What was this before 1st October? This did not exist previously.

What is it after 1st October? Per-app licenses allow us to apply licenses to individual apps rather than to users. Even with the Per-App plan, you still pay per user, however, because you’re limiting the number of apps that you are building with this SKU, it is a quarter of the price. But you still get the full capabilities of Power Apps to use within your apps. You are looking at $10 per user, per app, per month.

One key change from the original announcement is that there is no longer a minimum number of purchases required.

The key consideration for this license option is to understand what constitutes an “App”. An App is comprised of 2 Power Apps and a Portal. This could be a combination of 2 canvas apps, 2 model-driven apps, or 1 of each.

So, if you’re only looking at deploying a small number of apps, this option may become a more cost-effective approach to paying for the full-blown licenses for each user.

As part of the app license, you get a Portal, however, they can also be licensed individually.

Portal Licences

What was this before 1st October? Power Apps Portals are effectively the successor to Dynamics 365 Portals.

What is it after 1st October? Power Apps Portals differ slightly from Dynamics Portals in that they are no longer paid for upfront, they are paid for on a usage basis instead. The usage costs break down into three types:

  • Authenticated External User
  • Unauthenticated External User
  • Internal User

Authenticated External Users

Authenticated users are charged on a per-login, per day basis. If a user logs in and then logs in again later in the day, or on another device within the same 24-hour period, then it will only count as one log in. The cost per login will depend on the tier which you purchase for your portal:

  • 100 logins = $200
  • 1000 logins = £1000
  • 5000 logins = $3500

As well as having the ability to have authenticated users using your Power Apps Portal, you can also have unauthenticated users.

Unauthenticated External Users

Unauthenticated users are those who are simply viewing a page and don’t need to log

in. These users have their own licensing model which is purely based on page views.

This is simply 100,000 page views, for $100 per month.

Internal Users

Internal users need to be licensed in order to be users of the Power Apps Portal. This is not covered by the Office 365 and Dynamics 365 standard licensing, it needs to have one of the paid plans associated with the user, whether that is a Per User, Per-App or a Dynamics 365 Enterprise

AI Builder Licenses

The final aspect just to have a look at is with regards to the AI Build Licensing. Whilst this in preview, the service is available to use, however, once it goes GA it will be subject to monthly charges which will buy a tenant wide license. So, whereas the other licenses have all been user or app-specific this one is tenancy specific.

For $500 per month, you will have 1 million service credits which can be used for processes using the Azure AI services. It’s not quite as simple as being 1 credit per transaction. Instead, it will depend on the load that is pushed through the Azure services

e.g. a 5-page document being processed will consume less of the credits compared to a 50-page document.

Transition Period to New Licence Model

One thing that should be pointed out is that there is a period of transition, so things

aren’t just going to stop working on the 1st of October 2019. These are the two scenarios:

Scenario 1: I already have a Power App which uses a connector being moved to the premium

In this scenario, you have quite a long grandfather rights period in which to either re-engineer your Power App to use an alternative technology or put in the correct level of licensing. You have until the 1st October 2024, to achieve this (by which point we’ll have had several more changes to the licensing!).

Scenario 2: I have a Plan 1 or Plan 2 which extends beyond the 1st October 2019

If you find yourself in this scenario, then any Power Apps that you have created prior to the 1st of October will fall into what was described in Scenario 1.

Any Power Apps that are created AFTER the 1st October with the listed connectors will still work, however, you will have until either the 1st October 2020 or until your Plan 1 or 2 is due for renewal, in order to transition to a new solution or new plan.

What else?

The final thing to be aware of is that there will be limits on the number of API calls made in a 24 hour period. This, in my opinion, is something which is more visible within Flow as we used to talk about the number of Flow runs, but it’s worth calling out the limits that will apply to Power Apps:

  • Users on Seeded licenses: 2000 API requests per 24 hours
  • Users on a Per User Plan: 5000 API requests per 24 hours

Full details of the limits and allocations can be found here: – Microsoft: Power Platform Requests and Limits

Summary

All in all, although it didn’t seem it at first, the new model is simpler than it used to be. The introduction of the Per-App plan makes access to the premium features much more affordable for a lot of companies who aren’t heavily invested in creating functionality in the Power Platform but still want to use the full capabilities of the platform in small pockets.

The following image gives a summary of Power Apps Licensing:

For up to date details or more information on Power Apps pricing go here

https://Power Apps.microsoft.com/en-us/pricing/.

Part 2: Tutorials

Tutorial #1 – How to search and filter data

This tutorial explores the default search available when you choose the “Start from data” template. Using this template, it’s possible to connect to a SharePoint List (amongst others) and have a “Browse”, “Detail” and “Edit” built for you.

When the three-screen Power App is created (using a SharePoint list as the data source), it also includes a search box allowing us to perform a straightforward search.

In the screenshot below, you may notice the following:

  1. Left – A default search screen showing all results.
  2. Middle – A search results screen filtered requesting results beginning with “Chariot”
  3. Right – A search results screen that returns no results based on the word “repair” (more on this later).

The Power Apps control that allows us to browse the list items, is called the “Gallery”.

The order of the sort (ascending/descending) is determined by the variable “SortDescending1” (see below) which toggles between true and false by clicking the sort icon. Changing the variable instantly changes the gallery, no refresh is required.

By default, the Gallery has a data property called “Items” which includes a “SortByColumns” function allowing us to sort the data. By default, this will sort by the Title. In the code example above, I show you how to sort by the column named “ExpenseDate”.

Now let’s try to improve the search (to filter on “repair”)

To improve the search, we need to examine the “Filter” function being used above. This function takes at least 2 parameters, firstly “Expenses”, which is the field data returned from the SharePoint list. The 2nd parameter allows us to set a new filter. The filter we used in our original example was “StartsWith” (which explains why “repair” gave no rows). No rows had a “Title” starting with “Repair”.

There are two obvious alternative options. The first is to swap “StartsWith” for the “in” operative.

SortByColumns(Filter(Expenses, TextSearchBox1.Text in Title),"ExpenseDate", If(SortDescending1, Descending, Ascending))

Changing to use the “in” operative works as expected. We can now search for “Repair” and get all the matching repairs. The filter also only searches the “Title” column. Hence, if we searched for “Travel” we would return no results. However, we can combine different conditions using the or operative which is denoted as an “||”.

SortByColumns( Filter(Expenses,TextSearchBox1.Text in Title || TextSearchBox1.Text in Category),"ExpenseDate", If(SortDescending1, Descending, Ascending))

Another way to solve our problem is to use the “Search” formula which allows multiple columns to be specified and offers more flexibility.

SortByColumns( Search(Expenses, TextSearchBox1.Text, "Title","Category"),"ExpenseDate", If(SortDescending1, Descending, Ascending))

Dealing with the warnings in the editor

You will notice, as soon as you change the function to use “Search” or “In” you will see a blue wavy line underparts of the code along with a warning triangle.

If you click on the triangle or the blue wavy line you will get a warning message concerning “delegation”. The message is telling us that large data sets might not work

correctly. By default, Power Apps defines a large record set as being 500 rows. This effectively means that if your search returns 501 rows, none of the rows will be returned. This is for performance reasons as you don’t want to return 10000s of rows to the client, especially on a mobile connection.

Here’s the warning message that you will see:

The example below illustrates the difference between a delegated and non-delegated search:

What is Delegation?

Now that we’ve seen the effects of ‘Delegation’ in Power Apps, let’s examine what it means. Delegation refers to the process where the filter or sort is sent to the backend data source and then it’s the responsibility of the underlying data source to query the data and return the filtered/sorted data. The impact of this means that less data is sent to the Power App and the data source which was built to filter and sort takes on the burden of this often expensive processing.

One thing to note, different data sources have different rules regarding which sort and filters can be delegated. This list of rules is constantly expanding and can be found at the following link: https://docs.microsoft.com/en-us/Power Apps/maker/canvas- apps/delegation-list

Scrolling down the list you will notice a list of “Top Level Functions” that can be delegated. It’s also pertinent to mention that SharePoint allows you to sort the results, but you cannot delegate the search. Whereas, SQL Server (as you’d expect) supports all delegable functions except the predicate – “StartsWith”.

Changing the default 500 row limit.

The default number of rows to be returned (via delegation) is 500. This can easily be changed by selecting the File ribbon tab and then selecting “App Settings” and finally “Advanced settings”.

However, you should be aware of the effect of increasing the limit. If you choose a number that’s too high, this can cause major performance issues.

Tutorial #2 – How to do conditional formatting

This tutorial will show you how to change the look of individual rows (in a Power Apps Gallery) based on logic you specify. The data is based on the theme of Queen Boadicea and managing her expenses within a SharePoint list.

The list below is a modern SharePoint custom list with a few text columns, a date column and a currency column.

Create an app from the SharePoint List

To create the example used in this tutorial, for speed, let’s create a standard Power Apps app by navigating to the list in SharePoint and selecting “Create an app”.

After a few moments, a default 3-screen Power App will be ready for use on your mobile device.

Before we begin, change the gallery layout to image, title, subtitle and body. Please also change the date to a format of “yyyy-mm-dd” using the “Text” function for the “Text” property of the expense date. As below:

To keep in with our ‘Celts’ theme let’s tweak the value to show the Amount field as GP and sort by the Expense Date.

Colouring rows based on a condition…

In this section, let’s set a colour for each row in our Gallery. We want the row to be displayed in green if they have been paid and red if not. Colours in Power Apps are specified using RGBA functions that take 4 parameters (red, green, blue and an alpha

channel, which specifies the opacity of the colour between 0 and 1). The colour numbers are 0 to 255.

Step 1: Select the gallery object and in the property drop-down select TemplateFill.

Step 2: In the formula bar tweak the colour to be bright Red and change the opacity to

  1. This changes every row to be bright red. Tweaking the red value or changing the opacity will change the colour. Bright red would be “RGBA(255,0,0,1)

Step 3: Now we will add an If function into the formula to change this. The If function is just the same as Excel’s; if, the test, what to do if it is true, what to do if it is false. In our test, if the Paid column, which is a yes / no column is “true”, i.e. yes. In other words, the list item will display green if it has been paid and red if it hasn’t been paid.

Step 4: Now only unpaid rows are coloured red. If we want to add another colour to represent a different status, e.g. amber to show if an expense is recent, then we need to

nest another “if” statement inside the first one. If the expense date plus 30 is greater than today, i.e. the date was in the last 30 days then it will be coloured amber for an upcoming payment.

If you prefer the functions laid out then click Format text.

Changing the picture based on a condition …

The list of expenses includes a category which is either Personal, Weapon or Travel. I want these to be shown using small pictures. The first step is to load the media.

Step 1: On the View ribbon, click Media and make sure you have Images selected on the left.

Step 2: In the top right click Browse and select your images. You can use the Ctrl key to select multiple images from one folder.

Step 3: Click Open to load the images into your app. Note you are limited to 200 MB of media storage.

Step 4: Click on the image in the top gallery section and select the Image property. It currently is set to SampleImage.

Step 5: To replace the images we’ll use the Switch function. It takes a single value and

then pairs of matching values and the result.

The list should now show images based on the category as below:

Hiding a value based on a condition …

The final section in this tutorial is perhaps the easiest idea. Hide or show an icon based on a simple logic test. In this section, we will show an icon if the value is over 30.

Step 1: Select the “BrowseGallery1” and click the edit icon to select one row of the gallery.

Step 2: From the Insert ribbon, select an icon. The position where you want it to be in the row. One will be shown on every row.

Step 3: Select the “visible” property, it will be set to “true”.

Step 4: As the visibility is just true or false it can be a test and doesn’t need an if or switch

function.

By applying the formula above you will now notice that there are only rows visible where the value is greater than 30 gp

Tutorial #3: Use scrolling Text in Power Apps

Now we will see how to use a timer control along with a touch of maths to scroll a text message across the screen. It’s a very simple example but illustrates some basic animation that can be used in many applications.

First, add a simple message to a new Power App

Before we start looking at timers we need to add the message which will scroll to the Power App.

Step 1: In the Power App, add a label that contains your message formatted how you want.

Step 2: Resize the label so that it fits the text exactly.

Step 3: Set the “X” value of the label to a variable, e.g. “vvMessageX”.

The UI will show a red cross error, but that’s okay it just means the variable

“vvMessageX” hasn’t been set up yet. We will do that in the timer.

Setting up the timer

Timers in Power Apps allow you to have some code run after a period of time and repeat this forever or until stopped. You get to specify when it starts, the period of time, and what actions it does every time. We will start by just increasing the variable vvMessageX every half second.

Step 1: On the Insert ribbon, from the controls drop down, add a timer to your app. It can be hidden later but for now, it looks like a button.

Step 2: The duration of the timer is in milliseconds, this means 1000 = 1 second. Change the duration to be 500 (half second) and Repeat to be on.

Step 3: A timer control has a property “OnTimerEnd”, this happens at the end of the duration and repeats because we turned on repeat. Change the property to just add “10” to the variable “vvMessageX”. For this, we are going to use “UPDATECONTEXT”, which means “vvMessageX” is a local variable to this screen.

UpdateContext( {vvMessageX: vvMessageX + 10} )

Step 4: Preview the app, click the timer and your message will slowly jump across the screen. We need to speed that up and if you wait long enough your message will vanish off the screen never to be seen again.

Step 5: So, to make the message loop around we need to increase until it reaches the screen width and then reset back to the start position. Update the time OnTimerEnd property to include an IF statement inside the JSON statement.

If the variable gets larger than the screen width, i.e. has vanished, then reset it to be off to the left of the screen so it can re-enter, i.e. minus the width of the message label.

Step 6: Now you need to adjust the duration of the timer and how much you increment the variable to balance the speed and smoothness of the movement. After a little playing around with numbers, I got the duration down to 1ms and increased by 5.

Finishing touches

At this point, the timer should work when you click on it. Now let’s hide the timer and make it start automatically. To do this, select the timer and change “Auto start” to “true” and “Visible” to “false”.

Preview and test your app and you should see the scrolling text.

Tutorial #4: Creating Tabbed Forms

Tabbed forms are ideal when a form has more controls than screen space. It really helps to use a tabbed form to group items and keep the visible size of your forms manageable. Unfortunately, Power Apps doesn’t ship with a tabbed form so we need to create one using a gallery and some groups of controls.

The steps to create this form are:

  • Create a collection of tab names
  • Create a gallery
  • Create a group for each tab with a visible property

Create a collection

For this form, I’m going to hard-code the tab names into a collection. This code needs to be in the OnStart of the app and for testing purposes in a button as well. The collection just needs to contain the tab names.

ClearCollect(ccTabNames, {Tab:"Project"}, {Tab:"Tasks"}, {Tab:"Costs"})

This creates a collection with three rows of data.

Build a Gallery

A gallery will create the tabs, each tab will be a label that changes colour based on which gallery item is selected.

Step 1: Insert a blank horizontal gallery.

Step 2: Make the data the collection “ccTabNames” created in the last part.

Step 3: Update the gallery to have the following properties.

Gallery Name Gallery Tabs
Width GalleryTabs.TemplateWidth * CountRows(GalleryTabs.AllItems)
Height 40
Template Size 150
Padding 0

Step 4: Add a label to the gallery template and update to have the following properties.

Label Name Tab Name
Text ThisItem.Tab
Height Parent.TemplateHeight
Width Parent,TempalteWIdth – 3
Fill If(ThisItem.InSelected, Blue, Lightblue)
Colour White

Step 5: Change the “OnSelect” of the label to update a variable, “vvTabSelected”, to the tab value.

Test your tabs in preview mode. You will need to click the button to run the code created in the previous section.

View the variables to check the tab value is being saved.”

Power Apps Tip

Groups of Controls

The last stage is to create the groups of controls associated with each tab, they will be surrounded by a rectangle with a white fill and a coloured border that matches the selected tab.

Step 1: Insert a rectangle from the Icons drop down and modify the properties. In this example, the rectangle hasn’t yet been renamed.

Property Value
X GalleryTabs.X+Rectangle1.BorderThickness/2
Y GalleryTabs.Y+GalleryTabs.Height
Width 800 or whatever fits your app
Height 500 or whatever fits your app
Fill White
Border Color Blue

Step 2: Add the controls for that tab.

Step 3: Select the rectangle and all the controls for the tab and group them together. Rename the group to match the tab, e.g. GroupProject.

Step 4: Select the group which will select all the items and change the visible property to vvTabSelected=”Project” .

  1. Repeat steps 1 – 4 for each tab required and remember to test as you go.

Tutorial #5: Using a Google Map in Power Apps

Maps are awesome and adding a map to an app (even a static one), adds that special touch. This post is an introduction to adding a Static Google map to a Power App.

Create your Google API Key

In order to connect to Google and request a static map image, you will need an API key. This is much simpler than it sounds however, Google really helps.

Visit https://developers.google.com/maps/documentation/maps-static/intro and scroll down to find the Get Started link. This will walk you through getting an API key. It will give you a key something similar to “AIzaPyCC6Jfzjo50meU9DRsf-duxS7_VfPmzc-s”.

Copy your key as you will need this later.

Adding a Static Google Map

For this demo app, I have created an Excel file for my data source (named “Locations”) containing a list of locations along their longitude and latitude. Shown below:

Step 1: Build an app and add your list of locations with longitude and latitude as a data source.

Step 2: Add a gallery with Locations as the data source.

Step 3: Add a button to your app to setup up some variables. These variables are the various parts of the URL needed to get the static image from Google. Add the following to the OnSelect property

UpdateContext({ vvHTTPStart:” https://maps.googleapis.com/maps/api/staticmap?” , vvKey: “YOUR-API- KEY”, vvMapZoom: 15, vvMapSize: “400×400” })

Step 4: The image we are going to show on the Power App comes from a URL. An example of the URL is:

https://maps.googleapis.com/maps/api/staticmap?key=YOUR-API- KEY&size=400×400&zoom=13&center=51.17909,-1.8284037&

We are going to store this URL in a variable vvMapAddress which will get updated by clicking on the gallery. So, change the OnSelect for the Gallery template to the following:

UpdateContext({ vvMapAddress: vvHTTPStart & “key=” & vvKey & “&zoom=” & vvMapZoom & “&size=” &vvMapSize & “&center=” & Gallery1.Selected.Longitude & “,” & Gallery1.Selected.Latitude })

Step 5: The final step is to add an image control from the Media drop-down on the Insert ribbon. Resize the image to match the vvMapSize, i.e. Width 400 and Height 400. Set the Image property to vvMapAddress.

Step 6: Preview the image, click the button to set up the variables and click on the gallery to select a location.

My Power Apps Tips

Hopefully, if you’ve read this far you will feel comfortable with the basics of Power Apps and realise the power they offer you. In this final section, we wanted to share some of the tips to make your life easier.

Sometimes your app is just not suitable to be a Power App!

Not every scenario asks for a Power App, let’s say you are a company with 1000 employees and you want to roll out a mobile application that is used 4 hours per day by half of your employees, your data is living on-premises as well as in the cloud and next to that it should work completely offline and should be shared with externals…

This scenario is not meant for a Power App, you do want to have a fully customizable application that is available to external persons, so you should go for a stand-alone app. Creating a stand-alone solution is likely to cost more to develop than a Power App, however, it will provide a more sustainable solution in the long term.

Don’t overcomplicate it!

It’s ok to put a lot of data connections in your Power App, this is one of the things it was designed for! However, don’t overcomplicate your functions and automation. If you do want to do some advanced logic and automate your business logic, don’t forget about MS Flow.

Write basic functionality and automation principles in Power Apps, however, from the moment you think something will take a bit more time, hand over the tasks to MS Flow. Power Apps and Flow were launched at the same time because they are complementary, so use them both!

Make use of Collections and Variables

When laying your data connections, always consider if it is necessary to have live data or if this can be cached. You will see that only a small percentage of your data has to be live, so why execute a whole bunch of queries to live data when caching is much more performant. You will want to look at the Collect functionality here.

Use the function ClearCollect(cachedDataSource, DataSource), from then on use cachedDataSource instead of DataSource. When you think your datasource should be updated, simply execute the function ClearCollect(cachedDataSource, DataSource) again.

Delegation, delegation, delegation

Power Apps doesn’t want to query thousands of records and perform filters on these records, this because of … that’s right, performance reasons. This is why you always have to think about delegable sources. By using the correct formulas, you can delegate the processing of data to the data source, instead of retrieving all your data over the network and then processing locally.

When delegation is not an issue, or you are 100% sure your data source won’t hold more than 500 records, you could consider forgetting about delegation for this specific data source. Power Apps allows you to increase the number of retrieving rows from 500 to 2000, however, don’t touch this number when this isn’t necessary.

For more info: https://docs.microsoft.com/en-us/Power Apps/maker/canvas- apps/delegation-overview

Power Apps are personal

When rolling out a Power App do not forget about correct permissions. Keep in mind that Power Apps is personal, this doesn’t mean they cannot be shared, this simply means that when a person starts up a Power App everything will run under his own account. This means all your Power App users will need to have access to the lists/libraries that are used, but also the office 365 or other connections that you will use.

So be careful with this! Do not roll out your Power App before validating this with some test users, because nothing is more annoying than launching your first Power App with errors saying: “There was a problem saving your change. The data source may be

invalid”. At the moment of writing, impersonating or elevated permissions are not possible, so do spend some time on getting your permission matrix right!

Name everything!

Your Power Apps can easily grow to have many controls. It’s important you define a convention and name everything so that it’s identifiable. So, no more “textBox1” and more “txtCustomerAddress”.

0000-00-00 00:00:00


Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}