Multi-Layout Form Processing Using PowerApps And AI Builder

Introduction

 
In this article, we will learn how we can process Multi-Layout Forms using Power Apps and Form Processing AI Builder.
 
In our earlier article, we talked about how we can build, train and publish Form Processing AI Builder Model. If you haven’t visited my earlier article, please visit using this URL.
 
Prerequisites
 
Create the following SharePoint lists.
 
Invoice Multiples
 
Master List to store all basic information
 
 
Invoice Line Items
 
List to store line items (table) from each invoice.
 
 
Now, let’s build a Power App.
  • Create a blank Canvas App for Tablet Layout.
  • From insert Menu, go to AI Builder section and select “Form Processor”.
 
  • That will add one control on-screen.
 
  • Select Form Processor control and provide AI Model as the published model from the previous article.
 
  • Let’s add a Form to pre-populate values.
  • Go to Insert > Forms > Edit Forms
 
  • Provide data source as “Invoice-Multiple” list.
 
  • Now, to prepopulate the fields from the FormProcessor control, select each datacard and open the Default event. Write the following code.

    FormProcessor1.Fields.'Invoice No'

    We will get the field names using the “FormProcessor1.Fields” property. Here, the field name is the same as we defined in our earlier article.
 
Follow the same procedure for the other fields:
 
Field Name
Code
Invoice Date
FormProcessor1.Fields.Date
Invoice Address
FormProcessor1.Fields.'Street Address'
Invoice StateCity
FormProcessor1.Fields.'City-State'
Invoice Phone
FormProcessor1.Fields.'Phone No'
Invoice Email
FormProcessor1.Fields.Email
Invoice to Address
FormProcessor1.Fields.'Street Address'
Invoice to Company
FormProcessor1.Fields.'Invoice To Company Name'
Invoice to State-City
FormProcessor1.Fields.'Invoice To State City'
Invoice to Phone
FormProcessor1.Fields.'Invoice To Phone'
Invoice to Email
FormProcessor1.Fields.'Invoice To Email'
Subtotal
FormProcessor1.Fields.Subtotal
Total
FormProcessor1.Fields.Total
Sales Tax
FormProcessor1.Fields.SalesTax
  • Add Data table control to show line items.
 
  • Add the following line of code in the Items Property.

    FormProcessor1.Tables.'LineItems-Product'
  • Add all the fields.
 
  • Add a Save button and write the following code.
SubmitForm(Form1);
  • Select Form Control and add the following code in the Items property.
 
  1. Defaults('Invoice-Multiples')  
Select Form Control and add the following code on the “OnSucess ” event to store line items from the data table.
 
  1. ForAll(FormProcessor1.Tables.  
  2.     'LineItems-Product', Patch('Invoice Line Items', Defaults('Invoice Line Items'), {  
  3.         Title: ThisRecord.Description,  
  4.         Qty: Value(ThisRecord.Quantity),  
  5.         'Unit Price': ThisRecord.  
  6.         'Unit Price',  
  7.         'Line Total': ThisRecord.  
  8.         'Line Total',  
  9.         InvoiceID: Form1.LastSubmit.ID  
  10.     }));  
  11. SaveAttachment.Run(Value(Form1.LastSubmit.ID), FormProcessor1.OriginalImage);  
  12. Notify("Form has been submitted successfully", NotificationType.Success);  
  • Now in the above code, the following line is used to save the uploaded form as a SharePoint list attachment. You can ignore this if you do not want to store an uploaded document.
  • If you wish to store an uploaded document, then you need to follow this article and create a flow to store the uploaded document for Form Processing AI Model.
  • Now, let’s test the form.
  • Upload any sample invoice.
  • This will pre-populate all the fields.
 
  • Save the form.
  • This has saved all the items to the SharePoint list with attachments.
 
 
 

Conclusion

 
This is how we can process multi-layout forms using Power Apps and Form Processing AI Builder. Isn’t that amazing? Happy Power Apping!