OH4 - extending existing widgets

Dirk_Albrecht · March 19, 2024, 8:02am

Before you shout at me …

I have read this contribution:
Expanding Widgets

What I’m trying to do is something a lot simpler – use an existing widget and add additional oh-xxx components into it.

This works for the “after” slot:

where I can for example add a label, a button, (or even an oh-slider).

However, I can’t get to work this for any other slot:

I tried to add (one, two three) oh-slider component(s) to the footer slot (that’s where the oh-slider-item has the oh-slider component). This does absolutely nothing…

Do you have any hint for me? or do I really have to recreate the full oh-list-item yaml from the .vue files first, just if I want to add something else than text to some other slot than after of existing oh-xxx components?

Many thanks.

JustinG · March 19, 2024, 1:14pm

If you are looking through the oh-list-item vue file then you will see that the reason this doesn’t work is that the footer slot has been rendered unusable in that definition.

github.com

openhab/openhab-webui/blob/main/bundles/org.openhab.ui/web/src/components/widgets/standard/list/oh-list-item.vue#L16


      
                      :badge="(config.divider) ? 'Divider' : (config.listButton) ? 'List button' : config.badge"
                      :accordion-item="isRegularAccordion && !config.divider && !context.editmode"
                      :link="(config.action !== undefined && config.action !== '' && !context.editmode) ? true : undefined"
                      @click.stop="openAccordionOrPerformAction"
                      :class="{ 'oh-equipment-accordion-item' : isEquipmentAccordion}"
                      ref="f7AccordionContent">
          <slot name="inner" #inner />
          <slot name="after" #after />
          <slot name="content" #content />
          <slot name="root-end" #root-end />
          <slot name="footer" #footer />
          <generic-widget-component slot="after" v-if="context.component.slots && context.component.slots.after && context.component.slots.after.length"
                                    :context="childContext(context.component.slots.after[0])" v-on="$listeners" />
          <f7-accordion-content v-if="context.parent.component.config.accordionList && !context.editmode">
            <generic-widget-component v-if="isRegularAccordion" :context="childContext(context.component.slots.accordion[0])" v-on="$listeners" />
          </f7-accordion-content>
          <f7-accordion-content slot="root" v-if="isEquipmentAccordion && !context.editmode">
            <generic-widget-component :context="childContext(context.component.slots.accordion[0])" v-on="$listeners" />
          </f7-accordion-content>
          <oh-icon slot="media" v-if="config.icon" :icon="config.icon" height="32" width="32" :color="config.iconColor" :state="(config.item && config.iconUseState) ? context.store[config.item].state : null" />
          <span slot="media" v-else-if="config.fallbackIconToInitial && config.title && context.parent.component.config && context.parent.component.config.mediaList" class="item-initial">{{ config.title[0].toUpperCase() }}</span>

Part of developing the oh- widgets for more beginner friendly use has meant reducing the amount of options and complexity. So yes, as things stand now, if you want to adjust the oh-list-item by putting something in the footer slot specifically, then you will need to recreate the base item from the original f7 components. If you understand most of what you are seeing in the vue files then this isn’t actually too lengthy a process. In fact, if I recall there are already several examples around the forums where others have already done most of this for you.

Dirk_Albrecht · March 19, 2024, 5:17pm

Hi Justin,
Thanks for the clear response…
Is it possible at all to add elements to this widget, like … after the footer. I can’t really see from the vue file, which slots are “usable” and which ones aren’t …

As for reconstructing the existing widgets via yaml-- I have seen a few questions, but no examples of this having been done. What I struggle with, is the pass-through of the item label (as title) and the item category (as icon)… I checked, whether they were handed down from some kind of oh-repeater… in the overlaying card… but no … there aren’t available through props.title/props.icon automatically. …

JustinG · March 19, 2024, 9:05pm

In the vue files, when you see a slot definition like this

<slot name="content" #content />

That slot will not be responsive to additional components via the yaml system. For the oh- components its the sections that say:

  <generic-widget-component slot="after" v-if="context.component.slots && context.component.slots.after && context.component.slots.after.length"
    :context="childContext(context.component.slots.after[0])" v-on="$listeners" />

That will allow you to add additional components in those slots (in this case the after slot).

Widget props are never more than you see. They are text values or number values or etc. But when you have a prop that is “an item” it is not the item object itself, but just the text representation of the item’s name (and using that name value, various components can access certain pieces of information about the item depending on the underlying code used). So, there isn’t going to be any other information associated with the item name property that you access in the widget expressions.

The only way to get the full set of information about an item is to make an API call to the actual OH instance (not the UI) and the only way the UI widgets do that is through the repeater. You can get a repeater to return only the information about a single item, but it requires a little bit of trickery and is usually not worth the effort because it is easier to just manually add the information to another property (e.g., make an icon property and set that to the needed icon value when you configured the widget).