Integrate Google Translate in Salesforce

July 8, 2022October 28, 2022 vasu34k

Google Translate is a multilingual neural machine translation service developed by Google to translate text, documents, and websites from one language into another.

In this article, I will be integrating Google Translate in the Salesforce developer instance.

RapidAPI is an API Hub that enables over a million developers to find, manage, and connect to APIs. RapidAPI lets developers manage all API integrations from one place and gives real-time performance metrics. Each API has a page displaying prices, extensive documentation about the API, and a discussion page. The platform has been made by developers for developers.

In my demonstration, I am going to use Rapid API to integrate Google Translate in Salesforce using LWC.

To start with we need a Rapid API key.

Below are the steps to Generate the API Key.

First Create a free account on Rapid API to get an API key.
Navigate to this Google Translate API.

Create a new Remote Site Settings entry for the Rapid API site URL in Salesforce.

Note: The HTML is used to show the translation component view. The javascript file is used to call the Apex class to get a translation.

Apex Class
---------------
public with sharing class TranslateMyClass {
    public TranslateMyClass(){}
   
    @AuraEnabled(cacheable=true)
    public static string translate(string sourceValue, string targetValue, string sourceText) {
        HttpRequest req = new HttpRequest();
        HttpResponse res = new HttpResponse();
        Http http = new Http();
        req.setEndpoint('https://google-translate1.p.rapidapi.com/language/translate/v2');
        req.setMethod('POST');
        // Your api key here
        req.setHeader('X-RapidAPI-Key', 'xxxxx');
        req.setHeader('X-RapidAPI-Host', 'google-translate1.p.rapidapi.com');
        req.setHeader('content-type', 'application/x-www-form-urlencoded');
        String body = 'q='+sourceText+'&source='+sourceValue+'&target='+targetValue;
        req.setBody(body);
        res = http.send(req);
        Map<string, object> responseMap = (Map<string, object>) JSON.deserializeUntyped(res.getbody());
        Map<string, object>  data = (Map<string, object>) responseMap.get('data');
        Map<string, object> translations = (Map<string, object>)((List<object>) data.get('translations'))[0];
        return (string) translations.get('translatedText');
    }
}

TranslatePage.html
-----------------
<template>
    <lightning-card title="Google Translate" 
        icon-name="custom:custom14">
        <div class="slds-p-around_medium">
            <lightning-combobox
                name="sourceValue"
                label="Select Source Language"
                value={sourceValue}
                placeholder="Select Source Language"
                options={options}
                onchange={handleSourceChange} ></lightning-combobox>
            
            <div class="row">
                <lightning-textarea name="sourceText" 
                    label="Enter source text" 
                    onchange={handleSourceTextChange}></lightning-textarea>
            </div>

            <lightning-combobox
                name="targetValue"
                label="Select Target Language"
                value={targetValue}
                placeholder="Select Target Language"
                options={options}
                onchange={handleTargetChange} ></lightning-combobox>

            <div class="slds-m-top_small slds-m-bottom_medium">
                <h2 class="slds-text-heading_small slds-m-bottom_small">
                    <lightning-button variant="brand" 
                        label="Translate" title="Translate" 
                        onclick={handleTranslate}></lightning-button>
                </h2>
            </div>
        
            <div class="row">
                <lightning-textarea name="targetText" label="Translated text" 
                    value={targetText}></lightning-textarea>
            </div>
        </div>
    </lightning-card>
</template>

TranslatePage.js
=================

import { LightningElement, track } from 'lwc';
import translate from '@salesforce/apex/TranslateMyClass.translate';

export default class translatePage extends LightningElement {
    
    sourceText;
    targetText = '';
    sourceValue = 'en';
    targetValue = 'fr';

    get options() {
        return [
            { label: 'English', value: 'en' },
            { label: 'French', value: 'fr' },
            { label: 'Hindi', value: 'hi' },
            { label: 'German', value: 'de' },
        ];
    }

    handleSourceChange(event) {
        this.sourceValue = event.detail.value;
    }

    handleTargetChange(event) {
        this.targetValue = event.detail.value;
    }

    handleSourceTextChange(event) {
        this.sourceText = event.detail.value;
    }

    handleTranslate(event) {
        translate({sourceValue:this.sourceValue, targetValue:this.targetValue, sourceText: this.sourceText}).then(result => {
            this.targetText = result;
        });
    }
}

Sample code can be found from my github.

Once code is ready, Deploy the code in your Salesforce Instance.

>Let’s add our LWC component to the Contact Page.

>Go to an existing contact record and click Edit Page on the top right.

Below are the Sample Snapshots.

Related