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.
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.
WORKING WITH THE NEW METHOD
Here’s how you can optimize your translation process with this Pro Tips synchronization method.
The code of the stored procedures and the HTML page can be found here on Bitbucket as a Git snippet.
As demonstrated in part 1, the labels table needs to be represented by a data list. In our example, we've named it 'templabels'.
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 input parameters for the stored procedure are as follows:
Configure this campaign as a probe in the pages where you want in-page translation to be supported.
The application campaign
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
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:
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.
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].