How to internationalize the header of editableList

Developing Nodes
1

I am using the editableList plugin to create an editable list and I want to internationalize the "Name" field. However, I have tried several methods but none of them seem to work.

Current Code

$("ol.list").editableList({
    header: $("<div>").append($.parseHTML("<div style='width:40%; display: inline-grid'>Name</div>")),
});

Attempt 1

I first tried adding a data-i18n attribute for internationalization:

$("ol.list").editableList({
    header: $("<div>").append($.parseHTML("<div style='width:40%; display: inline-grid' data-i18n='xxxxxx' ">Name</div>")),
});

Attempt 2

I also tried using a template literal with a translation function:

$("ol.list").editableList({
    header: $("<div>").append($.parseHTML(`<div style='width:40%; display: inline-grid">${RED._("xxxxxx")}</div>`)),
});

Both attempts did not work as expected. Can someone help me understand what I might be doing wrong or suggest a better approach to achieve this?

2

Hi and Welcome,

Try with:

$("ol.list").editableList({
    header: $("<div>").append($.parseHTML("<div style='width:40%; display: inline-grid'><span data-i18n='node-red:common.label.name'></span></div>")),
});
1 Like
3

Thank you for your reply!

This method only works for the official translations of messages.json. However, when I created a custom node with a JSON file named transformation.json, the translation did not work as expected.

Here is the content of transformation.json:

{
    "transformation": {
        "label": {
            "default": "transform",
            "name": "Name"
        }
    }
}

And here is the JavaScript code that I used:

$("ol.list").editableList({
    header: $("<div>").append($.parseHTML("<div style='width:40%; display: inline-grid'><span data-i18n='node-red:transformation.label.name'></span></div>")),
});

Unfortunately, the translation did not work.

Could you please provide some guidance on how to properly set up and use custom translations for my custom node?

4

You are missing the nodes name at the front

https://nodered.org/docs/creating-nodes/i18n

5

It works. Thank you so much.

This approach differs from using HTML directly.

When using HTML:

<div data-i18n="myNode.label.name"></div>

This works as expected. However, when inserting the element via jQuery, it should be:

<div data-i18n="my-node-module/myNode:myNode.label.name"></div>
6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.