Custom labels in javascript

Question

How one can access custom labels in javascript linked as separate static resource?

For example, some user action on the page should trigger confirmation dialog with custom message. And this message should be translated. Anything else on the page can be translated just fine with custom labels. The problem is that accessing custom labels requires VF context and {!xxx} syntax which of course doesn't work in separate resource.

So, is there a way to access custom labels from javascript? (Or any appropriate way to translate script messages)

Answer 1

This is a great question, and Custom Labels and the $Label global are the right place to start! Instead of evaluating Visualforce inside your JavaScript, you can do a little bit of JavaScript inside your Visualforce.

How do I get evaluated Visualforce variables into dumb static JavaScript?

1. Load your Custom Labels into the platform using the normal interface,

2. Create what I like to call a "JavaScript bridging component" that loads before your script, like so:

   <script>
       window.$Label = window.$Label || {};
       $Label.MyError = '{!JSENCODE($Label.MyError)}';
       $Label.MyPrompt = '{!JSENCODE($Label.MyPrompt)}';
       $Label.MyMessage = '{!JSENCODE($Label.MyMessage)}';
   </script>
   

3. Now in your javascript (in a static resource) use the variables just as if they were VF without {!}

   <script src="{!URLFOR($Resource.ScriptZip, '/my.js')}">
       //NOTE: this example code is for clarity,
       //really he lives in the static resource
       function errorHandler() {
           console.log($Label.MyError);
           alert($Label.MyMessage);
       }
   </script>
   

This is in the spirit of the platform: there is no need to interpret any variation on the token names and you can pluck the values straight out in your JavaScript without inventing anything :-)

Answer 2

I think it is impossible to generate translations directly in static resource javascript. But it is possible to send a translation to the script via pass-through attributes. Like with a component we can pass some attributes to the script object and access it with javascript:

Visualforce page:

<apex:page>
    <script id="myScript" data-testme="{!$Label.MyTest1}" src="{!URLFOR($Resource.Scripts,'mytest.js')}"/>
    <input type="button" value="Test!" onclick="testMe();" />
</apex:page>

Here is a javascript that was packed to the static resource Scripts in the mytest.js file:

function testMe(){
    var scriptElement = document.getElementById('myScript');
    var label = scriptElement.getAttribute("data-testme");
    alert(label);
}

So if you click on the button a javascript function is executing and a popup will be show with a translation passed: