Skip to Content
Technical Articles
Author's profile photo Prashanth Varikuppala

Calling ML-Translation white-listed API from SAP API business HUB in SAPUI5 App


In this blog post, we shall learn to integrate APIs from SAP Business API Hub with our custom Fiori application. Let us integrate language conversion ML API with basic form element in Fiori application. Let’s get started.


Following are the steps that are to be performed to use the SAP ML Translation API from the business HUB

  1. Create Machine Learning API Sandbox Destination on SAP Cloud Platform.
  2. Invoke / Call the above-created destination in the UI5 app model file[neo-app.json].
  3. Store the unique API key in the model file of the UI5 App [json].
  4. Create the custom JSON file to specify the required languages.
  5. Specify the models [json, Languages.json] in the Manifest.json App descriptor file.
  6. Design the UI for the end user in [View.xml] file.
  7. Mention the Element texts in the i18n file.
  8. Get the Element text Strings that pass them to the API for translation.


Instructions to create Machine Learning API Destination on SAP Cloud Platform:

  • Go to the Cloud Platform Cockpit [].
  • Go to the Destinations.
  • Click on the “New Destinations” and fill the required fields as mentioned below.


  1. Type: HTTP
  2. Description: Machine Learning APIs
  3. URL:
  4. Proxy Type: Internet
  5. Authentication: No Authentication
  6. Additional parameters:
  7. WebIDEEnabled = true
  8. Click on the Save.


An application programming interface key (API key) is a unique code that we can get from this link

[], the SAP Leonardo Machine Learning Foundation – Functional


Then Next Step :

  • Create a SAPUI5 application on the WEB IDE.


  • Mention the sandbox API destination in the [neo-app.json] which created on the above step.
	  "path": "/ml-dest",
	  "target": {
	    "type": "destination",
	    "name": "ML_API"
	  "description": "SAP Leonardo Machine Learning API's"
  "sendWelcomeFileRedirect": true,
  "headerWhiteList": [

Create a File (ml_apikey.json) under the “model”.

Fill with the below JSON content in the File[ml_apikey.json]:


"url_featureextraction": "/ml-dest/feature-extraction",

"url_similarityscoring": "/ml-dest/similarity-scoring",

 "method": "POST",

 "accept": "application/json",

 "fileType": "zip,tar",

 "mimeType": "application/x-zip-compressed,application/zip,application/octet-stream",

 "APIKey":"<Provide here Unique API Key>"

  • Create the JSON File(Languages.json) under the “model” folder to specify the Languages.



           "Languages": [


                                   "Code": "en",

                                   "Name": "English"



                                   "Code": "pt",

                                   "Name": "Portuguese"



                                   "Code": "fr",

                                   "Name": "French"



                                   "Code": "es",

                                   "Name": "Spanish"



                             "Code": "hi",

                                   "Name": "Hindi"



                                   "Code": "zh",

                                   "Name": "Chinese"




We need to specify the models in the app descriptor file (manifest.json):

"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "ML.PRACTICE.i18n.i18n"

			"ml_apikey": {
				"type": "sap.ui.model.json.JSONModel",
				"preload": true,
				"uri": "model/ml_apikey.json"
			"Languages": {
				"type": "sap.ui.model.json.JSONModel",
				"preload": true,
				"uri": "model/Languages.json"


  • Write the UI code in the XML View which you want to show end-user.


<Page showHeader="false">



<!--<Button icon="sap-icon://nav-back" type="Transparent" press="onNavBack"/>-->

<Label text="ML Translation" design="Bold" wrapping="false"/>


<Label text="Languages"/>

<Select id="selectLanguages" change="OnSelect" items="{ path: 'Languages>/Languages',sorter: { path: ' Languages>Name' } }">

<core:Item key="{Languages>Code}" text="{Languages>Name}"/>



<f:SimpleForm id="idSimpleFormChange" editable="true" layout="ResponsiveGridLayout" title="{i18n>address}" labelSpanXL="4"

labelSpanL="3" labelSpanM="4" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="4" emptySpanM="0" emptySpanS="0"

columnsXL="2" columnsL="1" columnsM="1" singleContainerFullSize="false">


<Label id="idFullname" text="{i18n>Fullname}"/>

<Input id="name" value=""/>

<Label id="idAdd" text="{i18n>Address}"/>

<Input value=""></Input>

<Input value="">


<l:GridData span="XL1 L2 M2 S4"/>



<Label id="idZipcode" text="{i18n>ZIPCodeCity}"/>

<Input value="">


<l:GridData span="XL1 L2 M2 S4"/>



<Input value=""/>





<Bar id="idFooterBar">


<Button icon="sap-icon://hint" type="Ghost" press="onInfopress"/>

<ToggleButton id="idBHeaderToggle" icon="sap-icon://expand" tooltip="Show/Hide Header" type="Transparent" enabled="true" pressed="true"




<Button id="idContinue" text="{i18n>continue}" icon="sap-icon://step" press="onPressSearch" type="Emphasized"/>

<Button id="idBClear" text="{i18n>exit}" icon="sap-icon://system-exit-2" press="onPressClear" type="Transparent"/>






  •  In the i18n file given the text contains name-value pairs for each element.



Fullname=Full name of the contact

Address=Street and number where the contact is located

ZIPCodeCity=ZIP Code and City



address= Address


In the controller.js file:

OnSelect: function () {

var that = this;

var i18nModel01 = that.getOwnerComponent().getModel("i18n").getResourceBundle();

var SourceText1 = i18nModel01.getText("Fullname");

var SourceText2 = i18nModel01.getText("Address");

var SourceText3 = i18nModel01.getText("ZIPCodeCity");

var SourceText4 = i18nModel01.getText("continue");

var SourceText5 = i18nModel01.getText("exit");

var SourceText6 = i18nModel01.getText("address");

var SourceID1 = "idFullname";

var SourceID2 = "idAdd";

var SourceID3 = "idZipcode";

var SourceID4 = "idContinue";

var SourceID5 = "idBClear";

var SourceID6 = "idSimpleFormChange";

var Array = [

[SourceText1, SourceID1],

[SourceText2, SourceID2],

[SourceText3, SourceID3],

[SourceText4, SourceID4],

[SourceText5, SourceID5],

[SourceText6, SourceID6]


if (this.getView().byId("selectLanguages").getSelectedItem().getKey() !== "en") {

if (Array) {

for (var i = 0; i < Array.length; i++) {

that._translateText(Array[i][1], Array[i][0]);}}} 
else {

for (var i = 0; i < Array.length; i++) {

_translateText: function (FieldID, Value) {

var that = this;

var apiKey = this.getView().getModel("ml-apikey").getProperty("/APIKey");

var sLanguage = this.getView().byId("selectLanguages").getSelectedItem().getKey();

var data   ​= JSON.stringify({

"sourceLanguage": "en",

"targetLanguages": [



"units": [{

"value": Value,

"key": "TEXT"



var xhr = new XMLHttpRequest();

xhr.withCredentials = false;

xhr.addEventListener("readystatechange", function () {

if (this.readyState === this.DONE) {

var sTranslatedText = JSON.parse(this.responseText).units[0].translations[0].value;



});"POST", "/ml-dest/translation/translation");

xhr.setRequestHeader("Content-Type", "application/json");

xhr.setRequestHeader("APIKey", apiKey);




  • Select the Language from the Select Box on the top right corner. Elements text will change accordingly.





I hope this was a good and new learning experience for you and helped you in your implementation. If you have any questions please feel free to drop a comment below. I will be happy to answer them.


Thanks & Regards,


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Srinath Velagala
      Srinath Velagala

      Detailed and insightful. Thank you for the post.

      Author's profile photo Prashanth Varikuppala
      Prashanth Varikuppala
      Blog Post Author

      Thank you!.

      Author's profile photo Francisco Verdesoto
      Francisco Verdesoto

      Very nice! Keep them coming!

      Author's profile photo Prem Chand
      Prem Chand

      Very nice Prashanth.

      Author's profile photo Shiva Chappadi
      Shiva Chappadi

      Good Info..! Thanks for sharing the Post.

      Author's profile photo Sean Tran
      Sean Tran

      Awesome post.  thanks!!!!

      Author's profile photo Lakshmi Munnungi
      Lakshmi Munnungi

      Good post Prashanth

      Do you know what all languages are supported by SAP ML API ? Are there any details provided in the API documentation ?



      Author's profile photo Prashanth Varikuppala
      Prashanth Varikuppala
      Blog Post Author

      Hi Lakshmi,


      Please find in the below link for supported Languages.




      Author's profile photo Lakshmi Munnungi
      Lakshmi Munnungi

      Thanks !