Build Power Apps Canvas App Consuming Form Processing AI Model - Power Platform AI Builder Series - Part Four

Overview

 
Welcome to the Power Platform with AI series. During this entire series, we will talk about one of the important components of AI Builder which is – “Form Processing”.
 
You are reading the Fourth part of this article series.
 
I have divided this entire series into the following parts,

Use Case

 
During this article, we will check how we can consume our trained AI model and build a PowerApps Canvas App which scans the document and retrieves the fields from the document. The retrieved field will be pre-populated in the Power Apps form. Once the user will click on save all the fields they will be stored on the SharePoint list.The same article is available in vLog.
 
So, now let’s get started!
 

Build a list Schema

 
We have created a SharePoint list named “Rent Receipts”. Below is the list schema for the same.
 
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series
 

Build a Power Apps Canvas App

  • Open your Power Apps Canvas Screen.
  • Go to Insert menu, and expand AI Builder, select Form Processor.
 Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series
  • This will add one Form Processor control on screen. Right side shows available AI models that we have trained in Article 1 to 3.
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series 
  • Select “AI-Rent-Processing” model that we have developed.
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series 
  • Create a new SharePoint Form.
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series 
  • Select any datacard and set default value capturing from the Form Processor model.

    Let’s say if we want to show Month from the form, let’s add the following property.

    FormProcessor1_1.FormContent.Fields.Month

  • In the same way, repeat this procedure for all the controls.
  • Add a button to save the data.

    SubmitForm(Form1_1);ResetForm(Form1_1);UpdateContext({GroupVisible:false});

  • Make a Group of buttons and forms.
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series 
  • Set visible property for Group.

    GroupVisible
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series 
  • Add a button on “Screen1_1”. Add the OnSelect event.
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series
 
NewForm(Form1_1);UpdateContext({GroupVisible:true});
  • Add Reset Icon and apply below code on – “OnSelect” action.
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series
 
ResetForm(Form1_1);UpdateContext({GroupVisible:false});
 
Now, let’s test the code,
  • Run the Application.
  • Click on the Analyze button.
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series 
  • Upload File.
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series 
  • Once the document is uploaded, click on “Store My Fields”.
 Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series
  • This will pre-populate all the information.
 Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series
  • Click on the Save button.
  • Our Power Apps form has been submitted successfully.
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series 
  • Let’s check the data in the SharePoint list.
Build Power Apps Canvas App Consuming Form Processing AI Model – Power Platform AI Builder Series
 

Conclusion

 
This is how we can develop the PowerApps, prepopulate data from Form Processing and Store the data to the SharePoint list.
 
Stay connected with me for the amazing articles!
 
Happy Power Apping!!


Similar Articles