Beginner question to OH Widgets in MainUi

I try to get startet creating widgets for mainUi. I was playing around a bit with it and trying to create my first simple widget. But i have the following issue and seem to be unable to find out why.

This is the “testWiget”

uid: Automations
    - description: Name of the automation
      label: Name
      name: title
      required: false
      type: TEXT
    - context: item
      description: The Automation switch Item
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Oct 12, 2022, 9:39:19 AM
component: oh-toggle-item
  icon: f7:leaf_arrow_circlepath
  iconColor: '=(items[props.item].state == "ON") ? "green" : "gray"'
  color: '=(items[props.item].state == "ON") ? "green" : "gray"'
  title: =props.title
  item: =props.item

In the preview"Widget it looks like that:

If i use it in a Page it looks like that:

So why are the icon,text and toggle beneath each other in the page but not in the preview?
Where is the white dot coming from?

Maybe share your full page code, where you use your widget.

The oh-toggle-item is supposed to be included into a list, if you want to use a toggle without a list, maybe look at oh-toggle instead of oh-toggle-item

With items[props.item].state I can retrieve the state of an item, but how do I retrieve (display) the label of an item?

What is a good documentation source to consult on this matter?

I find this documentation on custom widgets hard to understand as a beginner.

A label cannot be accessed directly. Only using an oh-repeater would give you that information and even more…

Edit: Here is an example :

    - component: oh-repeater
        fetchMetadata: semantics,metadata,widgetOrder
        for: item
        sourceType: itemsWithTags
        itemTags: ","
        filter:"item you are looking for"

Then you can access the label with loop.item.label.

1 Like

@Matze0211 Here is a code of my test page with only this wigdet in it.

  label: test
  sidebar: true
  - component: oh-block
    config: {}
        - component: oh-grid-row
          config: {}
              - component: oh-grid-col
                config: {}
                    - component: widget:Automations
                        item: DG_Zimmer1_Beschattungsautomatik
                        title: Testitem
              - component: oh-grid-col
                config: {}
                  default: []
  - component: oh-block
    config: {}
      default: []
masonry: null
grid: []
canvas: []

I now found out that the same happens to some of the wigets from the market place. For example

the first 2 are from the marketplace…
Am I getting something completly wrong here?
how would i correctly put it in a list?

@loovanloon Is your question anyhow conected to my problem?

@borderbridge No, my question is not substantively connected to your problem.
My question is also a “beginner question”, that’s all.

The first problem I see is you’ve created a widget based on a List Item widget. List Item widgets can only be shown inside of a list widget (e.g. inside the cards on the Locations, Equipment, and Properties tabs). These widgets cannot be added to a Layout Page individually like this. MainUI can’t render them properly. Note, all the list Item widgets end with “-item”.

So you either need to put this widget inside one of the List widgets (e.g. oh-list) , or you need to change it to be based on the oh-toggle widget which is stand alone.

You should open another thread when you have a question or comment unrelated to the original post.