AI at the Zoo: Designing the Power App

Let’s keep going in the AI at the Zoo series. We are up to Designing the Power App! In previous posts we have created the model in Lobe and exported it into our Power Platform environment. Today we will create the Dataverse Table and connect everything together with a Canvas Power App.


In Dataverse, create a new Table. I called mine Zoo Submissions. On this Table I added a text field for Identified Label, a Yes/No field called Correct? and then an Image Field. I set this Image Field as the Primary Image for the Table. This means that it will show up in the list when viewed on Mobile.

Then I added these fields to the form and added the Table to the Sales Trial Model-Driven App.

Dataverse Zoo Submissions form showing Name, Identified Label, Correct and the Image.
Here is what a row (record) looked like after being saved from the Power App we are going to build.
Zoo Submissions in Model Driven App
The Zoo Submissions will appear like this in the Model Driven App via mobile. Setting the Image as the Primary Image allows us to see it as a thumbnail/preview in the list.

Canvas Power App

Now, create a new Power App. We want this Power App to be for Phones so we can use it on the go. (For more information, check out the docs on using an Image Classification model in Power Apps.)

Our Power App will end up having 2 pages:

  1. Photo Upload Screen. This will include a way to upload or take a picture and then submit it to the AI Model.
  2. Submit Screen. This will save the identified label and the photo to Dataverse.

Photo Upload Screen

Canvas Power Apps Photo Upload Screen
Your Photo Upload Screen should end up looking like this.

On the first screen you should add a Media Upload. This will allow you to take or upload a picture and it will display the picture that has been added.

Before we can use the AI Model we need to add it in as a data source. Navigate to the data area and add a data source. Then you can expand the AI Model area and select the model we just imported.

Add the AI Model as Data to your Power App
Select the data area on the left-hand side then click Add Data. Within this menu, expand AI Models to find the model you just imported.

Next, we will add a button. This button will run the AI Model and save the label to a new variable (here called Label). For a future enhancement, we could hide this button or disable this button when no image is present.

Here is the button On Select formula:

Set(Label,'Zoo Identification Model'.Predict(UploadedImage1.Image).TopClass.Name); Navigate(Screen2)

Submit Screen

Create a new screen and select the form type. This will make the next few steps a bit easier.

Choose the Zoo Submissions table created on Dataverse as the source data for the form. You should also edit the fields displayed to be Name, Identified Label, Correct?, and Image. Next, set the default form mode to New (defaults to Edit).

We will also need to update the default values for the fields on the form. For each field, select it, then click Advanced. Click the unlock button at the top of the Advanced tab. Then you can set the default value.

Identified LabelLabel (this is the variable we created earlier to save the TopClass identified by our AI Model)
Correct?Do not set a default

Now, we will set the code for the buttons on the header. For the X button, set it to Back(). This will navigate to the last page. Here is the code for the check mark (submit button). We need this button to submit to Dataverse and then get ready for the next submission.

SubmitForm(EditForm1); ResetForm(EditForm1); Navigate(Screen1); Reset(AddMediaButton1)
Canvas Power App Form Submission
This is what our Submit Screen will look like.

Almost There

Now we are ready to test this Power App! Tomorrow, I will show you some of the results and close out this series!

Watch for more posts in the AI at the Zoo series or check out Events where you can find me presenting on AI or other Power Platform topics!

One thought on “AI at the Zoo: Designing the Power App

Leave a Reply