Oh-colorpicker-item without toggle?

Is there any way to get rid of the toggle element for the oh-colorpicker-item?

I can choose additional modules (for example wheel, current-color, …), but I can’t see a way to get rid of toggle element :thinking:

1 Like

The toggle is baked in to the color picker item, but you can easily create the scaled down version that you want by just using a regular oh-list-item and adding a basic oh-colorpicker to it:

component: oh-list-card
config: {}
slots:
  default:
    - component: oh-colorpicker-item
      config:
        title: Color picker item
    - component: oh-list-item
      config:
        title: List item with colorpicker
      slots:
        after:
        - component: oh-colorpicker
          config:
            openIn: auto
            item: color_item

Hi,

I am also interested in using a color item without the additional switch. How / where can I use your code? I tried to create a custom widget out of that but failed. I would like to use this within the semantic model.

Thanks for hints!

It’s probably best to start with the part of the getting started guide that takes you through the process of making a custom widget for the model:

The code I’ve posted above is just a quick example, you will have to modify it to include a parameter that identifies your items. The tutorial will explain that as well.

Other docs pages that will help you understand are:

and

I played around and tried a lot of stuff but not successful yet. Some of the widgets work in editing mode but are not shown at all within semantic model (e.g. location). Is there any specific reason for this?

I found this widget and generated a similar widet:

uid: ColorPickerWithoutToggle
tags:
  - light
  - list
props:
  parameters:
    - default: Enter title here
      description: The list item text
      label: Text
      name: text
      required: false
      type: TEXT
    - context: item
      description: The color item
      label: Color Item
      name: colorItem
      required: false
      type: TEXT
    - default: red
      description: Background color of the toggle
      label: Color of toggle
      name: bgColorToggle
      required: false
      type: TEXT
    - default: oh:rgb
      description: The icon to display
      label: Icon
      name: icon
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 17, 2022, 12:19:45 PM
component: oh-list-item
config:
  icon: =props.icon
  title: =props.text
slots:
  after:
    - component: f7-row
      config:
        style:
          align-items: center
          gap: 8px
          margin-right: 8px
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-colorpicker
                  config:
                    item: =props.colorItem
                    modules:
                      - wheel
                    openIn: auto

You’re going to have to provide more specifics about what you’ve done if we’re going to figure out what’s going on. What’s the actual widget code that’s not working? What do you mean it works in edit mode, the widget editor or the edit mode in the page editor? Did you actually set it to be the default list widget for the item of interest?

Hi,

I use text file item configuration and I also configured the custom widget as default list widget. I got it working by configuring the item via main ui. I took care and I think it was all. The same parameters as I did via text file. Does anybody know if there are issues using custom widgets via text file configuration?

The issue I had via text file configuration: the item was not shown in the emantic model at all while I could see the widget to work when I manually searched for the item via main ui.

Best
Matthias