This blog post is part 3 of a 4-part series. To catch up on previous posts, check out the links below:
So, you’ve created your very own Object Detection Machine Learning model using AI Builder, and explored some Microsoft Learn modules to get comfortable using Power Apps. Now what? In part 3 of this series, we’ll build out our Power App – we’ll brainstorm what our app might look like, what functionality we want, and most importantly, how to use our AI Builder model inside of our app. Let’s get started!
Part 3: Creating your Closet Organization Power App
How do I create a new Power App using my AI Builder model?
Now that you’ve published your AI Builder model, it is available for use in both Power Apps and Power Automate. Under Use your model, select New app in Power Apps.
You’ll be redirected to your new Power Apps Canvas app, with one screen created for you that has an Object Detector component on it. To connect your AI model to this component, choose Select model in the Properties pane on the right-hand side of your screen, and select the model you created as you followed along with the previous blog post.
Congratulations! You just made your first AI-enabled Power App.
What features should I build in my Power App?
Building a Power App is an amazing experience because you have the freedom to be creative and build an app that precisely fits your needs. For my app, I wanted to create an experience where I could see what I have in my closet, as well as add new items to my closet and use the AI model to categorize the items properly. Here’s the success criteria I defined for myself for the first version of my Power App:
After you define your success criteria, think about how many different screens you’ll need to create in your app to meet the requirements. Use the Tree view on the left-hand side of your screen to create and organize all your screens. For my app, I created the following screens:
I’ll walk you through how I built each screen and share tips and tricks I learned along the way.
Creating your StartScreen
One of the best things about using Power Apps is the ability to customize your app to make it look exactly how you want. Using the Properties panel on the right-hand side of your screen, design an amazing screen that makes you happy to look at each time you open your app. I used Canva to create some digital assets that make my StartScreen stand out.
Remember how I wanted to be able to add an item or see my closet from this screen? I accomplished this by adding two buttons, one for each functionality. Each button uses the Navigate function in the OnSelect property to take me to the NewItem and Categories screens, respectively.
Here’s the tree view of my StartScreen, where you can see each component that I’ve added to this screen:
Creating your NewItem screen
Once you’ve created a beautiful start screen, you’ll want to create the screen that you navigate to when you select the Add Item button. Again, feel free to use the Properties pane to customize the look and feel of each page. On my NewItem screen, I have a few different components:
Let’s start with the most complicated part of this page—adding an item to your closet. In order to be able to display the images you upload in a gallery view in other parts of the app, you need to store the images online. I’m going to walk you through how to store your images in the Microsoft Dataverse, so they can be quickly and easily accessible from your Power App.
A few things to keep in mind:
Next, let’s work on the second button on the page. I want to navigate to the correct category based on what the ObjectDetector identifies as the tag for the image we uploaded. I also want the button to only appear after an image has been tagged. We’ll need to use two properties here—OnSelect and Visible. For the OnSelect property, we want to use the Set function to set a global variable for the item type, varItemType, to the TagName given to us by the Object Detector. We also want to use the Navigate function to take us to the ShowCategory screen. For the Visible property, we’ll use a little trick. Create a new (invisible) Label control at the top of the page and populate it with the TagName, then set the Visible property of the Button to only display if that label isn’t blank.
Finally, add a simple icon to Navigate to the StartScreen in case a user changes their mind, and wants to see their closet instead.
Creating your Categories screen
Power Apps has a built-in Gallery control that we’ll use here to dynamically populate our categories list with data from our Closet table that’s stored in the Dataverse. After you create a new Gallery control, the key property you’ll want to edit to populate your gallery is the Items property. Set the Items property of the Gallery control to be the combined tag names from the Object Detector control that you have in your app.
The other property we’ll want to set here is OnSelect, so that when a user selects a category, they’ll be taken to the page that shows all of the items in that category. Use the Navigate function to set the OnSelect property to go to your ShowCategory screen. You’ll also want to set the varItemType variable that you created while working on the last screen to be equal to the TagName that the user selected.
Finally, I added another Home icon that navigates back to the StartScreen.
For more information about how to work with and customize galleries, check out the Gallery control documentation, and if you need a refresher on all of the properties of an Object Detector control, check out the documentation on how to use the Object Detector component in a Power App.
Creating your ShowCategory screen
The last screen we have to create for our app will show us a gallery of images of the items we have in each category, along with how many items are in that category. For this screen, we’ll create another Gallery control, and set the Items property to use the Filter function, and filter our Closets data source to only show items we want to see. Luckily, we already have a variable that is set to those items, varItemType, so we can use that in our Filter function. We’ll use similar logic to set the Label control at the top of our screen to display the name of the tag, and then use the CountRows function to count the number of records of that type in our data source. Finally, we’ll add an Icon to act as the back button, which uses the Navigate function to take us back to our Categories screen.
Wrapping it all up
Take the time to test out your app—you can select the Play Icon in the upper-right hand corner to preview your app in the browser, and make sure everything works correctly. You can also use the Stethoscope Icon to initialize the App Checker. In the App checker, you can check the status of all your formulas, runtime, performance, and accessibility in your app. This function in Power Apps works like a debugger, so you are able to identify, understand, and fix any bugs you may encounter while working on your app.
When your app is working the way you’d like it to, Save and publish your app. You can then try out your app on your phone, and bring it with you while you organize your closet!
In part 4, we’ll reflect on what we’ve learned over the course of this series, and brainstorm more ways to customize our AI-enabled Power App. Looking forward to seeing you here next week!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.