Purpose
Using a Microsoft Azure web service, an image of an expense receipt is automatically processed and the data is read.

Example
The user selects an image file of an expense receipt on his PC. The image is analyzed by the service and the recognized field contents are entered on the SAP screen. These can be used from there or also processed in a further step with GuiXT.

Solution
 In this example, we use the service from Microsoft: Azure Form Recognize. "The AI-powered document extraction service that understands your forms."

This service can be called via REST API. We can do this in GuiXT either with callJS or with an embedded HTML page in which we call a corresponding JavaScript function.

We use the 2nd way here for the following reason:
We want to give the interface a local file directly. For security reasons we need to use an input element on the HTML page so that the user can select a file. JavaScript cannot automatically access the local file system.
Requirements
 Microsoft Azure Form Recognizer is a service that is free with moderate usage. However, you need to initiate this service yourself in the Azure Portal to get an API key. You can find more information directly at Microsoft e.g. at Azure Form Recognizer
Implementation

GuiXT Script "sapmp56t.e1350.txt"
(we extend transaction PR05 - Travel Expense Manager)

Box   (0,85)   (6,134)   "Analyze Document"
 
InputField   (3,86)   "Merchant Name"   (3,101)  _ 
   size= 25  name= "merchantname"    -readOnly
 
Pushbutton   (3,129)   "clear"   "?"   size= (3,5)  _ 
   process= "azure_reset.txt"
 
InputField   (4,86)   "Invoice Total"   (4,101)  _ 
   size= 25  name= "invoicetotal"   -readOnly  
 
InputField   (5,86)   "Invoice Date"   (5,101)  _ 
   size= 25  name= "invoicedate"    -readOnly
 
Control   (0.6,85.4)   (2.4,127.8)  _
   progID= "file:///C:/guixt/scripts/azure_test.html"  _
   name= "azurecontrol"   -closeOnHide
 
// Important so GuiXT JavaScript object is initialized
connecthtml   name= "azurecontrol"


The HTML file "azure_test.html"
We only need an INPUT element that starts the process: 
<body style="background-color:#DEEBF4">
<input type="file" id="myfile" onchange="analyzeDocument(this)"
style="height:25px;">

<br>
<div id="statustext"></div>

</body>

JavaScript Function "guixt_initialize()"
It is important to define this function in the embedded HTML file and use the GuiXT keyword "connnectHTML" so the GuiXT JavaScript object is available in the following functions. We use this object to change GuiXT variables and call InputScripts via JavaScript. 

var guixt;

function guixt_initialize(obj) 
{
  guixt = obj;
}


JavaScript Function "analyzeDocument()" 
function analyzeDocument(element) {
 var file = element.files[0];

 var file = document.getElementById('myfile').files[0];
 var url = "https://synactive-form-recognizer.cognitiveservices.azure.com/";
 url += "formrecognizer/v2.1/prebuilt/receipt/analyze";

 var xhr = new XMLHttpRequest();
 xhr.open("POST", url);
 xhr.setRequestHeader("Content-Type", file.type);
 xhr.setRequestHeader("Ocp-apim-subscription-key",
   "48885a0821404121b59f8396992a14a8");

 xhr.onreadystatechange = function () {
   if (xhr.readyState === 4) {

     document.getElementById("statustext").innerHTML = xhr.status;
     document.getElementById("statustext").innerHTML += "<br>"
  + xhr.getResponseHeader("Operation-Location");

     resultUrl = xhr.getResponseHeader("Operation-Location");

     // Wait 5 seconds, then request the result
     setTimeout(getResult, 5000);
   }
 };
 xhr.send(file);
}

JavaScript Function "getResult()" 
// Recieve the processed formular data from Azure
function getResult() {

	var url = resultUrl;
	var xhr = new XMLHttpRequest();
   
	xhr.open("GET", url);
	xhr.setRequestHeader("Ocp-Apim-Subscription-Key",
	 "48885a0821404121b59f8396992a14a8");
   
	xhr.onreadystatechange = function () {
	 if (xhr.readyState === 4) {
   
	 var obj = JSON.parse(xhr.responseText);
   
	 // The service succeeded and returned results
	 if (obj.status == "succeeded") {
   
	// Put the results into GuiXT variables -> show on SAP Screen
	try {
	  var d = new Date(obj.analyzeResult.documentResults[0]
	 .fields.TransactionDate.valueDate);
   
	  guixt.Set("invoicedate", d.toLocaleDateString());
   
	} catch (error) { }
   
	try {
	  var mn = obj.analyzeResult.documentResults[0]
	 .fields.MerchantName.valueString;
	  guixt.Set("merchantname", mn);
	} catch (error) { }
   
	try {
	  var tp = obj.analyzeResult.documentResults[0].
	  fields.Total.text;
	  guixt.Set("invoicetotal", tp);
	} catch (error) { }
   
	// Refresh the SAP Screen
	guixt.Input("OK:/0,process=refresh.txt");
	 }
	 }
	};
   
	// Start the request
	xhr.send();
	};
Downloads
You can find all files in this .zip archieve:
azure_formrecognizer.zip

Components
 InputAssistant + Controls