Change the Trend URL

[sjfp]

Hi we have a energy page which uses widgets to show relevant energy data like Volts, Amps, PF, Etc.
We have various buttons Btn1, Btn2, Btn3 etc, which we have named which widget page to show, like M1-Energy, M2-Energy.
At present when the button is pressed, the correct widget is shown over the top of the Energy Trend Frame, and when the button is pressed again it then shows a Trend Frame for all Meters.
Question is, would it be possible rather than showing the default Trends page for all meters, we could only show the trend page for relevent meters.
Example if we press Btn2, Widget M2-Energy is shown, when Btn2 is pressed again then Trend Page M2-Energy is shown.

Any help or advise would be great.

[admin]

In Trends tab click "Direct link" button at the bottom of the page. There you can create links that show only certain trends.

[sjfp]

In Trends tab click "Direct link" button at the bottom of the page. There you can create links that show only certain trends.

Thanks seen that direct link, but not sure how can I get the URL to change depending on which button was pressed. We have around 20 Meters
like
M1 btn is pressed it should toggle between widget page M1-Energy and frame URL /scada-vis/trends?id=1&mode=week
M2 btn is pressed it should toggle between widget page M2-Energy and frame URL /scada-vis/trends?id=2&mode=week

[admin]

Try this, change widget IDs as needed:

Code:

const widgetId = 15 const frameWidgetId = 17 Visu.on('widget-ready', widgetId, ({ widget }) => {   const clickHandler = widget.component.compactModeClick   const frame = document.getElementById(`widget-frame-${frameWidgetId}`)   widget.component.compactModeClick = () => {     const shown = widget.component.showPopover     clickHandler()          if (shown) {       frame.src = '/scada-vis/trends?id=1&mode=week'     }   } })

[sjfp]

Hi admin, thanks for this but having a problems trying to impliment.
How do I find the widgetId & frameWidgetId Think I know we know the widgetID , but sure so chcking.

have placed the provide code like this in Custom JavaScript

$(function() {
const widgetId = 18
const frameWidgetId = ?????

Visu.on('widget-ready', widgetId, ({ widget }) => {
const clickHandler = widget.component.compactModeClick
const frame = document.getElementById(`widget-frame-${frameWidgetId}`)

widget.component.compactModeClick = () => {
const shown = widget.component.showPopover
clickHandler()

if (shown) {
frame.src = '/scada-vis/trends?id=1&mode=week'
}
}
})
});

not sure how to tie the button to the function, therefore not sure what to do for button 2, 3, 4, ..... 20 etc.

If you could provide a bit more info, I would appreciate the helping hand

[Daniel]

In Visu you can see the ID on any widget settings on the top.

[sjfp]

how do I find the iframe ID ?

[admin]

It's the same as frame widget ID.