# How to internationalize the header of editableList

**URL:** <https://discourse.nodered.org/t/how-to-internationalize-the-header-of-editablelist/94116>\
**Category:** Developing Nodes\
**Created:** [23 December 2024 08:05 UTC](https://discourse.nodered.org/t/how-to-internationalize-the-header-of-editablelist/94116 "2024-12-23T08:05:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lau-Yx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lau-yx/32/97478_2.png) [@Lau-Yx](https://discourse.nodered.org/u/Lau-Yx)\
**Post date:** [23 December 2024 08:05 UTC](https://discourse.nodered.org/t/how-to-internationalize-the-header-of-editablelist/94116/1 "2024-12-23T08:05:59Z")

</div>

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

```auto
$("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:

```auto
$("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:

```auto
$("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?

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [23 December 2024 10:48 UTC](https://discourse.nodered.org/t/how-to-internationalize-the-header-of-editablelist/94116/2 "2024-12-23T10:48:58Z")

</div>

Hi and Welcome,

Try with:

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

```

---

<div class="post-metadata">

**Author:** ![Lau-Yx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lau-yx/32/97478_2.png) [@Lau-Yx](https://discourse.nodered.org/u/Lau-Yx)\
**Post date:** [24 December 2024 00:42 UTC](https://discourse.nodered.org/t/how-to-internationalize-the-header-of-editablelist/94116/3 "2024-12-24T00:42:13Z")

</div>

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`:

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

```

And here is the JavaScript code that I used:

```auto
$("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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [24 December 2024 04:38 UTC](https://discourse.nodered.org/t/how-to-internationalize-the-header-of-editablelist/94116/4 "2024-12-24T04:38:25Z")

</div>

You are missing the nodes name at the front

[https://nodered.org/docs/creating-nodes/i18n](https://nodered.org/docs/creating-nodes/i18n)

---

<div class="post-metadata">

**Author:** ![Lau-Yx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lau-yx/32/97478_2.png) [@Lau-Yx](https://discourse.nodered.org/u/Lau-Yx)\
**Post date:** [24 December 2024 05:31 UTC](https://discourse.nodered.org/t/how-to-internationalize-the-header-of-editablelist/94116/5 "2024-12-24T05:31:44Z")

</div>

It works. Thank you so much.

This approach differs from using HTML directly.

When using HTML:

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

```

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

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

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 January 2025 05:32 UTC](https://discourse.nodered.org/t/how-to-internationalize-the-header-of-editablelist/94116/6 "2025-01-07T05:32:16Z")

</div>

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