Custom component with library-translate not working

[Ruhtra]

Hello everyone,

I don't know if this post is in the right forum, but we are currently facing an issue while developing a custom component and using the "library-translate" package (in 19.1.0). 

We are using it following the documentation in Zurich ; https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/ui-framework/recipes/tran...

I created a sys_ui_message with a key "test.my.message" on my instance ; installed the package in my project, imported the function "t" and using it in my code like that : 

In development mode, it displays my key (it doesn't translate).

But after deploying my component, it totally breaks with an error in the console ; 

 

The error is coming from the "library-translate" package itself.

Maybe I am using it wrong, but I can't find resources or examples on how to use it.

Do you have some resources or examples to fix this ?

[mayankkumar]

Hi @Ruhtra,
You can try Component Builder provided by ServiceNow OOB from Zurich Release
refer this -> Create custom components to reuse across pages with component builder
and there's CLI approach, you can refer this tutorial video -> Checklist Tutorial - ServiceNow Next UI Custom Component Development

other useful resources -> Creating Custom Components – ServicePortal.io
-----------------------------------------------------------------------------------------------------------------------------------------
Please mark my response helpful and accept as solution
Thanks & Regards
Mayank

[Ruhtra]

Hello @mayankkumar, thanks for your reply.

Unfortunately, these resources do not cover the translation of a text.

We already know how to build and deploy a component. Our problem is only focused on translating labels in it.

[mayankkumar]

Okay @Ruhtra, I will look into it again and let you know if found something helpful.

[regis_sarle_ev1]

Hello @Ruhtra ,

I struggled with this also. I opened a case with Snow support but it was not helpful so far.

As a temporary solution, I modified the library and replaced the lines 70 to 73 by : 

try{

	if (process && process.env && parseInt(process.env.SN_TRANSLATE_COMPAT)) 
		attachToWindow({ compat: true });
	else
		attachToWindow();
}
catch(err){
	attachToWindow();
}

And it is working fine until we have an update on the library.

Another thing that is not explained in the documentation is that the translate library do not work at all like the getMessage API. It only is a shortcut to the translated object that the workspace stores in memory during the loading of the workspace. You can check the window.__TRANSLATIONS__ object in the browser's console of a loaded workspace. It is the "bank" of all the translations accessibles to this workspace. So the translated messages must be pushed into this object before the workspace is rendered.

You need to declare all the messages that need translation into the now-ui.json file. Add a property called "requiredTranslationKeys" at the same level as "properties" in the JSON. It has to be an array, containing all the strings that needs translation. 

For example :

	"properties" : [
		{
          "name": "title",
          "label": "Component title",
          "fieldType": "string",
          "required": false			
		}
	],
	"requiredTranslationKeys" : [
		"download all",
		"sort a to z",
		"sort z to a"
	],

After deploy, it will add the messages to the 'Required translation keys' field of you component record from sys_ux_lib_component table with following syntax : 

[{"message":"download all"},

{"message":"sort a to z"},

{"message":"sort z to a"}]

Then and only then, the translations will be accessible to the library-translate. For example, t("download all") will return the translated string.