How to use oh-colorpicker in a Main UI widget

Add-ons UIs
1

I’m a bit lost here and could not find an example in the forums:

How do I correctly use the oh-colorpicker component in a widget? When I add the component and set an item it will show me the default representation (HSB-Slider). However as soon as I set the module property (also when set to hsb-slider) the component disappears completely. Am I doing something wrong here or is this a bug?

color_picker_test
color_picker_test910×808 90.5 KB

2

Hi,

I created an color bulb widget today, maybe it will help you

SmartSelect_20210302-213035_Chrome
SmartSelect_20210302-213035_Chrome560×694 48.1 KB

uid: Stimmungslicht
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Color
      label: Color
      name: color
      required: false
      type: TEXT
    - context: item
      description: Toggle
      label: toggle
      name: toggle
      required: false
      type: TEXT
    - context: item
      description: Slider
      label: slider
      name: slider
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 2, 2021, 12:06:37 PM
component: f7-card
slots:
  default:
    - component: f7-list
      config:
        mediaList: true
      slots:
        default:
          - component: oh-toggle-item
            config:
              title: =props.title
              item: props.toggle
    - component: oh-colorpicker-card
      config:
        item: =props.color
        noBorder: true
        noShadow: true
        modules:
          - wheel
    - component: oh-slider-card
      config:
        item: =props.slider
2 Likes
3

Thank you Eric!

Apparently I was just not using correct yaml syntax…

4

Small correction in your yaml:

item: props.toggle

should be:

item: =props.toggle