Power Apps + App in a Day

<Work in progress!>

Application Introduction: End to End Employee Hardware Solution  

This solution simulates how a large organization might supply their employee’s hardware needs. This offering consists of a secure application that enables comparing and ordering company confidential configurations and pricing and can run on mobile devices yet offers support that takes advantage of global/public facing locations and knowledge bases.

The business requirements for the application are:

 

  1. Securely displays only organization IT approved devices and prices
  2. Runs on both web and mobile devices
  3. Friction free and intuitive device identification
  4. Streamlined order and approval process
  5. Self Service and serviced hardware support options that leverage AI and global support learning
  6. Built by the internal IT group who does not have traditional development resources

 

Technologies utilized to achieve the business requirements.

  1. Common Data Service (CDS): Make it easier to bring your data together and quickly create powerful apps using a compliant and scalable data service and app platform that’s integrated into PowerApps.
  2. PowerApps: A software as a service application platform that enables power users in line of business roles to easily build and deploy custom business apps. You will learn how to build both Canvas and Model-driven style of apps.
  3. AI Builder Object Detection: To enable easier identification and to find specific device AI Builder will enable uploading an image or photo of a specific device.
  4. Power Virtual Agents bots: To offer a self-serviced support offering that leverages the entire customer installed base learning a Power Virtual Agents bot will be offered that can offer fixes, updates and replacement options at the closest stores.
  5. PowerApps Portal: low-code, responsive websites which allow external users to interact with the data stored in the Common Data Service. While the ordering application must be internal facing due to confidential pricing and configurations the support Portal will leverage global public facing support options and knowledgebases

Exercises

 

  1. Create a new environment with a common Data Service Database.
    1. Use the solution to create the entity
    2. Start the Portals Provisioning
    3. Import Data from web-based data into Common Data Service
  2. Create a Power Apps canvas-based application with components
  3. Use AI Builder to enhance the existing paper-based system.
  4. Use Power Automate to request a device via approvals
  5. Create a Power Virtual Agents support bot
  6. Create a Power Apps Portals to host the support bot

Optional:

  1. Integrate Power BI Tiles to show store location

Pre-requisites: Before starting the hands-on lab

Task 1: Download the Lab Files – https://aka.ms/PowerplatformLab

 

Setting up the environment and data

This application will be created in a dedicated environment that enables architectural, security and organization separation and geographic specificity.

The lab directions assume accounts supplied by the instructor. You can use your own accounts but forewarning these labs require permissions to create Common Data Service databases, will be starting trials that will start their expiration countdown and creating Portals that do have external visibility so it is not recommended. If are not in a formal class you can create own demo tenant or NOTE: If you are unable to sign-up for a Power Apps license using your organization credentials, you may provision a free Office365 demo tenant at http://aka.ms/Office365E5Trial Use the demo tenant credentials to sign up for a Power Apps Trial

 

  1. Navigate To PowerApps.com and log in with an account and Password supplied by the instructor.

  1. Click on the gear in the upper right corner and navigate to the Power platform Admin Center

 

  1. Create a new environment with a Common Data Service database (no need to change any other of the defaults)


 

  1. After provisioning is complete navigate back to PowerApps.com (likely the first tab in your browser) to this new environment.

  1. Adding the App in a Day Solution.

    To enable moving your application across environments, using components and custom entities created earlier, this lab leverages a solution you can find here: https://aka.ms/AIADSolution

  1. Import the App in a day Solution.

    Navigate to https://aka.ms/AIADSolution and download this file to your hard drive then select Import in the Solution home to bring this solution into your Power Apps environment.

 

  1. Publish customizations to push the Device Order custom entity definition into this environment.

  1. Brining in the Application Data

    These steps will create new entities in Common Data Service with the standard configuration information.

    Navigate to the Data panel, select Entities and choose Get Data. (note: you can see the Device Order entity underlined in orange that was brought in with the solution).

  1. Select the Text/CSV data source

 

  1. Reference the Manufactures data source: https://aka.ms/Manufactures.CSV

  1. Name the entity Manufactures and select next

  1. Load this data into a new entity, set the data type of the ManufactureName from Multiline text to Text and set the primary field mapping key field ManufactureName

  1. Create the Manufactures entity with manual refresh.

  1. Repeating the same steps above for the Devices entity: https://aka.ms/Devices.CSV

  1. Select the Text/CSV data source

  1. Reference the Devices data source: https://aka.ms/Devices.CSV

  1. Names the Devices entity

  1. Load the devices data into a new entity, set the data type and field mapping for the primary key.

  1. Create the Devices entity with manual refresh.

(note this will take a couple of minutes)

  1. Navigate to the solutions view and open the Device Order Solution

  1. Add those new entities to the Solution

Congratulations badge: “Importing Common Data Service data”
achieved!!!!!!!!!!

 

  1. Start the Portal creation process.

    Portals will take 30 minutes to provision. As this runs asynchronously the lab will get this started now so it is completed when needed.

  1. Supply Portal creation information. Please keep in mind these sites default to anonymous access and are publicly visible.

Congratulations you are now ready to start making some applications!!

 

Building the Device Ordering Power Apps Canvas App

IMPORTANT:
Do not proceed before going through the lab pre-requisite steps

This lab will create new Device ordering application to replace an existing paper and email-based system.

Power Apps Canvas Studio Layout

Power Apps Canvas Studio is available as a web application (http://make.powerapps.com) that you can use in any modern browser.

Power Apps Studio is designed to have a user interface familiar to users of the Office suite. It has three panes and a ribbon that make app creation feel like building a slide deck in PowerPoint. Formulas are entered within a function bar that is like Excel. Studio components:

  1. Left navigation bar, which shows all the screens, data sources, and controls in your app
  2. Middle pane, which contains the app screen you are working on
  3. Right-hand pane, where you configure properties for controls, bind to data, create rules, and set additional advanced settings
  4. Property drop-down list, where you select the property for the selected control that you want to configure
  5. Formula bar, where you add formulas (like in Excel) that define the behavior of a selected control
  6. Ribbon, where you perform common actions including customizing design elements
  7. Additional items, here you will find your environment selection, app checker, and the preview app functionality.


Goals for this lab

 

 


After this lesson you will be able to:

  1. Create a Canvas App
  2. Add screen to your app
  3. Use formulas in your app
  4. Navigate between screens
  5. Customize galleries on your screens
  6. Capture a collection from your app

 

 

 

The time to complete this lab is [60] minutes.

 

When you are done with this first portion of the lab, your app will look like this:

 

Locale-specific difference in formulas

 

Before you begin, please note that if your computer has its regional settings set to use the comma ‘,’ for its decimal separator (like in much of Europe) your formulas will need to use a semicolon ‘;’ instead of a comma in your formulas. For example:

En-US

Filter(Machines, OEMsGallery.Selected.MFR=MFR)

de-DE

Filter(Machines; OEMsGallery.Selected.MFR=MFR)

 

These localized formats are indicated with the symbol throughout the document. If you are in the en-us locale, you can ignore any of the formulas indicated by the locale symbol.

 

Exercise 1: Create the app in Power Apps

Before creating an app, ensure you are in the new environment that you created above. Click the Environment drop-down in the top right of the screen to switch to the new environment. (If your environment doesn’t show up, try logging out and logging in again)

  1. Navigate to the solutions view and open the Device Order Solution

  1. Add a new App of type Canvas with a Tablet form factor

  1. Rename the screen

In this task, you will rename Screen1 to MainScreen

  1. Select the screen by clicking the Screen1 tile in the Tree view.
  2. Click “…” next to Screen1 (or right click Screen1) and select the Rename option.

     

  1. Change the name to MainScreen.

Note: You can also rename the screen by clicking on the screen name in the right pane and selected the edit icon, or double clicking on it.

Tip: It is a good practice to rename screens and controls as you create them, so they are easier to locate as you work with formulas that reference different controls. In this lab, you will be prompted to rename screens and some of the controls. For the others, you may rename them as you please on your own.

 

Using Components

In this section you add a component to act as your header containing the app name and logged in user’s name

  1. In the tree view select “Components” under the ellipses select “Import Components”. If you don’t see the components you may need to exit and re-log in.

  1. Select the App titled “Device Ordering App Component”

  1. Here is the view of the component

 

  1. Navigate back to the MainScreen, select the custom menu and add the Header component.

    You will want to resize the component to the width of your screen.

    Are you ahead of schedule?

    Bonus: Build your own component that enables you to set the font color and have responsive sizing!

 

In the application settings page, you can:

  1. Change your app name
  2. Customize the app icon – choose a background color and icon
    1. Save your application “Device Ordering”

 

  1. Under settings, Select the Screen Size + Orientation tab to view the available screen orientation and aspect ratio settings. For this app, we will leave it at the default setting of Landscape with 16:9 aspect ratio.

  1. Click Save in the left navigation.
  2. Select The Cloud and click Save.

  1. After the app is saved, click the Back arrow in the top left to get back to the studio.

 

Tip: In Power Apps when you save a version of your app the first version is published by default and available to everyone you share the app with. Subsequent saves are only visible to the app maker in the studio. You must explicitly publish it for all app users to get the update. For more details on saving, publishing and sharing apps, see:

https://powerapps.microsoft.com/tutorials/save-publish-app/

https://powerapps.microsoft.com/tutorials/share-app/.

https://powerapps.microsoft.com/blog/saveandpublish/.

Exercise 2: Add Device Gallery and Connect to Data Source

In this exercise, you will add a gallery of all available devices making it easy for users to browse the list and get a quick overview of the devices available.

Task 1: Add device gallery

  1. With MainScreen selected, select the Insert tab.
  2. Click Gallery and select Horizontal.

This will add a gallery called Gallery1 onto the screen. Notice the control tree view on the left displays this gallery with three controls within it – two labels and an image. A data pane will pop up on the right.

  1. Under search or the drop down select the “Manufactures” entity.

 

  1. Select Gallery1 and notice the Items property is set to Devices. Notice the gallery is populated with data.

  1. Rename the Gallery1 to DeviceGallery.

 

Tips on working with galleries:

Galleries provide a powerful way to visualize tabular data in Power Apps. It is important to become familiar with customizing a gallery. Key components of a gallery: the gallery control, the template cell (first cell), and controls within the template cell.

To select the entire gallery – click on the gallery in the tree view on the left or click on the second or third cell. Clicking any cell that is not the first cell of the gallery will select the entire gallery. Now you can specify properties that apply to the entire gallery, such as the Items property, which is the data source, the gallery fill color, borders, etc.

To customize how each item is displayed in the gallery, you will customize the template cell. Select the template by clicking in the first cell of the gallery or click on the pencil icon in the top left corner when the entire gallery is selected.

You can now add, remove and customize the controls within the template cell. These changes will then repeat across each item or row in the table.

Go ahead and select the device image in the template cell and change its size. Notice how the size of the image changes in all the cells.

You can also test your gallery right on the canvas by holding down the Alt key to activate.

You will customize the device gallery in subsequent steps.

Don’t worry about making the gallery pixel perfect, the purpose of this exercise is to get your app working with a good enough UX. You can always repeat these labs to practice your pixel perfect skills.

 

Task 2: Arrange the device gallery

  1. Resize and reposition the gallery. You can drag and drop the gallery or use the gallery properties pane on the right.

  1. Select the DeviceGallery and click the Edit (pencil) icon in the top left to edit the template cell.

  1. Using the right drag control, resize the first box to be narrower. Notice that all the items get narrower and more devices are visible on the screen.

  1. Narrow the image as well by clicking on the image control and resizing it using the drag handles. Make sure the width of the image control is positioned within the template.

  1. Notice the gallery control on our screen automatically has scrolling capabilities.

 

Task 3: Add gallery to show manufacturers

In this task, you will add a second gallery that will list the various device manufacturers. This will be a single column vertical gallery down the left side of the screen, with each cell displaying the manufacturer’s logo image. This gallery will later be used as a filter for the device gallery created above.

  1. Select the MainScreen.
  2. Select the Insert tab on the ribbon and open the Gallery drop-down, then select Vertical.

  1. Select Manufacturers for the data source.
  2. Rename the gallery to ManufacturerGallery.

  1. Move this new gallery so that it is left aligned with the left edge of the screen and top aligned with the top of the device gallery. Your two galleries should like the image below.

  1. Select ManufacturerGallery (not just the template cell), in the Properties tab on the right, click Layout.

  1. Scroll down to the Gallery section and select 2 Columns.

  1. Change the Wrap Count from 2 to 1. This will change it to a single column gallery.

  1. Select the image control within the gallery (the Edit Pencil icon) and reduce its height by dragging the middle bottom drag control upwards. The image size will reduce whereas the template size will still be expanded.

  1. Reduce the height of the template cell to match the image below. We essentially want the image to occupy the entire cell.

  1. Click File and Save the application.
  2. Click on the Back arrow.

     

Task 4: Connect ManufacturerGallery to manufacturers table

Earlier you connected the data source using the Data tab in the right pane. You can also connect to data via the formula bar.

  1. Select the ManufacturerGallery. Make sure the whole gallery is selected and not just the first cell.
  2. Select Items from the property drop-down next to the formula bar. Notice that the gallery is populated with images of buildings. This is because Power Apps picked a default binding which mapped to the HQ column in the table.

  1. Select the image control in the first template cell in the gallery and change the value of Image in the formula bar from ThisItem.HQ to ThisItem.Logo. All the gallery items will now display logo images. You can also use the left tree view to select the controls, sometimes that is easier!

Note: Autosuggest offers you valid options for authoring formulas. See in the image below, we want to define the image to display from our data. Once we type ThisItem our Autosuggest tells us that we have three valid options for this formula. This can help guide you to making valid formulas.

  1. Select the first (top-most) image and using the Properties pane on the right, set the Image position property to Fit.

  1. Reduce the height of the template cell such that all nine manufacturers fit without a scrollbar. To do this, use the drag handles to first reduce the height of the image and subsequently reduce the height of the template cell.

    Note again that to select the template cell, select the entire gallery and click on the pencil icon in the top left.

 

Task 5: Highlight the selected item in the gallery

In this task, you will use the TemplateFill property of the manufacturer gallery to specify a highlight color for the selected item

  1. With the ManufacturerGallery selected, set the TemplateFill property on the gallery to the following formula to conditionally set the fill color of the selected cell to light blue:

    If(ThisItem.IsSelected,LightBlue)

     

    Alternately, you could set the TemplateFill property to:

    If(ThisItem.IsSelected,ColorFade(HeaderLabel.Fill,75%))

    This approach is recommended so the fill color matches the header label with a 75% fade. If you change the fill color of header label, the fill color of the selected item in the gallery will automatically change.


 

  1. Now try using the preview mode to perform a quick test of this highlighting. You can enable preview mode by holding down the Alt key (also known as the Option key) and clicking a few different manufacturers in the gallery, notice the selected item in the manufacturer gallery is highlighted in a light blue color. The preview mode ends when you stop holding the key.

    Alternatively, you could click the Play () button to enter preview mode, and to exit this you would hit the X in the upper right corner or use the Esc key.

 

Task 6: Filter the devices based on selected manufacturer

In this task, you will use the Filter() function to filter the items in the DeviceGallery to only display devices that match the selected item in the ManufacturerGallery.

  • Select the DeviceGallery. With the Items property selected, enter the following expression in the formula bar: Filter(Devices, ManufacturerID = ManufacturerGallery.Selected.ManufacturerID)

    for alternate/European locales:

    Filter(Devices; ManufacturerID = ManufacturerGallery.Selected.ManufacturerID)

     

    This will filter the device gallery to only display items that match the selected manufacturer based on ManufacturerID.

  • Select a different item in the manufacturer gallery on the left, and you will notice the device gallery will update accordingly. Note: In some cases, the first few items won’t show the selection, try selecting the 5th or 6th item if that occurs.

Note: If you get an error when entering the Filter command, check the name of the manufacturer gallery. The name in the filter command must match the name of your gallery.

More details on the Filter() function is available at https://powerapps.microsoft.com/tutorials/function-filter-lookup/.

A complete set of expressions is available at https://powerapps.microsoft.com/tutorials/formula-reference/.

 

Task 7: Configure text labels in the device gallery

  1. Select the subtitle in the DeviceGallery. It is named Subtitle1 in the tree view. It may have the default value set to the DeviceType property (e.g. Tablet).
  2. Change the label to display the device name by setting the label’s Text property to: ThisItem.Price

Here are some additional formatting suggestions. These are for cosmetic purposes only, feel free to skip past these:

  1. Expand the width of the label to the template width.

    Notice that the second label expands as well. This is because it is X property is set to Title1.X, the X coordinate position of the Title1 label. For more on the relative positioning of controls, see https://powerapps.microsoft.com/blog/ux-patterns-control-positioning/

  2. Change the PaddingLeft
    from
    0 to 10.
  3. Change the font to Segoe UI.
  4. Select the Title1.
  5. In the property drop-down list, select the Text field and change to ThisItem.Title.

  1. To add the $, use the text format expression: Text(ThisItem.Price,”$##,###.00″) or for alternate/European Text(Price;“$##.###,00”)

    locales:

    Note: After you enter the above value in the formula bar, it will automatically resolve to include your locale, e.g. [$-en-US]. If you see an error here, it might be because your locale is not yet supported, in which case as a workaround, manually change it to [$-en-US]:

Optional UI enhancement:

  1. Like above, change the value of the PaddingLeft property of the Title1 label from 0 to 10. Or set it to Title1.PaddingLeft.
  2. Change font to Segoe UI.

 

 

Task 8: Conditional formation to highlight devices above $1,000

We can make it easy to spot devices that cost more than $1,000, by displaying the price in Red.

  1. Select the label in the template cell that displays the price and set the Color to If(Price>1000,OrangeRed,Gray) or for alternate/European locales: If(Price>1000;OrangeRed;Gray)

Note: As you are typing this formula notice that the autosuggest shows a choice of matching colors. Power Apps comes with a set of standard colors that you can easily reference in any property that accepts a color value. You can also set specific RGB values.

For a full list of Color functions and colors, see https://powerapps.microsoft.com/tutorials/function-colors/

  1. Click File and select Save.
  2. Click the back arrow.

 

Task 9: Add a checkbox to add a device to Compare list

We want to allow users to select multiple devices to compare before making a final selection on the next screen.

  1. Select the DeviceGallery, click the Pencil edit icon in the top left of the gallery to select the template cell.

  1. Make sure that only the first item in the gallery is selected (not the entire gallery).

 

Use AI and Approvals to enhance and automate an existing Paper based System

Goals for this lab

 

 


After this lesson you will be able to:

  1. Add additional screen to your app
  2. Navigate between screens
  3. Create AI Builder models
  4. Create Approval Flows for ordering custom devices

 

 

 

The time to complete this lab is [60] minutes.

 

 

 

 

 

 

 

 

 

 

 


 

 


 


 


 

 

Use Portals and Power Virtual Agents bots to offer Self Service Support

Goals for this lab

 

 


After this lesson you will be able to:

  1. Add additional screen to your app
  2. Navigate between screens
  3. Create AI Builder models
  4. Create Approval Flows for ordering custom devices

 

 

 

The time to complete this lab is [60] minutes.

 

 

Lab Overview and Pre-requisites

Abstract and Learning Objectives

This is a beginner level lab for you to get hands on experience with the Microsoft Power Platform technologies – Power Apps, Power Automate, Power BI, and Common Data Service. The lab includes step-by-step instructions for someone new to these technologies to build a device ordering solution within a day. Technologies covered:

Power Apps: A software as a service application platform that enables power users in line of business roles to easily build and deploy custom business apps. You will learn how to build Canvas and Model-driven style of apps.

Common Data Service (CDS): Make it easier to bring your data together and quickly create powerful apps using a compliant and scalable data service and app platform that’s integrated into Power Apps.

Power Automate: A business service for line of business specialists and IT pros to build automated workflows intuitively.

Power BI: Self-service business intelligence capabilities, where end users can create reports and dashboards by themselves, without having to depend on information technology staff or database administrators.

AI Builder: AI Builder is a Power Platform capability that allows you to easily automate processes and predict outcomes to help improve business performance. AI Builder is a turnkey solution that brings the power of AI through a point-and-click experience. Using AI Builder, you can add intelligence to your apps even if you have no coding or data science skills. To learn more about AI Builder visit https://docs.microsoft.com/en-us/ai-builder/learn-ai-builder

Portals

 

  1. 04-Power Automate Lab Manual:

    Introduces you to Power Automate. You will learn how to:

  • Create a flow that is triggered when a new Common Data Service record is created
  • Automate sending approval requests
  • Customize the approval based on the CDS record
  • Use the Approval center

How to start a module without completing previous module(s)

The lab package includes a \Completed folder which consists of a set of app packages. If you wish to start on a module without having completed the previous module(s), you may import a partially built app package. See the corresponding instructions in each of the subfolders within the “Completed” folder.

  • To directly start working on Module 2 -> see instructions in \Completed\Module1 subfolder
  • To directly start on Module 3 -> see instructions in \Completed\Module2 subfolder
  • To directly start on Module 4 -> see instructions in \Completed\Module3 subfolder
  • To directly start on Module 5 -> see instructions in \Completed\Module4 subfolder

     

 

© 2019 Microsoft Corporation. All rights reserved.

Information in this document, including URL and other Internet Web site references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, e-mail address, logo, person, place or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.

The names of manufacturers, products, or URLs are provided for informational purposes only and Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links may be provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not responsible for the contents of any linked site or any link contained in a linked site, or any changes or updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission received from any linked site. Microsoft is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement of Microsoft of the site or the products contained therein.

Microsoft and the trademarks listed at https://www.microsoft.com/enus/legal/intellectualproperty/Trademarks/Usage/General.aspx are trademarks of the Microsoft group of companies. All other trademarks are property of their respective owners.

© 2019 Microsoft Corporation. All rights reserved.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s