Liquid UI - Documentation - 14.03 Translate text to another language

14.03 Translate text to another language


Prerequisites


Purpose

Learn how to change the language of the text entered in an input field from English to any other languages supported by the Google Translate service. We will walk you through the following steps.

  1. Delete an image container
  2. Add three input fields
  3. Add pushbutton
  4. Load file
  5. Check the variable value is blank
  6. Add functionality to change the language of the text entered

//Create this file inside your script folder for customizing SAP Easy Access screen: SAPLSMTR_NAVIGATION.E0100.sjs
//Now let's start adding the content to the above file

  1. Delete an image container on the SAP Easy Access screen.
     
    // Deletes an image container 
    del('X[IMAGE_CONTAINER]');    
    
     
  2. Add three input fields Original String, Target Language, and Target String. Enter the text to translate in the Original String input field and enter the language format in the target language input field.
     
    //Creates three input fields namely Original string, Target Language, Target String.
    inputfield([1,1], "Orignal String", [1,15], {"name":"g_source1", "size":50});
    inputfield([3,1], "Target Language", [3,15], {"name":"g_language1", "size":5});
    inputfield([9,1], "Target String", [9,15], {"name":"g_translated", "size":200});
    

     
  3. Add a pushbutton on the toolbar which on click executes a translate function to translate the text entered in the Original String.
     
    //Creates a toolbar pushbutton to execute a process on click
    pushbutton([TOOLBAR],'toTranslate','?',{'process':translate,"using":{"toTranslate":g_source1,"targetLang":g_language1}});   
    
     

     
  4. Add a wscurl file using load command in this script to use WS services to translate the text entered in the input field.
     
    // includes a file in this script file
    load('wscurl');

     
  5. Add an isBlank function to check the String entered in the input field is blank.
     
    // Function to check if the string value is blank
    function isBlank(jvar){
        if (jvar==void 0 || jvar=="" || jvar==null) {
            return true;
        }
        else {
            return false;
        }
    }
    

     
  6. Check the g_URL and g_translated values retrieved are blank.
     
    if(isBlank(g_URL)){
        g_URL = "";
    }
    text([7,1], "URL:  " + "&V[g_URL]" );
    if(isBlank(g_translated)){
        g_translated = "";
    }

     
  7. Create a function to translate the text entered in English to any other desired languages.
     
    /* Function is used to input text in English language and then use a service
    	such as Google Translate to change the text into some other language */
    
    function translate(param){	
    	var z_text = param.toTranslate;
    	var z_language = param.targetLang;
    	
    	/* Initialize the Curl object for making the call*/
    	var wsCurl = new Curl();
    	
    	/* Fixed string to fetch data after translation from googleapis.com*/
    	var baseURL = "https://translate.googleapis.com/translate_a/single?client=gtx";
    	
    	/* Say the text you want to convert is stored in variable "z_text", lets covert it to URI for web*/
    	var textToConvert = encodeURI(z_text);
    	
    	/* Set source language identifier*/
    	var sourceLangIdentifier = "&sl=";
    		
    	/* Set source language (see language format below)*/
    	var sourceLang = "en"; 
    	
    	/* Set translation language identifier*/
    	var translateLangIdentifier = "&tl=";
    			
    	/* Set translation key*/
    	var translateKey = "&dt=t&q=";
    	
    	/* Set translation language (see language format below)*/
    	var translateLang = z_language;
    		
    	/* LANGUAGE FORMAT:
    	 * google.language.Languages: 
    	 * 
    	 * 'AFRIKAANS' : 'af',
    	 * 'ALBANIAN' : 'sq',
    	 * 'AMHARIC' : 'am',
    	 * 'ARABIC' : 'ar',
    	 * 'ARMENIAN' : 'hy',
    	 * 'AZERBAIJANI' : 'az',
    	 * 'BASQUE' : 'eu',
    	 * 'BELARUSIAN' : 'be',
    	 * 'BENGALI' : 'bn',
    	 * 'BIHARI' : 'bh',
    	 * 'BULGARIAN' : 'bg',
    	 * 'BURMESE' : 'my',
    	 * 'CATALAN' : 'ca',
    	 * 'CHEROKEE' : 'chr',
    	 * 'CHINESE' : 'zh',
    	 * 'CHINESE_SIMPLIFIED' : 'zh-CN',
    	 * 'CHINESE_TRADITIONAL' : 'zh-TW',
    	 * 'CROATIAN' : 'hr',
    	 * 'CZECH' : 'cs',
    	 * 'DANISH' : 'da',
    	 * 'DHIVEHI' : 'dv',
    	 * 'DUTCH': 'nl',
    	 * 'ENGLISH' : 'en',
    	 * 'ESPERANTO' : 'eo',
    	 * 'ESTONIAN' : 'et',
    	 * 'FILIPINO' : 'tl',
    	 * 'FINNISH' : 'fi',
    	 * 'FRENCH' : 'fr',
    	 * 'GALICIAN' : 'gl',
    	 * 'GEORGIAN' : 'ka',
    	 * 'GERMAN' : 'de',
    	 * 'GREEK' : 'el',
    	 * 'GUARANI' : 'gn',
    	 * 'GUJARATI' : 'gu',
    	 * 'HEBREW' : 'iw',
    	 * 'HINDI' : 'hi',
    	 * 'HUNGARIAN' : 'hu',
    	 * 'ICELANDIC' : 'is',
    	 * 'INDONESIAN' : 'id',
    	 * 'INUKTITUT' : 'iu',
    	 * 'ITALIAN' : 'it',
    	 * 'JAPANESE' : 'ja',
    	 * 'KANNADA' : 'kn',
    	 * 'KAZAKH' : 'kk',
    	 * 'KHMER' : 'km',
    	 * 'KOREAN' : 'ko',
    	 * 'KURDISH': 'ku',
    	 * 'KYRGYZ': 'ky',
    	 * 'LAOTHIAN': 'lo',
    	 * 'LATVIAN' : 'lv',
    	 * 'LITHUANIAN' : 'lt',
    	 * 'MACEDONIAN' : 'mk',
    	 * 'MALAY' : 'ms',
    	 * 'MALAYALAM' : 'ml',
    	 * 'MALTESE' : 'mt',
    	 * 'MARATHI' : 'mr',
    	 * 'MONGOLIAN' : 'mn',
    	 * 'NEPALI' : 'ne',
    	 * 'NORWEGIAN' : 'no',
    	 * 'ORIYA' : 'or',
    	 * 'PASHTO' : 'ps',
    	 * 'PERSIAN' : 'fa',
    	 * 'POLISH' : 'pl',
    	 * 'PORTUGUESE' : 'pt-PT',
    	 * 'PUNJABI' : 'pa',
    	 * 'ROMANIAN' : 'ro',
    	 * 'RUSSIAN' : 'ru',
    	 * 'SANSKRIT' : 'sa',
    	 * 'SERBIAN' : 'sr',
    	 * 'SINDHI' : 'sd',
    	 * 'SINHALESE' : 'si',
    	 * 'SLOVAK' : 'sk',
    	 * 'SLOVENIAN' : 'sl',
    	 * 'SPANISH' : 'es',
    	 * 'SWAHILI' : 'sw',
    	 * 'SWEDISH' : 'sv',
    	 * 'TAJIK' : 'tg',
    	 * 'TAMIL' : 'ta',
    	 * 'TAGALOG' : 'tl',
    	 * 'TELUGU' : 'te',
    	 * 'THAI' : 'th',
    	 * 'TIBETAN' : 'bo',
    	 * 'TURKISH' : 'tr',
    	 * 'UKRAINIAN' : 'uk',
    	 * 'URDU' : 'ur',
    	 * 'UZBEK' : 'uz',
    	 * 'UIGHUR' : 'ug',
    	 * 'VIETNAMESE' : 'vi',
    	 * 'UNKNOWN' : '' 
    	 */	
    	 
    	/* Build the URL to make a call*/
    	
    	var completeURL = baseURL+ sourceLangIdentifier  + sourceLang + translateLangIdentifier + translateLang + translateKey + textToConvert;
    	set("V[g_URL]",completeURL);
    	/* This is the URL for your translation request. Note this use is for
    	 * calls made to Google Translate which returns us the JSON object in string */
        wsCurl.setopt(Curl.CURLOPT_URL, completeURL);
    	
    	/* Final step is to call execute to dispatch email. You can check the return
    	 * code to avoid errata string which can be found from "wsCurl.error" 
    	 * return value 0 means success */
    	var response = wsCurl.exec();
    	var error = wsCurl.error;
    	// posStart = response.lastIndexOf(",") + 2;
    	// posEnd = response.lastIndexOf("\"") + 1;
    	// strTranslated = response.substring(posStart,posEnd);
    	
    	var JSON_Data = eval("(" + response + ")");
    	var JSON_Data = JSON_Data.toString().split(",");
    	var strTranslated = JSON_Data[0];
    	set("V[g_translated]", strTranslated);
    
    	/* Response of THIS particular query is JSON. You can get HTML for other URLs
    	 * Parse to suite your requirements
    	 * e.g. response from the ABOVE URL is JSON string which looks like
    	 * {
    	 *	"data": {
    	 *		"translations": [
    	 *			{
    	 *				"translatedText": "Bonjour tout le monde"
    	 *				}
    	 *			]
    	 *		}
    	 *  }
    	 */
    	// set("V[g2_translated]", strTranslated);
    	/* Close the http connection for the URL fetch*/
    	wsCurl.close();
    	
    	/* Remove any reference for Garbage Collection*/
    	wsCurl= NULL;
    }


SAP Process

  1. Click toTranslate toolbar pushbutton to translate text in English to other desired languages supported by google translator as shown below:
     

     


Next Steps

Convert time from milliseconds to days/hours/minutes/seconds.
Learn how to convert time entered in an input field in milliseconds to Days/Hours/Minutes/Seconds

10 min.

This article is part of the Take a deep dive into the input field and pushbutton.


Can't find the answers you're looking for?