Salesforce Lightning Record Translation Advanced Setup

In this guide, we will cover the installation and setup of Formyoula Translate for Lightning Experience record detail page and component translation.

Please use the following package links to install in your Salesforce instance.

Please check "Install for All Users" to make sure all users have access to the Translation Lightning Component. You will need to add the component to all required pages manually, so there will be no impact on users upon installation.

  • Please make sure "My Domain" is enabled in your Salesforce organisation.

After a successful installation, please edit all required object pages to add Social Translate. In this example, we will Edit the Account Page to add the Social Translate component.

image

On the "Lightning App Builder" page component sidebar, please scroll down to the "Custom" components and find "Social Translate".

image

Drag and drop "Social Translate" on your object record page, as shown below.

image

There are two main ways how to translate text on your record detail pages and other lightning experience pages. Field-based or Selector based. Please note, the translation will only appear on the page and will not update the records on your Salesforce. No data will be modified. The translation is only visual and done in real-time.

Field-based translation - This allows you to specify fields based on their labels or field API names to enable automatic field value translation. As Salesforce is migrating to a new user interface using LWC in the latest updates, you will need to use Fields (Old) or Field API Names (New LWC) respectively. The easiest way to check this is by testing each option to see if the translation is working.

To translate the Account object Name field. Please use the below examples.

  • Fields - Account Name
  • Field API Names (LWC) - Name

To translate multiple fields, please separate them with commas.

  • Fields - Account Name, Description, Type, My Custom Field
  • Field API Names (LWC) - Name, Description, Type, My_Custom_Field__c

image

Please save the changes on the "Lightning App Builder" page and preview the results on your record detail page.

image

Selector based translation - This allows you to select any text on the page using CSS selectors. You can translate standard and custom lightning components like Chatter, Related Object Records or any other component that has visible text on the page. We will use the Selector based translation to translate Chatter posts and comments on the record detail page sidebar.

Selectors - .cuf-feedElement .cuf-body p>.uiOutputText,.cuf-feed .cuf-commentItem .cuf-feedBodyText p>.uiOutputText

Please copy and paste the above Selectors into the Social Translate component and save the page.

image

Please visit the Account record detail page and open the Chatter sidebar to see the translation results.

image

You can use the browser Inspect Tool to find selectors for specific text on the page. In the below example, we will translate the Account Name title displayed on the detail page.

image

Please, right-click on the page to display the select options and click on the Inspect option.

image

On the browser inspect sidebar, please find the text you want to translate and right-click to copy the Selector.

image

You will have the following selector copied.

#brandBand_1 > div > div.center.oneCenterStage.lafSinglePaneWindowManager > div > div > div.flexipagePage > div > div.row.region-header > div:nth-child(2) > header > div.slds-page-header.slds-page-header_record-home.forceHighlightsStencilDesktop.forceRecordLayout > div > div.slds-grid.slds-col.slds-has-flexi-truncate > div.slds-media__body > h1 > div.slds-page-header__title.slds-m-right--small.slds-align-middle.fade-text > div > span.custom-truncate.uiOutputText

You can use the full selector and copy it into the Social Translate selector option, but in most cases, you only need the last part of the selector. In this example, we will only use.

span.custom-truncate.uiOutputText
image

If you have any other selectors present, please separate them using commas. When done, please save the changes and navigate to the record detail page to preview the translation results.

image

Controlling Users Language

There are two main language options for detecting the user's language "userLocaleLang" which uses the user's Salesforce local details and "language" which uses the user's selected language. Both of these options can be controlled on the user's detail page.

image

Please use one of these options on the Social Translate configuration page.

image

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂