DEV Community

Cover image for A Step-by-Step Guide to Integrating AI on Microsoft Power Apps
Eden AI
Eden AI

Posted on • Originally published at edenai.co

A Step-by-Step Guide to Integrating AI on Microsoft Power Apps

In this step-by-step guide, we'll show you how to integrate Eden AI's Invoice parser API into a Power Apps flow. The same process applies if you want to include other features like : Image taggingExplicit content detectionText analysis and many more AI APIs we offer.

Before we start, what is Invoice parsing?

Just like Receipt and Resume Parsing, Invoice Parsing is a tool powered by OCR to extract and digitalize meaningful data, Computer Vision to identify structure of the document, and NLP techniques to pin down the fields. Invoice parser technology extracts key information from an invoice (.pdf, .png or .jpg format) such as the invoice ID, total amount due, invoice date, customer name, etc.

Invoice Parsing results on Eden AI

Invoice parser APIs help ensure data accuracy by avoiding errors that can occur during manual data extraction. Then, this information can be used for a variety of purposes and makes it easier to generate reports or export data to other applications and is often used in conjunction with other business management applications.

‍Try Eden AI for FREE

What is Microsoft Power Apps?

Power Apps is a suite of applications, services, connectors and a data platform that provide a rapid development environment for building custom applications tailored to your business needs.

With Power Apps, you can quickly build custom business applications that connect to your business data stored either on the underlying data platform (Microsoft Dataverse) or in various local and online data sources (SharePoint, Microsoft 365, Dynamics 365, SQL Server, etc.).

Power Apps "democratizes" the creation of custom business applications by allowing users to create feature-rich custom business applications without writing code. It also provides an extensible platform that allows business developers to programmatically interact with data and metadata, apply business logic, create custom connectors and integrate with external data.

How to bring invoice parsing to your app using Power Apps?

Follow the step-by-step guideline below or take a look at the video tutorial:

1. Get started with Microsoft Power Apps

Go to the “Flows” menu, then create a new Automated cloud flow

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cacb06e3d7c80c41aaf_Dnr2UwlXN2jq_kdw26p2F0gO3gLbOhskpFHx0M8s2E0WyB2RGXv2V8enYSVLnDg3uSPwfHnWT-6yn6aPTyl26ESFt8uvNKCsM6wHQghYTnh8MJO8XjU-X3lha0pFPIYL7C4WXZxOff7sRmGG8ShlKg.png

Choose a name for your project then select your flow’s trigger (the event that starts your flow). For this tutorial, we’ll choose a Power Apps action.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cacf2669d794f8034a2_4fXvf286WeKv9poIGIz16BiR_6lbqiTff3geBmT9_ncdUUz-sR5cznoy48nHelCZtILY2S6-Ox2A6XDSL8C5yKXTBZkzMO7rmVpPcGNzFhYHhGux1JhjvzXIBExDbXUCNiso8n2bNBPg4y3WYCptdQ.png

2. Create your first step in Power Apps

Let's create our first step by clicking on the “New step” button.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8caca6e6d3f9a38bb8d0_Pd5RywOmIsn2Itp56sNA8Mddcb4S6a9WDme1sqYd4mwRYa2XDyh75bKyKhjbBOfqdDahFgtQ3NyJpkFOdLGaNSqU8BJb4t3x6Yrlo8dVCwJklqvgmI3Pqx-eBNE_tarBd1SG7yt8P-izILIuo_YFIA.png

This step will allow you to get our invoice content to perform detection, for example, a module to get your invoice content from a Google Drive file. You will get this file using id.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cacf01c5dabe9296b4f_z4D0_T3SuXB1KJ1_jl0_S3fALAe3DdnUkHAK6m16rs01PxCqztGFNOsf7THT_5T6I6VsyRH5gFL1D3hsQPKwU5vGZEqhy2V_33B_-xJQ4zIhFmOR3WlAC3akQsPxEjcTIGLGRzKAmbDsrM72yftYbQ.png

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cac3039fa31f75760df_vNR-nNEqS2bQaM41QdT2wxRuYfQwmTxCYqS-TntzBWJLxAiIZw_w5mtmSnD4jVavG-cUHWc4U1HP8El0ICfuWWO4JBhYKd-QuUejs5XI__MZ1GPpyp6EPqtnnHos852Uow8dj-mWwCWyEoEmjrC6aQ.png

Then, select the file you’ll want to perform Invoice Parser with:

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cac204c4561eb012c37_ZaGUOpioRWnNqGvj7jf9wf-5cOOBceWInshk59j2Oy7WSFs-rq0BojHzD3EV3r_YJeZpnwFEF7wgM8LTskK1XcLBV46Rz06EyAau_QXMWgqIz6Q8Wv1GEsGdwEHouriJT_yfExrA_zJdZWdPmlZ_8Q.png

3. Set up an HTTP request to call the API

You can now add a new step that will perform an API call to Invoice Parser API. Add a new HTTP request step as such:

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cac9202f63b2cb27787_8Lqliqnn6kglttLyH40s7ODldlt4TDnFI-cwIF4sJLaF4i715AMie6RASx7-5wq_pz5iJMFRQUcYOZE8BBxWAC0o9CXOawnGm3RWYg12mb47-geR6POu1fFbWOciqUD5sOWy39RASvWkvYrl9bINQw.png

To set up your HTTP request, you can take a look at Eden AI’s Invoice Parser documentation.

The request is a POST request on this endpoint: https://api.edenai.run/v2/ocr/invoice_parser. To authenticate your request, add your Bearer API Key as an “Authorization” header.

🔑Note that in order to obtain your API key, you'll need to create an account on Eden AI beforehand:

Get your API key for FREE - Eden AI Platform

Get your API key for FREE

As you can see on the documentation, the parameters need to be passed as multipart/form-data Content-Type:

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cac644ebb4e49a13d80_hE1osg40Gl6SHnXPs-oONLoQk7PyEWNQYdHl8TXZmG5_MIGqYPEqqbfsOi3AwZ7hG6T87XBXn0dBO8zVlt8sYR0o0PoAh1XDQ5h1NGptxT8izAvK1vDlPWOPN3Y9rni4yCw3sFds06FqUhncRWpXLA.png

4. Customize your HTTP request

Next, you'll need to set up the “body” part of the request to send the file you got from Google Drive. Invoice Parser has 3 parameters: filelanguage and providers. For this tutorial, we will analyse an invoice in English with Eden AI's provider Mindee.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8caca6e6d3383a8bb8d5_goOVlrulGsbwS8b_K5SIYr0FB8spxkSTdy7vePliZxLqJ0s8HZgDnBChMu_jPkD9rihukiwiSEYne97Zx1NFBemuVOjQX5xISyejg5m4DKQ-AhUq7Szw-qgBIYVNoc2uJMT8f6rawy_ijRMbUHKxTA.png

code :{
  "$content-type": "multipart/form-data",
  "$multipart": [
    {
      "headers": {
        "Content-Disposition": "form-data; name=\"file\";filename=\"invoice_parser.png\""
      },
      "body": @{body('Get_file_content_using_id')}
    },
    {
      "headers": {
        "Content-Disposition": "form-data; name=\"providers\""
      },
      "body": "mindee"
    },
    {
      "headers": {
        "Content-Disposition": "form-data; name=\"language\""
      },
      "body": "en"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

To append the Google Drive file in the body, click on “add dynamic content”, then select “file content” which is the result of the previous step:

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cad22dd45ab91107a66__VxkRgWPMARg3A4JtIvGu6_4Tqb90-7ZIcF92JDMruurt0uuy2uUX5SEegp39upWfm7GDJ2GkWGwDjjZccJH37cK-ldCTJ74nBTG-hCvbDuF8K9UcRSVHFJOYRGmqbDl0ypFfPGaQ4cCl1SSeIIUOw.png

5. Add a step to parse the response

In order to manipulate the response, you'll have to parse it in JSON format. To do so, add a new step “Parse JSON”.

This action takes two parameters: content and schema. The content will be “Body”:  the result of the previous HTTP request.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cac3d8ec46cf895942b_MPDREBD5jiJ7ENTlLf29ctBegnaX-yajPBeNDEVERG6VxYHdMLHsg254Yu9jszHhbJompvjjf5GKxtaITW2eARyaa6F-f47Icdl8Yu65OlSWGPcnM_1oHZ5rybFddkptFYpoTip-etVyL4SQ0RXf4w.png

You'll need to give the JSON schema that we can generate from an API response sample by clicking on “Generate from sample”. You can get this sample on the documentation or by doing the request in postman.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cac0f7829c698565e01_qKGC4uwn_4wKsFPEh72MSLDVhGY3IRC-Ljs4lSWW_vNSKBL_KGCJWD3sucs8rZeINemNRHUtAESgl8hH1rXcxlZmF479kLSCyY6Ia7StppDfTi-yIFXVV8ETAM01g5ku-ZaPUrcM91WFU0sgd8sJ4g.png

Now that the answer is parsed, you can manipulate it by using a new step action: Select. It allows to select certain attributes of the response object and remap them by giving a custom key if needed.

For example, you will get the “invoice_total” and the “customer_name” values with new key names “Total” and “CustomerName”.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cac84506dc8d7d8f765_eqyKU9_BeGDE8XvtGTzTlMMl4ytA_1KyXEyGq57OsNESVF11g8P30QmpywgC4EKdDOmEvxdcz-VykufdOzUdYGlVaOUCNlK0Nzxzzbru4JwynHdH-UbRiZA8Jgnv3jPccVgcJce_lVb46-R5ps54kw.png

Finally, you can add a last module to create a CSV table from the “select” output

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cac644ebba5e2a13de8_hsD2ygVxQj8W8yjKmZCvyxNKOItvWAPoFxo72nwtvywGyACRW1AyF8Y25xPUlxYVDFY_cnkpIbShq5HuAdQxKfEH1hyCkWdl8ZWToBEWnusYAFZtQ0ps4JDu_rxWXazg3oIyqP-DWLUYTRbb9RAbcw.png

6. Time to test the app!

Congrats ! 🥳 You can now test your flow by clicking on the “Test” button. Then select “Manually”, and “Run flow”:

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cadec0d859aefa2c3a2_CNi-X0Q7Qz251yVj0N4lhBjqyJ4DIUOWgRh68p41CBk5BMeeOPFhdIHRP6uoBA_wLfaMiQznaAQt4zUdPXfZYqBn5MCLqo_fqVQUTpErmA45ut6TegZf78-10C2fuiqpqV7PUsptOWTlIMUrggFkBw.png

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cad38158c5fb9b7a995_hLQ0sTKlIjfBifMbzyWZJDrcnAaoUowMzbX2xp7N3SUpr02kxM7dEAy050-mglZ4Zt3brPP2JlI-Ic6UAPPM62F9beQCeBUTbQvd9yyHfL9VKQHrh6wKAfpZNFoIqnAonrdvQ-4WpO_7PBoVhrMFxQ.png

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cad052f03a982976b08_nAkT3Wnl5RCpDKs-0C9eop1CIZ49stPb58t0fkFkODR9CNx-4qdMaRaMRymUNfgkXGcCsQD_MxbzBnB756pHOeQ65Vq91pPgw1L4AJMjx381p-IQjx8i19ugtGMCpYHZryFE3O2EDkNc3ms1Z4GfDA.png

You can see the flow by clicking on “Flow Runs Page”. It displays all the steps with their results as such:

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cad4d54f723b97a9e58_zbNhqAhBEsT9tsbqKKgCTCd3H9CLPzwatCLNBxFwE6CLKqHRULNnQrMUgSvpy8ecymXpzDraUOO9T3IED1afygSP0L5BI5hOYuBdhWSjh79sCDRgC1TTcyR5U1_qwHa54EA46XRS-n5NuJ6jRYb6dw.png

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cadf01c5dea7e296b58_cYd61FnyLr6ItfDM08jdWqkI_n2DOrh0FjOrkcgJdPc5e4f-Wy_0JAczv6SUlqM4Jd9RmSy9DG7sUAZP-zC1wdLYeG601IkXsX0fWkeqP4w22YfGdjxAjOLOAu_6uV0jQbypAw1IeckF6fvy97b1IA.png

The expected output is a CSV table with two columns with their values: Total and CustomerName

You can now use this workflow directly in your Power Apps App. For instance, you can launch the job by clicking on a custom button:

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63da8cad741d325a6148a0f5_v5L3DZpxssQ5I1OswS5C6KO3BZ7MEzkR2PxQijD4t5K-oA6OjyZdNWrNjk4fDYZiLdbk8vmxqktM_S731E5uaRotFbYuEYiTRw_VeCh9qQHu58Ku55yzalInimWrF9TtFrOJi0qWy_DeLjVcagNXEQ.png

If you have questions regarding this tutorial, the Eden AI community can help you out on Discord.

Create your Account on Eden AI

Oldest comments (0)