{"id":24717,"date":"2020-09-11T15:07:56","date_gmt":"2020-09-11T15:07:56","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=24717"},"modified":"2020-09-11T15:07:56","modified_gmt":"2020-09-11T15:07:56","slug":"how-to-use-receipt-processor-ai-builder-in-canvas-app","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/09\/how-to-use-receipt-processor-ai-builder-in-canvas-app\/","title":{"rendered":"How to use Receipt Processor AI Builder in Canvas App"},"content":{"rendered":"

As like with every release, Microsoft brings various new features that help to improve productivity and make the user’s life easier and faster. So, here we explore one such amazing feature -Receipt Processor (AI Builder).<\/p>\n

Before proceeding further, I would like to inform you that to use this feature you need to enable the AI builder. Also, this feature is currently in PREVIEW. Here, we must have AI Builder License enabled to use Text Recognizer<\/strong> in Canvas App.<\/p>\n

Let\u2019s create a scenario to use this feature. Consider a restaurant owner who enters all their receipt data manually in the CRM, this is a tiring and time-consuming process. So, to make the process easier and faster, they can now use the quick and automatic Receipt Processor<\/strong> feature. All they need to do is scan the receipt and it will automatically fill the data into the CRM without manually typing anything.<\/p>\n

To enable this feature, we need to develop a Canvas app with the ability to scan the receipt and fill the data into CRM.<\/p>\n

Steps to use Receipt Processor in Canvas App.<\/strong><\/h2>\n

The below steps will help to store the Scanned Receipt details into CRM in one custom entity and attach the scanned receipt image in Notes as an attachment of Receipt record.<\/strong><\/p>\n

    \n
  1. Navigate to https:\/\/make.powerapps.com\/<\/a><\/li>\n
  2. Create a new blank Canvas app and add Receipt Processor control from AI Builder tab as highlighted below.\"Receipt<\/a><\/li>\n
  3. You will see the below screen of Receipt Processing Control\"Receipt<\/a><\/li>\n
  4. The Receipt Processing model will return the output in the following information:
    \n4.1. MerchantName: Name of the merchant i.e. printed on the receipt.
    \n4.2. MerchantAddress: Address printed on the receipt.
    \n4.3. MerchantPhone: Phone Number.
    \n4.4. TransactionDate: Date when transaction is done.
    \n4.5. TransactionTime: Time when transaction is done.
    \n4.6. Subtotal: Subtotal of the bill.
    \n4.7. Tax: Tax.
    \n4.8. Tip: Tip.
    \n4.9. Total: Total amount of bill. Etc.Note:<\/strong>
    \n\u2022 Receipt values are returned as strings.
    \n\u2022 The file size must be less than 20 MB.
    \n\u2022 The image format must be JPEG, PNG, or PDF.
    \n\u2022 The image dimensions must be between 50 x 50 pixels and 10000 x 10000 pixels.
    \n\u2022 PDF dimensions must be at most 17 x 17 inches, which is the equivalent of the Legal or A3 paper sizes or smaller.<\/li>\n
  5. Insert the Text Input Controls to show scanned receipt\u2019s data to the user on the page as shown below.
    \n    \"Receipt<\/a><\/li>\n
  6. Select the textbox and set its Default property using the formula as ‘ReceiptProcessor1.MerchantName’<\/strong>. This formula will display the name which is printed on the receipt.\"Receipt<\/a><\/li>\n
  7. You can display other details also like Address, Phone number, Total, Sub Total, Tax, etc. as mentioned in point #7.Here, as we said, we are going to store the scanned data into a custom entity, we have used the Receipt Details<\/strong> entity as shown below. Also, we\u2019re going to attach the Receipt image as a note\u2019s attachment in the CRM.\"Receipt<\/a><\/li>\n
  8. Add the button as shown in the above screenshot and add formula onSelect<\/strong> property of the Submit<\/strong> button to create the record in CRM as shown below.Formula:<\/strong> Patch(‘Receipt Details’,Defaults(‘Receipt Details’),{Name:txtName.Text,Address:txtAddress.Text,’Phone Number’:txtPhone.Text,’Sub Total’:txtSubTotal.Text,Tax:txtTax.Text,Tip:txtTip.Text,Total:txtTotal.Text,’Transaction Date’:dtTransactionDate.SelectedDate});
    \nThe above formula will create the record in the Receipt Detail<\/strong> custom entity.    \"Receipt<\/a><\/li>\n
  9. To store the scanned receipt in the Note entity as an attachment, you can refer to the below formula which we have added on the same Submit button as shown below:Formula:<\/strong> Patch(Notes,Defaults(Notes),{Title:txtName.Text,’Is Document’:true,Regarding:First(receiptDetailRecord), ‘File Name’: “receipt.jpg”, Document:Replace(ReceiptProcessor1.OriginalImage,1,23,””)})\"Receipt<\/a>The above formula will create a Note entity record related to Receipt Detail custom entity record.Note:<\/strong> To create attachments in CRM we have to pass the document body in base64 string. In the canvas app, the Receipt Processor control gives the data as base64 string of scanned receipt with the prefix \u201cdata:image\/jpeg;base64,\u201d or \u201cdata:image\/png;base64,\u201d. So while creating the annotation record in CRM we have to remove \u201cdata:image\/jpeg;base64,\u201d or \u201cdata:image\/png;base64,\u201d from the data.\"Receipt<\/a>Below is the sample of the Receipt that we can use for scanning the details.\"Receipt<\/a><\/li>\n
  10. After adding all the details, save the App and run. Click on the Scan Receipt<\/strong> button and select the receipt that you want to scan.\"Receipt<\/a><\/li>\n
  11. It will fetch all the details of your receipt and print them on labels\/textbox as shown above.<\/li>\n
  12. Then click on the Submit button to create the record in CRM as shown below.<\/li>\n<\/ol>\n

    \"Receipt<\/a><\/h2>\n

    Conclusion<\/strong><\/h2>\n

    Now we can use Receipt Processor Control<\/strong> in Canvas app to scan receipts used by restaurants, gas stations, etc.<\/p>\n","protected":false},"excerpt":{"rendered":"

    As like with every release, Microsoft brings various new features that help to improve productivity and make the user’s life easier and faster. So, here we explore one such amazing feature -Receipt Processor (AI Builder). Before proceeding further, I would like to inform you that to use this feature you need to enable the AI\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1954],"tags":[1867,244,245,545],"class_list":["post-24717","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","tag-canvas-app","tag-canvas-app-in-dynamics365","tag-canvas-app-in-dynamics365-crm","tag-dynamics-365-crm"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/24717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=24717"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/24717\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=24717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=24717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=24717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}