Categories:

Digitize your Invoice with the help of Azure AI Services in Power Platform

In this article, we are going to learn the integration between Azure AI service and Power Platform to digitize the invoices received as an attachment to readable values and uploading the digitalized data in the SharePoint list.

We will be using Azure Form Recognizer to get the API Key and Endpoint to authenticate the application. Azure Form Recognizer has some prebuilt models namely,

  • Layout extraction
  • Receipts
  • Business Cards
  • Invoices

We are going to use Invoice model to extract data from the given Invoice documents. Below are the prerequisites:

Create Form Recognizer in Azure

  • Go to Azure Portal
  • Search for ‘Cognitive Services’ in the search bar and choose the same.
  • The Cognitive Services home screen will be opened, in that click +New icon
  • The Marketplace of Cognitive Services will be opened, in that search ‘Form Recognizer’ and choose the same
  • Fill the Form and click create

Subscription: Your MPN subscription

Resource group: choose a group or create a new one.

Region: Choose your region

Name: The name of your Form Recognizer

Pricing tier: Choose Free Tier

  • On successful creation, the Form Recognizer home page will occur. In the left navigation choose ’Keys and Endpoint’ and copy the keys and endpoint for the future reference in Power Automate.
  • Next, we will create an Instant Workflow to trigger an action when we upload Invoice document in Power Apps.

Create a Power Automate Flow to analyze invoice and get the data

  • A pop-up will be opened to get the flow details. In that choose PowerApps trigger and enter the flow name and click create.
  • Click the Add icon below the PowerApps, search and choose the “Compose” action to get input from Power Apps. In the ‘Inputs’ parameter, click the textbox and select ‘Ask in Power Apps’ in the pop-up pane.
  • Next step is to add the” HTTP” action to send a request to Azure AI service.

Below are the inputs for the HTTP action:

Method: POST

Uri: {ENDPOINT_COPIED_FROM_FORMRECOGNIZER} /formrecognizer/v2.1-preview/prebuilt/invoice/analyze

Headers:

KeyValue
Content-typedataUriToBinary(replace(outputs(‘Compose’),'”‘,”))[‘$content-type’]
Ocp-Apim-Subscription-Key{KEY_COPIED_FROM_FORMRECOGNIZER}

Body: dataUriToBinary(replace(outputs(‘Compose’),'”‘,”))[‘$content-type’]

  • Add an “Initialize” action to initialize variable to analyze the status of the HTTP call.

Name: any name of your choice

Type: string

  • Add a “Do Until” control to get the HTTP Request until it gets Succeeded.

Inside that add a “Delay” action to set delay for 5 second.

Count: 5

Unit: Second

Add a “HTTP” action to get the “operation-location” response value from the request sent in the above HTTP call. The operation-location response will return a HTTP URI which is used to get the analyzed result. Below are the inputs for the HTTP action:

Method: GET

Uri: choose the “Operation-location” by selecting the HTTP response in the Dynamic content pop-up. If you do not find the variable, paste the below content in the URI section – outputs(‘HTTP’)[‘headers’]?[‘Operation-location’]

Headers:

KeyValue
Content-typeapplication/json
Ocp-Apim-Subscription-Key{KEY_COPIED_FROM_FORMRECOGNIZER}

Add a “Set Variable” action to set the value for the variable which we have initialized above.

Below is the full view of the “Do Until” control

  • Next add a “Response” action and set the below values.

Status Code: 200

Body: Choose the Body variable of the HTTP GET action in the dynamic content pop-up

Response Body JSON Schema: Copy the response body of the succeeded HTTP GET action and paste.

Below is the full view of the Power App Flow

Successfully, we have completed the flow. Next step is to design Power Apps to upload the Invoice documents and to save the values in SharePoint List.

Create a SharePoint list

  • Create a blank list in SharePoint and add the columns you need to store.
  • Refer SharePoint List Creation link to know about SharePoint list creation.

Create a power app form to digitize and analyze the invoice

  • Go to Power Apps Portal to create a Power App form.
  • In the left pane, click “Apps” and choose “+New App”.
    canvas app blank” layout and select “Phone or Tablet Layout” of your choice and add a new Blank Screen.
  • Click “Insert” in the left menu and select “Media” dropdown and choose “Add Picture”.
  • Select the On Select property of the Add Picture and connect the trigger the flow by setting the below command.
InvoiceResult,InvoiceGeneratorcopy.Run(JSON(UploadedImage1.Image,JSONFormat.IncludeBinaryData))
  • Run the App and Upload the image by clicking the “Tap or click”. So that your flow will get triggered for the first time and you will get the Json Schema from HTTP
  • Append the “ClearCollect” filter to store the data as collection in on select property of “Add image”.
ClearCollect(InvoiceResult,InvoiceGeneratorcopy.Run(JSON(UploadedImage1.Image,JSONFormat.IncludeBinaryData)).analyzeResult)
  • Now you will be able to see all the Invoice data in Collection.
  • Now connect the SharePoint List with Power Apps by adding an “Edit Form” control to display the data in the Field,
  1. In the “Datasource” property of the Edit Form, click and connect to the SharePoint list which you have created to store the Invoice data.
  2. The form will be autogenerated based on the SharePoint field and field types.
  3. To set the value for each field, go to the “DataCardValue” which is the empty text boxes below the fields names and set the value as below.
First (First(CollectionName).documentResults).fields.FieldName.text
  • To save the data in the SharePoint list add a button control in the form.
  • In the “OnSelect” property of the button, paste the below command to submit the form value.
SubmitForm(YOUR_FORM_NAME)
  • Now check your SharePoint list to see the updated details of invoice

Successfully, we have saved the data in SharePoint. I hope this article was helpful to Digitize your Invoice.

Sharing is Caring!

Leave a Reply

Your email address will not be published. Required fields are marked *