In the second part of our Selligent Pro Tips series, Andy Somers at Selligent Partner company Foreach shares his tips for mapping translations to their respective screens on in-page translations.


The situation

Part 1 of our series  explained how to keep translations synchronized between namespaces in Selligent. Now it’s time to optimize the process of entering and maintaining translations.

When clients develop a new application in Selligent, the starting point is usually copying sliced HTML into the pages with all the text in one language. The next step consists of replacing that text with translations, in the form of ~$LABEL_KEY~.

But there is a downside, says Andy Somers at Foreach: “The biggest issue with this label system is that we do not have an overview of which label is used in what page. And more importantly, we don’t see where the label is situated on the page.”

As a partial fix, Somers suggests using good naming conventions, for instance using PAGE1_FIRST_NAME as a label key. In all cases, this will help maintain a tidy and stringent workflow. But it does not solve the problem of locating the name label on the page.


The old method

As a workaround, Foreach used the following procedure when a client would request changing the translation A on page B to value C in language D:

1. Look at the application first to see where translation A is situated on page B

2. Look up the label key for this translation in the source of the page

3. Open the translation tool and select the correct namespace

4. Change the value of the specified language to value C

5. Save the translations

6. Repeat manually for every environment (see Pro Tips Part 1)

“It was a time-consuming and manual work is error prone. One drawback of the default translation tool is that it always saves all translations, whether the value has changed or not. Since we deal with two or three hundred translations for each application, the tool would sometimes choke on it,” said Andy Somers.


The new way

The new and improved in-page translation process offers two major advantages:

1. A controlled way to change the value of a specific label on the page itself.

2. An in-page translation system that could be used by the client as well.



Here’s how you can optimize your translation process with this Pro Tips synchronization method.


Start Here:

The code of the stored procedures and the HTML page can be found here on Bitbucket as a Git snippet.

Our pro solution for in-site translations is somewhat complex and involves the following parts: a Selligent campaign, a stored procedure, Javascript and changes in the DOM structure in the pages of the application.



As demonstrated in part 1, the labels table needs to be represented by a data list. In our example, we've named it 'templabels'.


Stored procedure

The code for the SP_SETLABEL stored procedure is present in our Git snippet. Create this in the Registered stored procedures section of Selligent.



The campaign for this solution is fairly straightforward, based on the templabels list, add an input component and the stored procedure. It should look like this:

The flow

The input parameters for the stored procedure are as follows:

Stored procedure properties


Configure this campaign as a probe in the pages where you want in-page translation to be supported.


What to do with the Javascript file

The Javascript file in our Git snippet can be placed in the Web folders of your Selligent installation, so that you can include it in your pages.


The application campaign

In order for the Javascript to work, you need to configure some things on your application campaign by using a shared storage component. Drop it in the beginning of your flow and configure the variables as follows:

Sjared variable properties


If you set translationAllowed value to '0', this will ensure that the translation tool will never be enabled.

Important: Make sure this is set to 0 in production!

The namespaceid variable is the id for the namespace with which this page is configured. Make sure this is correct, or the tool will not work. Even worse, the tool will work, but change or add translations keys to other namespaces. Also note that we do not support multiple namespaces. Using multiple namespaces for a page is probably a bad idea in itself.


The application pages

First off, all the pages you want to translate with the in-page translation tool need to include the Javascript file. With the following snippet, this can be achieved:

JS file


The script src attribute needs to change to the location of the Javascript file in the web folders. The probe set in the translationUrl variable needs to point to the input component of the translation campaign.

In the next step, all the translations in your page with the ~$LABEL_KEY~ construction need to be surrounded by a span with the following attributes: data-namespaceid, data-language and data-name. For example:

Namespace ID

As you can see, the namespaceid will be configured by the shared variables that you set in the campaign. The language is coming from the users request and the data-name attributes is the key of the label you want translated.


How to use Translate Mode

You’re ready! When looking at your application in the browser, add a parameter to the url to activate the translate mode: &translateMode=1. In the console you can see whether or not the Translate Mode is on.

If so, all translatable items will be surrounded by a green border. When you click and hold on of these items for three seconds, a Javascript input box will appear with the current translation. Changing the value and clicking OK will save it to the labels table.


Caveats and disclaimers

Note that these tools make changes in the labels table of Selligent. This is a system table, which means this might change in the future without warning. Be careful when writing stored procedures on this kind of table, because you might break the system.

Also, apart from your system backups, there is no way to retrieve overwritten translations!

Please make sure you prevent the in-site translation tool from appearing in production (as described in the manual above).

This tool is not secure in any way and anybody that knows how could change your translations irrevocably.



Combining this Pro Tip with the tool we described in the first part of this article series is adding strength to strength. The professional double-punch delivers a fast way of translating labels and copying them to different environments. Soon you will be asking: “How did we ever do this any differently?!”

Once again thanks to Andy Somers at Foreach for sharing this two-part Pro Tip on optimizing translation in Selligent. Stay tuned for more Pro Tips from Selligent.


Have a Pro Tip to contribute? Talk to your Selligent service partner or contact us directly at [email].



Comment, Like, Share

See our platform in action

book a demo