Design a custom colorpicker

[Dan (Dan Demento)]

Hi guys,

I need a custom colorpicker widget which looks exactly like a color item in MainUI

changes / requirements for the widget:

• seperate items for colorpicker and switch
• the shown itemname should be the one from the colorpicker item
• should open the popup when clicking on the color field

This seems no hard work, but to be honest I don’t know exactly where to start.

I’ve done some custom widgets already but I want an exact copy of the original only with other functionality, and that’s where I’m struggeling.

questions:

• what widget type should I use
• how can I bind the original colorpicker without the switch
• is it possible to use the standard switch for the widget
• what is the easiest way to align the single parts (I was thinking of absolute position top/right for colorpicker & switch, and top/left for icon & name)

I think many users have a usecase for something like this.

Maybe there are some experienced users here to help me out to reach my goal?

Any help or suggestions appreciated!

thanks,
Dan

[JustinG]

This might help you get started:

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

This will be the beginning of separating the colorpicker and the toggle because you can then just add the toggle in yourself again but with full control over its configuration.

@Dan

what is the easiest way to align the single parts (I was thinking of absolute position top/right for colorpicker & switch, and top/left for icon & name)

It’s always easiest to let the system do as much of the alignment work as possible. Setting absolute positioning should really be a last resort because it will not be responsive at all and you element will probably look a little different on every single screen.

Most of the oh components already use flexbox alignment so to replicate what your seeing you’ll want to do the same:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Dan (Dan Demento)]

Thanks a ton Justin, that’s what I was searching for… I think I get this done on my own now with this information at hand

cheers,
Dan

[Dan (Dan Demento)]

Ok here’s my Custom Colorpicker Widget

uid: CustomColorpicker
tags: []
props:
  parameters:
    - description: The Label
      label: Label
      name: label
      required: true
      type: TEXT
    - context: item
      description: The color item
      label: Color Item
      name: colorItem
      required: true
      type: TEXT
    - context: item
      description: The switch item
      label: Switch Item
      name: switchItem
      required: true
      type: TEXT
    - default: oh:colorpicker
      description: The icon to display
      label: Icon
      name: icon
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 26, 2023, 9:40:32 PM
component: oh-list-item
config:
  icon: =props.icon
  title: =props.label
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
          - component: f7-col
            slots:
              default:
                - component: oh-toggle
                  config:
                    item: =props.switchItem
                    openIn: auto

Just one last question, should I define the fontsize? or is the default size used when not defined?

[JustinG]

The font size will default to the f7 setting if you don’t override it, and that will keep it consistent with the other widgets.

[Dan (Dan Demento)]

thanks again…
I made a mistake, I thought =props.colorItem would display the item label but it displays only the name… I searched the docs an forums but can’t find an answer… also tried to use =props.colorItem.label but nothing is displayed. Is there a documentation where this is explained?

Edit: I added additional props for the label… but still searching for a solution for automatic labeling

[JustinG]

@Dan

Edit: I added additional props for the label… but still searching for a solution for automatic labeling

You actually found the best solution. There is no access to the label of an item directly in the widget expressions. The only way to do it actually through an oh-repeater that you through some trick or other get to return only a single item because that returns a complete item object that includes the label.

[Dan (Dan Demento)]

fine, thank you!