MainUI pages and props

the documentation of the MainUI says that it is possible to use props/parameters in pages here and here. However I don’t manage to do that. When I try to add a parameter like

   - name: prop1
     label: Prop 1
     type: BOOLEAN

to a page in the code tab it is not saved.

Can anybody give me a hint?


That first link is for “Components and Widgets”, not pages.

The second link is is the same.

That page shows how to create Widgets, not whole Pages. As fas as I’m aware you cannot create properties for a whole page. But you can set variables… Is that what you are trying to do?

Thank’s for your answer.

Yes the you are right the link is about ‘Components and Widgets’. But there it says:

Pages are examples of root components

and here:

pages, like any root UI component, may indeed have props

And also in the image or label widget edit dialog is a hint to props and pages

That is probably something that needs to be changed since it is confusing.

To make things more clear.

  1. The only place where it even makes sense to define properties is Developer Tools → Widgets.

  2. The properties get filled out when you add the widget to a page

  3. As far as I’m aware, you cannot define a Page under Developer Tools → Widgets. But even if you could, there is no way to add a new Page based on a custom widget.

You cannot define new Properties for the Page nor widgets you put on a Page on the Page Itself. There’s no reason to. You should use variables or just hard code it in place.

As for the second screen shot, indeed there are a set of hard coded Properties that you can set on a Page. But they are predefined properties, not properties you define yourself.

thank’s for the explanation.

This was the missing part

if I understand correctly, there is no easy way to implement the following example:

I have several oh-image widgets on one page. When clicking on one of these widgets, I want to navigate to another page, which also contains an oh-image widget. This image widget should show the same image as the one clicked on.

A possible solution would be to create a page for each image. What I see as rather unsatisfactory.

Another possibility would be to pass the URL by variable, but I don’t see a way how I can set a variable on a click on an oh-image widget as well as navigate to another page.

is there a typical way to do this?

I believe that use case would be handle with a popover, not a separate page.

There are also action variables.

To be a bit more clear: I would like to open a let’s say full screen image of a camera stream after clicking on the small thumbnail image. A popover is not the right thing for that. I’m using the UI on some wall mounted tablets. Also a popup is still not big enough. So navigating to a special camera page with a big image of the camera stream and a few buttons would be perfect. But I don’t like to create different pages for any of my cameras.

And yes I’ve read about action variables, I think they only work if the action is set to variable, but then it is no longer possible to open a popover, popup or navigate to a different page.

I don’t know that widgets are limited to only one Action. But if variables won’t work, popups won’t work, the actionPhoto/actionPhotoBrowser won’t work and we already know that properties won’t work than yes, you’ll have to create a page for each camera to implement this exactly how you want to.

Yes, there is a built-in way to this. The action you are looking for is the navigate action. This will use the app’s native f7 routing to move to the indicated page. But in addition to just moving to a page you can set a series of variables that will be passed to the new page’s vars object for use in the new page.

For example I have page with a widget that uses a variable for its configuration:

- component: widget:settings:sensor_controller_detail
    controller: =vars.controller || 'ControlGroup_MasterBedroom'

If I want to open this page for a particular controller value, then from some other widget I navigate to this page and use actionPageDefineVars to pre-set the controller variable on the target page:

- component: oh-list-item
    action: navigate
    actionPage: page:settings_sensorcontrol_details

At the moment I believe they are. It is possible to get around that sometimes by taking direct advantage of the f7 popupOpen properties to open a popup without using the OH action and the use the OH action to set some variables, but there’s no way to trigger two OH actions with the same widget simultaneously, that I’m aware of.


That is what I’m was looking for! Thanks!

I’m just wondering, is that documented anywhere?

It might not be. At the very least is should probably be added to the default navigation action docs.