Adventures in PowerApps and Power Automate - Part 1


My company is headed to the National Retail Federation (NRF) conference this year and we have teamed up with Microsoft and Priority Bicycles in New York to bring a real-life Retail Customer Experience center to the conference participants. You might be wondering why I am telling you this--well, I have been working with a team of people to put together some really cool solutions to showcase at the Priority Bicycle store.
Among these cool solutions are two Power Apps that will be used to "kick-off" the whole experience. This blog features the Sign-Up App. Future blogs will feature the flow behind the sign-up app, the facial recognition app, and several flows that make that app do it's magic.

Sign-Up App

The first app is the Sign-Up app. This app will be used at the booth and on the bus from the conference center to the Priority bicycles store. As the name suggests it is an app that allows people to sign-up and give us their information and consent.
The app design is pretty simple. In a nutshell, you enter some basic information about yourself and take a picture. Next, you select a category of bikes you are interested in. Then you are prompted to read and accept the terms and conditions. Once you are finished you are taken to a confirmation screen.

Connections

We used a Canvas App with the Common Data Service (from a Dynamics 365 Sales instance) as the connection for the data source. There is also a connection to an Azure Blob Storage account where we are saving images for facial recognition in the second app. Lastly we have a connection to the Face API to send data about the image that is captured.

Pages

The initial page of the app is the sign up screen. This page has a form (which defaults to the new mode) with 5 fields from the contacts entity in the common data service.
The page also includes a camera control and an image control. Now you can't tell from looking at the layout preview because these two fields are exactly the same size and positioned to be right on top of each other. When an image is taken, we hide the camera control and only show the image that is captured. Once design flow with the way we did this is that the Retake picture button in it's current state does not reshow the camera control, it just takes another picture. This could be changed easily, but consider how you want this to work if you use camera and image controls.
The page also contains two buttons. A Take/retake picture button and a next button.
The next page of the app is the bike category selection page. This page features a simple gallery with the data source  linking to the new bike category entity we created in the common data service. The arrow button on the gallery serves as the button to navigate to the next screen.
After you select a bike you are taken to the waiver screen. This screen is also pretty simple, but this is where the magic happens. There is a large HTML text control that has all the actual text for the waiver. It was important to use the HTML and not a normal text control in order to get a scroll bar. Now, if you don't need a scroll bar and all the text fits on the page, you could use a regular text field. The page also has a check box control that sets the global variable and the submit button. The OnSelect property of the submit is doing a number of different things:
  1. Call the Flow to save the face into Blog storage.
  2. Patch the contact record - which is just a fancy way of saying update the contact that we created on the first page with the waiver signed and bike category preference.
  3. Navigate to the success screen.
  4. Reset the variables back to false for the next user.
Here is the formula in the OnSelect of the Submit button.
'NRFsign-upaddface'.Run(gloNewContactID);
Patch (
    Contacts,
    LookUp(
        Contacts,
        Contact = gloNewContactID
    ),
    {'Waiver Signed': gloWaiverSigned},
    {'Bike category preference': gloBikePreference});
Navigate(SuccessScreen);
Set(gloWaiverSigned, false); WaiverCheckbox.Value = false;
Any good app with a submit function should have a success screen. If I was a better designer/developer, we would make a failure screen and handle errors - but we will leave that for another day. The success screen is very simple with a thank you message and a mechanism to navigate back to the home page of the app.

Variables

Next, we are using a number of variables to store values that are used from page to page.
TakePictureClicked: This is a boolean that lets us know if the user has clicked the Take picture button. Based on the value of this button we toggle the button label back and forth between Take picture and Retake picture.
This value is set in the OnSelect property of the TakePicture button and the formula is
set(TakePictureClicked,true)
gloNewContactID: This is a guid which is the unique identifier for the contact that is created when you submit the first form. We need this number because later we patch the contact with additional values from other pages of the app.
This vale is set on the OnSelect property of the Next button, and here is the formula that was used. First we submit the form, then we set the variable.
SubmitForm(ContactInformationForm);
Set(
    gloNewContactID,
    ContactInformationForm.LastSubmit.Contact
)
gloWaiverSigned: This is also a boolean that is used to indicate if they signed the waiver. We added a custom field to the contact entity to track if the waiver is signed. This value gets patched in on the final screen.
This variable is set on the Waiver check box on the waiver screen and the formula is
Set(gloWaiverSigned, WaiverCheckbox.Value)
gloBikePreference: This is a record. We added a new entity to the common data service to store a list of bicycle categories. Each category has an image and some basic details about the category. We also add a lookup field on the contact to the bike category. This is where we store which bicycle category the person preferred.
This variable is set in the arrow button on the gallery item. The formula goes in the OnSelect of the button and here is what the formula looks like:
Select(Parent);
Set(gloBikePreference, ThisItem);
In the next blog I will show the Flow behind this App that makes it work. Then in future blogs we will explore the second app which is the one that actually performs facial recognition. There is also a lot of other things going on behind the scenes with both apps such as emails being sent from Dynamics 365 Marketing, some IoT magic, some Dynamics 365 Retail Cloud POS magic and more which will be featured!

Comments