3

and thanks in advance for any help on this subject.

We are working with Financial Service Cloud in Lightning experience, and in the Client record Page, we have created several custom tabs.

How can enter the translation of these tabs in the system? Could it be done through the Translation Workbench, or any other Administration tools? Can it only be achieved by coding?

Again, thank you very much for any hint on this, and Season Greetings!

screenshot with the tabs "to be translated" circled

In addition, we have also problems translating the List View names (or labels). Any help on this too would be greatly appreciated.

1

1 Answer 1

3

From what I can tell, lightning tab translations are not directly supported in Translation Workbench, but there's a workaround.

The code for a Lightning Tab looks something like this:

<lightning:tab
           name="MyCustomTab" // or ="{!c.labelName}" 
           title="MyCustomTab" // again, or ="{!c.labelName}" 
/>

The Title and name can be replace with a custom Label. You can also add icons if you wish. To do that, you'd use CSS for the icons. You'd need to pass that label into your tab using custom markup. You'd also need to extend your existing CSS.

Once you enable Translation Workbench, Custom Labels can be translated in the Lightning Experience by going to the actual Label definition (not in Translation Workbench, but where the Custom Label is defined). Once you're there, click on it to get it's details, then from within the detail view that appears, click on "new", select the language from the options and enter the translation for the Label. Save your translation.

Depending on your implementation, you may need a controller and helper class to support the Labels that you'll be using. I've used c.labelName above simply for illustration purposes.

You can access custom labels in your markup using dynamic expression syntax as below:

{! $Label.namespace.labelName}

{! $Label.c.labelName} // if in your own org 

Aura provides native support for localization using tags like the following:

<aura:component>
    {!$Locale.language}
    {!$Locale.timezone}
    {!$Locale.numberFormat}
    {!$Locale.currenceFormat}
</aura:component> 

You can access these properties in JS as below:

({
    checkDevice: function(component) {
        var locale = $A.get{"$Locale.language");
        alert("You are using " + locale);
    }
}) 

$A.get{$Label.namespace.labelName} 
// to access a Label in a JS controller/helper function

If part of a component where you had a panel of tabs with icons on each tab, your CSS might look something similar to what's below :

@font-face {
  font-family: 'icomoon';
  src:url('/resource/AwIcons/fonts/icomoon.eot?-247d11');
  font-weight: normal;
  font-style: normal;    
}

.THIS, .THIS.mainApp, .THIS .slds-tabs--default {
  height: 100%;
}


.THIS a[role=tab]:before {
  font-family: 'icomoon';
}

.THIS li[title="{!c.labelName}"] a[role=tab]:before{
  content: "\e603";
}

.THIS .slds-tabs--default .slds-tabs__item > a {
    text-align:center;
}


.THIS .slds-tabs__content.slds-show.cTab {
  height:calc(100% - 50px);
  position: inherit;
  overflow: hidden;
}


@media only screen and (max-width: 500px) {    


  .THIS div[role=tabpanel] {
        height: calc(100% - 50px) !important;
        padding: 0px;
    }


    .THIS .uiScrollerWrapper, .THIS .slds-tabs--default {
        height: 100%;
    }

    .THIS a[role=tab]:before {
        position: absolute;
        top: -5px; 
        padding-left: 18px;
        font-size: 2em;
    } 

    .THIS li[title="{!c.labelName"} a[role=tab]:before{

        padding-left: 13px;
    }

@media only screen and (min-width:501px) {
  .THIS .slds-tabs--default__nav {
      position: fixed;
      width:50px;
      height: 100%;
      background-color: #14315D;
      display: inherit;
  } 
  .THIS a[role=tab]:before {
    font-size: 1.3em;
    color: #faebd7;
  }
  .THIS .slds-tabs--default__nav .slds-tabs__item a {
    color: transparent;      
  }  
  .THIS div[role=tabpanel] {
    margin-left: 51px;
    padding: 0px !important;
    height: 100% !important;
  }
  .THIS .slds-tabs--default .slds-tabs__item.slds-active a {
    border-bottom: none !important;
    border-right: 2px solid #0070d2 !important;
  }
}

@media only screen and (min-width:48em) {
  .THIS .slds-tabs--default__nav a {
    padding: 0 0.5rem !important;
  }

  .THIS .slds-tabs--default__nav .slds-tabs__item + .slds-tabs__item {
    margin-left: 0px !important;
  }
}

The icomoon font references in the code above are a means of converting icons into fonts for the sake of simplicity. They're especially suited to this type of usage.

4
  • Thank you very much! the problem is that I can't see how to assign a custom label to the custom tab. It seems that you enter the caption directly. Commented Jan 23, 2017 at 10:40
  • See my edits above. You'd need to create custom labels for each tab and add them to your page markup. I can't seem to find any other way to do it. Were it me, I'd create a custom component.
    – crmprogdev
    Commented Jan 23, 2017 at 16:00
  • Thank you very much indeed, crmprogdev. I will review it and forward to the developers' team Commented Feb 16, 2017 at 14:44
  • You're welcome @JuanJoséVelasco. Thanks for posting on SFSE. Community etiquette is to upvote well thought out questions and answers if you have sufficient reputation plus assist the rest of the community by marking posts as solving your question if they helped you resolve your issue.
    – crmprogdev
    Commented Feb 16, 2017 at 15:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .