# RED.sidebar plugin UI updation from JS file

**URL:** <https://discourse.nodered.org/t/red-sidebar-plugin-ui-updation-from-js-file/81267>\
**Category:** General\
**Tags:** editor\
**Created:** [13 September 2023 07:37 UTC](https://discourse.nodered.org/t/red-sidebar-plugin-ui-updation-from-js-file/81267 "2023-09-13T07:37:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pioneerj](https://avatars.discourse-cdn.com/v4/letter/p/6bbea6/32.png) [@Pioneerj](https://discourse.nodered.org/u/Pioneerj)\
**Post date:** [13 September 2023 07:37 UTC](https://discourse.nodered.org/t/red-sidebar-plugin-ui-updation-from-js-file/81267/1 "2023-09-13T07:37:32Z")

</div>

Hello All,

I have created a custom plugin to Node-Red Editor to add my tab to sidebar.  
I referred:

> **[GitHub - node-red-jp/node-red-contrib-plugin-chatgpt](https://github.com/node-red-jp/node-red-contrib-plugin-chatgpt)**
>
> Contribute to node-red-jp/node-red-contrib-plugin-chatgpt development by creating an account on GitHub.

I have two files in plugin:  
**testplugin.html**

I have created a drop down list like this:

```auto

    var x = document.createElement("SELECT");
    x.setAttribute("id", "mySelect");
    document.body.appendChild(x);

    var z = document.createElement("option");
    z.setAttribute("value", "css");
    var t = document.createTextNode("CSS");
    z.appendChild(t);
    document.getElementById("mySelect").appendChild(z);

```

**testplugin.js**

In js I am having HTTP listener like this:

> <https://github.com/node-red-jp/node-red-contrib-plugin-chatgpt/blob/main/chatgpt.js>

On getting any data on **/chatgpt** I want to update my drop-down list which I created in HTML file dynamically.

Can you please help me how can I do this ?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 September 2023 08:28 UTC](https://discourse.nodered.org/t/red-sidebar-plugin-ui-updation-from-js-file/81267/2 "2023-09-13T08:28:39Z")

</div>

You already have the `done` callback in your call to the `/chatgpt` API endpoint, that is where you update your drop-down. You should also include a `fail` callback so that you can notify the Editor when the call fails for whatever reason.

---

<div class="post-metadata">

**Author:** ![Pioneerj](https://avatars.discourse-cdn.com/v4/letter/p/6bbea6/32.png) [@Pioneerj](https://discourse.nodered.org/u/Pioneerj)\
**Post date:** [13 September 2023 10:15 UTC](https://discourse.nodered.org/t/red-sidebar-plugin-ui-updation-from-js-file/81267/3 "2023-09-13T10:15:27Z")

</div>

Hello @TotallyInformation ,  
Thank you for reply.

Yes, that is true.  
But when I am trying to do access that dropdown in js file, it is not able to do so.  
I tried : document.getElementById("id of dropdown");

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 September 2023 11:16 UTC](https://discourse.nodered.org/t/red-sidebar-plugin-ui-updation-from-js-file/81267/4 "2023-09-13T11:16:46Z")

</div>

No, you have to do it in the Editor not in the runtime.

It is in the editor that you trigger your API call and get the response in the `done` function so that is where you update the drop-down.

---

<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:** [12 November 2023 11:17 UTC](https://discourse.nodered.org/t/red-sidebar-plugin-ui-updation-from-js-file/81267/5 "2023-11-12T11:17:18Z")

</div>

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