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:
- Call the Flow to save the face into Blog storage.
- 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.
- Navigate to the success screen.
- 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
Post a Comment