Change the color of a column in the backend based on a select

Hello again,

i have a select in the backend where the user chooses the depth of a list.

 level:
            label: Level
            type: select
            options:
              green: Main
              orange: Sublevel

For clarity, i want to change the background color of the .k-bubble class in the backend to the value of the select that the user has chosen.

Is this possible?

Thank you in advance!

I must admit that I don’t understand what you are trying to achieve. What columns? What is the context here?

Sorry, i want to give these a color.

Screenshot 2023-05-04 at 17.46.25

would love to do this too. any ideas where to start @texnixe? :pray:t2: :sparkles:

Maybe you can provide more context than @bnsn? Is that a structure field, a blocks field, anything else? Where is the select?

thanks for getting back to me so quickly. sure! :smiling_face:

i am using a select field with multiple hard-coded options in a page blueprint directly and it’s being displayed in a pages section with table layout. i would like to change the background color for each item in the table based on it’s value. i am using v4.0.0-beta.2.

for example:

  • lead: yellow
  • active: green
  • lost: red

Hm, ok, you probably need a new preview type, but unfortunately, I cannot help with this.

okido, thank you! do you maybe know anyone on here who does? :upside_down_face: :sparkles:

You can extend the native select field preview. This simple plugin adds a data-value to the <li>.

Disclaimer: even though I made sure to extend as little as possible, it’s still something that could break in a future Kirby update.

panel.plugin('my/structure-preview', {
  components: {
    'k-select-field-preview': {
      extends: 'k-select-field-preview',
      template: `
        <div class="k-bubbles-field-preview" :class="$options.class">

          <ul class="k-bubbles">
            <li v-for="(bubble, id) in bubbles" :key="id" :data-value="bubble.value">
                <k-bubble v-bind="bubble"/>
            </li>
          </ul>

        </div>
      `
    }
  }
});

This makes the following panel css work:

[data-value="option3"] {
    --color-light: lime;
}

2 Likes

yay, thank you so much @thguenther! will try this out immediately :smiling_face_with_three_hearts: :pray:t2:

works like a charm @thguenther.

may i ask how you got there? because i actually need to do the same for select and multiselect previews. and also adapt it to kirby v4. i cant find much about your solution in the plugin docs.

also it seems like the solution only works for the preview of structure fields, not for pages sections. any idea how to achieve this, too?

:pray:t2: :grapes:

I’m glad it worked. Once again, please keep in mind extending core components is something you have to maintain in future versions. Especially if you don’t understand it fully it will almost certainly lead to some frustration.

And it’s true there’s not much information about this in the docs. This is the way I do it:

  1. Use your web browser’s development tools to identify the component you’d like to extend. It will likely have a class name starting with k-.
  2. Head to Kirby’s GitHub Repository and search for the name. (That’s because your installation of Kirby doesn’t include the panel’s source files.)
  3. Write a plugin similar to the one above to extend the component. It’s advisable to not overwrite too many things, though.

For you use case it might make sense to have a look at the k-bubble component that is used all over the panel.

1 Like

thank you so much, that helps a lot @thguenther! your approach is similar to what i was trying to do. hopefully the new /panel/lab playground will make our lives easier soon. and of course, i will be keeping an eye on the changelog when a new version is being published! :upside_down_face: :hatching_chick:

for anyone else trying to achieve this, i came up with an alternative version, where the k-bubbles component will be modified directly. maybe it will help someone someday. :love_letter: :sparkles:

panel.plugin('jaro-io/previews', {
    components: {
        'k-bubble': {
            extends: 'k-bubble',
            props: {
                value: [String, Number]
            },
            template: `
            <component
                :is="link ? 'k-link' : 'p'"
                :to="link"
                :style="{
                    color: $helper.color(color),
                    background: $helper.color(back)
                }"
                :data-value="value"
                :data-has-text="Boolean(text)"
                class="k-bubble"
                @click.native.stop
            >
                <!-- @slot Replace the default image -->
                <slot name="image">
                    <k-image-frame v-if="image?.src" v-bind="image" />
                    <k-icon-frame v-else-if="image" v-bind="image" />
                    <span v-else></span>
                </slot>
                <template v-if="text">
                    <!-- eslint-disable-next-line vue/no-v-html -->
                    <span v-if="html" class="k-bubble-text" v-html="text" />
                    <span v-else class="k-bubble-text">{{ text }}</span>
                </template>
            </component>
            `
        }
    }
});