Accessing your app through Microsoft Teams

Microsoft Teams is the central collaboration hub for users. It is cited as being the fastest growing product, in terms of user adoption, of all of the Microsoft products throughout its history. For Microsoft 365, Microsoft Teams provides a window to all of the productivity tools that your users need; therefore, it makes sense for you to allow your users to interact with your Power App without ever leaving Teams. This can now be achieved in two ways, firstly by adding your app as a tab in a channel, but also by adding an app to the rail on the left side of the screen.

As a brief introduction to Microsoft Teams, collaborative areas are broken down into high-level areas called Teams. Behind the scenes, Microsoft Teams creates a SharePoint site and an exchange mailbox to provide the key collaboration and communication tools that have made Microsoft Teams so successful. These teams are then broken down into sub-areas called channels, which allow you...

Using the mobile app

One of the biggest drivers for the adoption of Power Apps within organizations is the ability to create mobile apps without the need to pay large development fees. Power Apps, much like other areas of Microsoft 365, has its own dedicated app, which can be downloaded from the relevant app store. Both iOS and Android devices are fully supported, meaning that the reach your app can have can be vast.

The screenshots in this section have been taken using an iOS device:

Figure 4.20: A Power Apps app that has been installed on a mobile device

Once the app has been installed on your device, you can immediately start to use it by launching it from your home screen.

Using the app

When you first launch the Power Apps app, you will be asked to authenticate using the Microsoft 365 credentials that you normally use within the browser. There are a lot of similarities in the user experience between what we saw in Microsoft Teams and what we can see in the mobile app. The first...

Lab 3

Within this lab, we are going to install and configure the Power Apps mobile app so that we can experience using our Power App as we build it throughout this book. This lab assumes that you have completed Lab 1, and therefore have created the Groceries phone app.

However, you can follow these steps for any other app that you create. First, we will install the Power Apps app, and then we can refer to the above section to pin the Groceries app to the home screen.

Let's install the mobile app.

Activity 1: Installing the mobile app

This first activity will allow us to install and configure the Power Apps mobile app onto our chosen device. The screenshots in this lab have been taken from an iOS device:

1. On your mobile device, open the app store that's relevant to your device.
2. Search for Power Apps.

3. Select Power Apps from the search options and select to install it:

   

   Figure 4.25: Power Apps in search options

4. Once the app has been installed, open the app from the app store...

Summary

In this chapter, we looked at the version history and what that means for our Power App. We identified that we can happily work on our app in the draft stages without users being able to see our changes. Once the app has been published, it will be marked as Live and will be available for our users to start using. Should the worst-case scenario be realized and we have an error in our app, we can easily revert to a previous version by selecting Restore. The restored app will then become a new version, but won't be visible to our users until we click Publish.

We also looked at the key ways in which our users can exploit the functionality that's created using Power Apps. First, we focused on SharePoint, which uses a web part within the modern experience to embed the Power App onto the page. This is done by providing the web part with the app web link or ID, which are obtained from the app’s Details screen. This experience may be due to the web part still being in...

Questions

1. What information do I need to provide to the SharePoint web part to render the Power App?
2. How is an app identified as being the current version that users are actively using?
3. Can I add a sample app to a Microsoft Teams channel?
4. Is the Power Apps app available for Android?
5. What would I do to create the illusion of having the app installed locally on the device?
6. True or false: A Power App can be installed on a classic SharePoint page.
7. If I have three versions of an app, that is, 1.0, 2.0, and 3.0 (live), what happens if I restore version 2.0?

Data controls

The following set of controls all works with data sources to clearly present information to the user, adding a new dimension to the functionality that we have looked at so far. This can range from a form that the user can interact with to a chart that only takes a glance to view large quantities of data. We will return to this topic in more detail later in this book, so for now it is enough to briefly introduce the options that we have available to us. We will begin by looking at customizable galleries as a way of controlling the appearance of our app.

Gallery controls

Gallery controls are designed to allow the repetition of controls to represent rows of data, for example, when displaying data from a data source. Galleries can be used to display multiple types of data using various controls to build up a feature-rich display within your app. Changes to the layout are made within the gallery template, which is the first item within the gallery. Any changes that...

Icon controls

Icons are one of the key ways in which you can add graphical and visual depth to your apps. The Icons menu contains a number of icons, as well as geometric shapes that can be laid on top of each other to create effects. There are a large number of icons, many of which will satisfy the graphical requirements of your app without you having to develop your own images.

Within Power Apps, icons are used to provide various elements of functionality, for example, to sort, search, apply filters, or to open a menu.

Figure 5.22: A subset of icons that are available within Power Apps

Each of the icons is effectively a vector image, which means you can make them as large or as small as you like without any distortion taking place. This also means that you can apply your own background and foreground colors to give the icon the color effect that you desire.

Icons have additional properties, such as rotation, which give you more control over how your icon...

Lab 4

In this lab, we are going to build on the blank app we created in Lab 1 by creating a welcome screen for our app. Begin by opening the app in Power Apps Studio.

Activity 1: Building basic branding

The first thing we are going to do is build a basic look and feel for our app by placing some shapes onto the canvas. To begin with, we will create a header.

For this, we will insert a Rectangle, which will act as the header background. Follow these steps to do so:

1. Open the Groceries Phone App that we created in Lab 1.
2. Open the Insert menu.
3. From the Icons menu, select Rectangle:

Figure 5.25: Inserting a Rectangle

4. When the rectangle appears on the canvas, drag it to the top-left corner or change the X and Y properties to 0 within the property pane on the right of the screen:

Figure 5.26: Moving our rectangle to the top-left corner

5. Use the right handle to drag the width of the rectangle until it is the...

Summary

In this chapter, we looked at the key controls in Power Apps. There are a large number of controls available. These range from basic web form controls such as labels, text boxes, and buttons to more complex types such as the Pen input control, which allows users to draw directly into your app.

Using the right control at the right time is paramount to the success and adoption of your app, as you want to make your app as easy as possible to use. Consideration should always be given to the amount of real estate that’s being used on the screen and, where possible, large controls should be avoided.

All of our controls share some basic properties that are normally related to positioning, for example, X, Y, height, width, and so on. However, most controls have properties associated with them that are specific to them.

Controls provide a large number of icons that can be used to create visual effects and to stylize your app in the way that you want. These icons...

Questions

1. Which control allows you to capture either a number or a string of text?
2. What is the maximum value for the rating control?
3. Why would you use a dropdown control over a list box control?
4. What is the main difference between a combo box and a dropdown?
5. What can I use to build up visual effects within my app?
6. What two values can a checkbox take?
7. Which control should I use to capture a signature from a user?

Join our community on Discord

Join our community’s Discord space for discussion with the author and other readers:

https://packt.link/powerusers