# Make tab link dynamic?

**URL:** <https://discourse.nodered.org/t/make-tab-link-dynamic/56903>\
**Category:** Dashboard\
**Created:** [19 January 2022 06:35 UTC](https://discourse.nodered.org/t/make-tab-link-dynamic/56903 "2022-01-19T06:35:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dalethomas81](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dalethomas81/32/54567_2.png) [@dalethomas81](https://discourse.nodered.org/u/dalethomas81)\
**Post date:** [19 January 2022 06:35 UTC](https://discourse.nodered.org/t/make-tab-link-dynamic/56903/1 "2022-01-19T06:35:58Z")

</div>

In the Layout section of my dashboard, I have added a link that opens in an iframe. Is it possible to make the link dynamic?

My idea has been to somehow use the ui\_template node to embed a url in the header and then reference it in the 'Link' field. However, I do not know enough about HTML and Angular to do that.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/b/fb8903de36b1b84242cf39f902a8d1da6b9ee267.jpeg)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [19 January 2022 15:26 UTC](https://discourse.nodered.org/t/make-tab-link-dynamic/56903/2 "2022-01-19T15:26:36Z")

</div>

It would be much easier if you create a new tab. On the tab just have a iframe node.

then just send the link in the url property.

eg use a function node or change node and set msg.url ="your link here" then pass to the iframe node

---

<div class="post-metadata">

**Author:** ![dalethomas81](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dalethomas81/32/54567_2.png) [@dalethomas81](https://discourse.nodered.org/u/dalethomas81)\
**Post date:** [19 January 2022 22:52 UTC](https://discourse.nodered.org/t/make-tab-link-dynamic/56903/3 "2022-01-19T22:52:11Z")

</div>

> [@Sean-McG](#):
>
> change node a

I think that is what I am going to have to do - and its a fairly good idea as well.

Thank you for the response. I'll leave this open for another day or two and see if anyone has another idea.

---

<div class="post-metadata">

**Author:** ![dalethomas81](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dalethomas81/32/54567_2.png) [@dalethomas81](https://discourse.nodered.org/u/dalethomas81)\
**Post date:** [20 January 2022 08:09 UTC](https://discourse.nodered.org/t/make-tab-link-dynamic/56903/4 "2022-01-20T08:09:02Z")

</div>

Ok, I figured out how to do this with a pretty straightforward technique. (To be clear, the solution offered by @Sean-McG is a valid one. However, the issue with that is the iframe does not resize with your browser and is constrained to the widget. The ui\_link solution is much more elegant in my opinion.)

What I ended up doing is redirecting urls using the Http in and out nodes to the urls that I want to be dynamic. For example, now if you enter in [http://node-red-server:1880/ui/PiSugar](http://node-red-server:1880/ui/PiSugar), it will redirect you to the url of PiSugar. (I have to give credit to @knolleary from [this](https://stackoverflow.com/a/50847546) Stackoverflow post on how to redirect urls using node-red).

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6a9a846fdf70632c424755409445bb7e410b1334.png)

Inside the function node, I am able to get my hostname variable and inject it into the Location property.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0f80c72d87d3bf63249d5325c2dc5b30cccea91d.jpeg)

Lastly, for the ui\_link node settings I have PiSugar for the link.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8fc9e6cc39f027e1fdec027d4b1c64d9c8573aa7.jpeg)

This produces a much more elegant iframe.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/ed1e0ef6335e739378a7ce7709536c885527e9b0.jpeg)

---

<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:** [3 February 2022 08:09 UTC](https://discourse.nodered.org/t/make-tab-link-dynamic/56903/5 "2022-02-03T08:09:26Z")

</div>

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