# New third-party iframe widget & updated docs

**URL:** <https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [10 May 2024 15:44 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865 "2024-05-10T15:44:44Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [10 May 2024 15:44 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/1 "2024-05-10T15:44:44Z")

</div>

Hi All, just wanted to do a little shout to say that I've just published a much-requested node for Dashboard 2.0 - `ui-iframe`: [node-red-dashboard-2-ui-iframe (node) - Node-RED](https://flows.nodered.org/node/@flowfuse/node-red-dashboard-2-ui-iframe) as a third-party widget.

It's available now, and can embed into any group within your Dashboard 2.0 applications.

Just to answer the inevitable question - _"can I make the iframe full screen"_ - not yet. It'll come, and may well come with some underlying structural changes to how we do sizing generally in Dashboard 2.0.

I've also added a section to our docs to list known third-party widgets available for Dashboard 2.0 too, you can see that [here](https://dashboard.flowfuse.com/nodes/widgets.html#third-party-widgets).

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [10 May 2024 19:02 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/2 "2024-05-10T19:02:48Z")

</div>

Fantastic work. Great step forward.

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [21 May 2024 22:59 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/3 "2024-05-21T22:59:06Z")

</div>

Hi,

can you please give me an example flow with http page,  
i tried the widget but I cannot see anything on the page ?

thanks

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [22 May 2024 06:18 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/4 "2024-05-22T06:18:24Z")

</div>

Its likely you'll need to restart Node-RED after installing the iframe node.

I need to work on a bettwr eay of loading it so that this step isnt requieed

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [22 May 2024 10:38 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/5 "2024-05-22T10:38:49Z")

</div>

Thanks,

thas was it. 😃

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [28 May 2024 17:39 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/6 "2024-05-28T17:39:47Z")

</div>

Hi,

I have three iframes on a page,

sometimes when I navigate to this page, I see three times the last iframe,  
when i refresh the page with F5, it shows the three different iframes ?

 ![Screenshot-graphana1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4ace8e246005cb0d8fdc470dbae51a9fe60505d9.jpeg)

after refresh

 ![Screenshot-graphana2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/feed581d1de45fea32284cfacbabc17d6a051de4.jpeg)

```auto
[
    {
        "id": "1e3f7eaa6d9ba3d5",
        "type": "ui-iframe",
        "z": "bc177cd36da9ce47",
        "g": "a6edcd62a7ed016d",
        "name": "temperature",
        "group": "929305cee870702d",
        "order": 1,
        "src": "http://dummy",
        "width": 6,
        "height": "5",
        "x": 950,
        "y": 6120,
        "wires": []
    },
    {
        "id": "929305cee870702d",
        "type": "ui-group",
        "name": "My Group",
        "page": "9c87487d35af84fe",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "9c87487d35af84fe",
        "type": "ui-page",
        "name": "grafana",
        "ui": "91ac914334bc2f74",
        "path": "/grafana",
        "icon": "home",
        "layout": "grid",
        "theme": "713e504734925435",
        "order": 12,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "91ac914334bc2f74",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "713e504734925435",
        "type": "ui-theme",
        "name": "HN Theme",
        "colors": {
            "surface": "#5c5c5c",
            "primary": "#0094ce",
            "bgPage": "#383838",
            "groupBg": "#4f4f4f",
            "groupOutline": "#858585"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [28 May 2024 18:06 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/7 "2024-05-28T18:06:11Z")

</div>

Have you set the src as part of the node config for these, or is it dynamically set at runtime?

Definitely an odd one 🤔

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [28 May 2024 18:11 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/8 "2024-05-28T18:11:31Z")

</div>

dynamically,

adapted from an dashboard 1 example,  
panelid's are 1,2,3

```auto
let panelid = 1

var newMsg={"src":null}

newMsg.src = "http://192.168.70.190:3000/d-solo/bdmo7ceu462v4c/mydashboard?orgId"
    +
    "&refresh=1m" +
    "&theme=dark" +
    "&from=" + msg.payload.fromdate +
    "&to=" + msg.payload.enddate +
    "&panelId=" + panelid

return newMsg;

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [29 May 2024 14:23 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/9 "2024-05-29T14:23:59Z")

</div>

Have tried to replicate with:

```json
[
    {
        "id": "1c29cfb4332ab651",
        "type": "inject",
        "z": "39687e2457e622f1",
        "name": "editor",
        "props": [
            {
                "p": "src",
                "v": "/",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 410,
        "y": 120,
        "wires": [
            [
                "c0489bef35748b70"
            ]
        ]
    },
    {
        "id": "f852e128e6bcc295",
        "type": "inject",
        "z": "39687e2457e622f1",
        "name": "nodered.org",
        "props": [
            {
                "p": "src",
                "v": "https://nodered.org",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 430,
        "y": 160,
        "wires": [
            [
                "40e07503ceef3498"
            ]
        ]
    },
    {
        "id": "40e07503ceef3498",
        "type": "ui-iframe",
        "z": "39687e2457e622f1",
        "name": "",
        "group": "bb21a845cf454195",
        "order": 0,
        "src": "http://dummy",
        "width": 6,
        "height": 8,
        "x": 570,
        "y": 160,
        "wires": []
    },
    {
        "id": "c0489bef35748b70",
        "type": "ui-iframe",
        "z": "39687e2457e622f1",
        "name": "",
        "group": "bb21a845cf454195",
        "order": 0,
        "src": "http://dummy",
        "width": 6,
        "height": 8,
        "x": 570,
        "y": 120,
        "wires": []
    },
    {
        "id": "bb21a845cf454195",
        "type": "ui-group",
        "name": "iframe",
        "page": "85043ba28e0273fe",
        "width": "10",
        "height": "8",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "85043ba28e0273fe",
        "type": "ui-page",
        "name": "Third Party Widgets",
        "ui": "c2e1aa56f50f03bd",
        "path": "/third-party",
        "icon": "account-group",
        "layout": "grid",
        "theme": "129e99574def90a3",
        "order": 2,
        "className": "",
        "visible": true,
        "disabled": "false"
    },
    {
        "id": "c2e1aa56f50f03bd",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-control",
            "ui-notification",
            "ui-text",
            "ui-template"
        ],
        "showPathInSidebar": true,
        "navigationStyle": "temporary",
        "titleBarStyle": "fixed"
    },
    {
        "id": "129e99574def90a3",
        "type": "ui-theme",
        "name": "Another Theme",
        "colors": {
            "surface": "#000000",
            "primary": "#ff4000",
            "bgPage": "#f0f0f0",
            "groupBg": "#ffffff",
            "groupOutline": "#d9d9d9"
        },
        "sizes": {
            "pagePadding": "24px",
            "groupGap": "12px",
            "groupBorderRadius": "9px",
            "widgetGap": "6px"
        }
    }
]

```

but am not able to. The only thing I can think of that's occurring is you've got injections going into the wrong iframe, or the wrong values going into the wrong iframe nodes?

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [29 May 2024 17:01 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/10 "2024-05-29T17:01:03Z")

</div>

Hi,

it happens on PC with firefox (I did not see it on Android tablets) and only the first time I go to grafana page.

1. I connect to the dashboard
2. it' on the start page, then I navigate to my grafana page.
3. I sometimes get a wrong page, I cannot see the grafana loading symbol inside the iframes,
4. I go back to start page and back to grafana page, then I see grafana loading symbols and page is ok.

today I got the following

 ![Screenshot-iframe-wrong2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/51bc0677e7c9de44d25c988517d798020e700927.jpeg)

I opened the inspect console in firefox (sorry no experience yet) and saved th following messages

```auto
setup 
Object { RED: {…}, socketio: {…}, basePath: "/dashboard" }
index-DEHum2uc.js:52:34800
SIO connected index-DEHum2uc.js:244:408793
ui-config received. topic: 91ac914334bc2f74 payload: 
Object { dashboards: {…}, heads: {}, pages: {…}, themes: {…}, groups: {…}, widgets: {…} }
index-DEHum2uc.js:236:12226
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. 3 mydashboard
WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER. 3 fp.esm.js:2388:27
[Deprecation warning] DataSource influxdb: templateSrv.getAdhocFilters is deprecated. Use filters property on the request (DataQueryRequest). Or if this is called from interpolateVariablesInQueries or applyTemplateVariables it is passed as a new argument instead 3 deprecationWarning.ts:14:12

```

I also tried to get some information of the iframes.  
I made two pictures of the content, one of wrong page and another of good page, but I cannot see any difference ?

wrong page

 ![Screenshot-iframe-wrong](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6f6e5ba77e43c0291da4ab890f07f843f67a9785.jpeg)

page ok

 ![Screenshot-iframe-ok](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/4512e909fd17cca6fc1fb52489ce80b8372ed868.jpeg)

It's not so important, because until now it does not happen on the Android tablets.  
Please tell me if I can test anything else.

---

<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:** [28 June 2024 17:01 UTC](https://discourse.nodered.org/t/new-third-party-iframe-widget-updated-docs/87865/11 "2024-06-28T17:01:37Z")

</div>

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