Chart pages with variables

[thefathefa]

Hello,

I read here MainUI pages and props that there is no way to use props for pages and that an alternative would be to use variables…

My use case is that I have multiple graph pages that are presenting the same set of info (in graphs) for different rooms…
I would like to “widgetize” the pages if there is a way to do this…

I have tried using vars like this:

uid: widget_simple
tags: []
timestamp: Nov 6, 2025, 4:37:51 PM
component: oh-chart
config:
  chartType: ""
  label: Hello
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        name: Value
        scale: true
        gridIndex: 0
  series:
    - component: oh-time-series
      config:
        item: =vars.item
        name: Item
        type: line

and the page using the widget:

config:
  label: testchart2
vars:
  item: "Room_Temperature"
slots:
  default:
    - component: widget:widget_simple

But the page definition does even get saved…

Is there to have parameterized pages ? If yes, how…

Thanks,

PS : I did try all possible ways with props until I realized it was not going to work from the post mentioned above…

[JustinG]

For historical reasons, the page configuration option is defineVars, so you want you page config to look like this:

config:
  label: testchart2
  defineVars:
    item: "Room_Temperature"

If you are trying to pass a variable value back and forth between custom widgets, however, there is a caveat. A widget called using something like: - component: widget:widget_simple can receive a variable value form the parent page, but changes that widget makes to the variable internally are not passed back up to the parent.

@thefathefa

I would like to “widgetize” the pages if there is a way to do this…

Depending on the details of how you are bringing up this page, though, defineVars may be unnecessary. If you are bringing up this page by clicking on a link in the OH side bar then you do have to define the variables in the page config. If you are always going to access this page by navigating from some other page then you don’t have to worry about defineVars and you just need to follow the example in the solution to the thread you linked passing information using the navigation action configurations.

[thefathefa]

Tahk you Justin for the patient explanation… I re-read the first discussion and I think I understand 1. that what I’m trying to do is possible and 2. that it might not be that complicated but I’m not able to get it to work…

Few questions : the target page for the navigation should be a page or a widget? If a page, and a chart page, I did not find the way to define the props…

Then, am I correct that if I use main UI to create the link (from a oh-list-item for example), and specify navigation to a page, the UI is supposed to somehow “read” the props and allow me to set them, right?
If yes, I think I’m stuck because of not being able to define the destination page properly…

Sorry if this is beginner’s question… I’ve looked at it together with AI buddies and was not able to find a way to configure props that would stick to the page definition…

Another question : I was under the impression that the example you were giving in the thread I linked in my first message was assocated to the usage of defineVars, and I thought you were saying that might not be necessary in my case (I don’t need the bidirectional value passing mechanism you mentioned).

[thefathefa]

What I have at the moment is a graph page defined as follows:

config:
  label: testpagechart4
  props:
    parameters:
      - name: item
        type: TEXT
        label: Item to display
        context: item
    parameterGroups: []
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
  series:
    - component: oh-time-series
      config:
        name: Series 1
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: "=(props.item)"

and a list item defined as follows:

component: oh-list-item
config:
  title: Temperature
  action: navigate
  actionPage: page:testpagechart4
  actionPageProps:
    item: Room_Temperature
  actionPageTransition: f7-circle

I know actionPageProps is probably not right… but did not find anything else…

[thefathefa]

It works if I define the action as modal:

component: oh-list-item
config:
  label: testpagechart4
  action: popup
  actionModal: page:testpagechart4
  actionModalConfig:
    item: Room_Temperature```

[JustinG]

@thefathefa

Sorry if this is beginner’s question…

Actually, I’d rate this as a somewhat advanced question and a perfectly reasonable one at that.

@thefathefa

I know actionPageProps is probably not right… but did not find anything else…

You’ve very nearly got it. The property you are looking for when using the navigation action is actionPageDefineVars.

  config:
    action: navigate
    actionPage: page:testpagechart4
    actionPageDefineVars:
      item: Room_Temperature

[thefathefa]

Ok very good, thank you.

I’ll try tomorrow.

On the page side, if I use defineVars, it means I need to describe the graph with vars.item then, and not props.item, correct?

And I should remove the props definition from the top of the page?

[JustinG]

@thefathefa

On the page side, if I use defineVars, it means I need to describe the graph with vars.item then, and not props.item, correct?

Correct. Anything in the actionPageDefineVars object will be automatically injected into the vars object of the page. So, vars.item and not props.item.

@thefathefa

And I should remove the props definition from the top of the page?

I would. But they shouldn’t actually interfere.

[thefathefa]

Thank you again, Justin. Works fine. So, summary :

• regular target graph page, using vars.xxx instead of props.xxx
• actionPageDefineVars after action and actionPage in the calling page

[thefathefa]

Ah, I was planning to use this within oh-tab and I think it will not work…

I tried this below but it does not work:

  - component: oh-tab
    config:
      icon: f7:squares_below_rectangle
      page: page:testpagechart4
      pageDefineVars:
        item: Room_Temperature
      title: Test
    slots:
      default: []

Any alternative that you would know of?

[JustinG]

Oh, tabs are a whole different problem. I’m think there might be a solution using defineVars in the page headers, but I’m not 100% sure. I’ve not tried anything like this with tabs. I’m reasonably certain there’s no way to make the navigation action trick work with tabs.

[thefathefa]

Ok, thanks for your help this far and in general I’ll poke around to see what I can do with tabs.