Style select field query text in blueprint

hey everyone :partying_face: :sparkles:
i was wondering if there’s an easy way to add custom styling to the query >> text output in a select field (last line in code example). i would love if the page.descr could be deemphasised in some kind of way (font-color, italic, …). already tried adding html span tags or markup but both don’t seem to work.

# product categories
product_categories:
    label: Product Categories
    type: multiselect
    options: query
    width: 2/3
    query:
        fetch: site.find('categories/products').children.listed
        value: '{{ page.autoid }}'
        text: '{{ page.title }} {{ page.descr }}'

i’d be grateful for any help.
thank you so much!
:sunflower:

Hi,
I did the same for a multiselect field and it works for me like this:

text: '{{ page.title }} <span style="color:var(--color-text-light);">({{ page.descr }})</span>'

Which kirby version are You using?

thank you for your help @Cris!
i maybe should have mentioned that my multiselect is part of a structure field. please have a look at my screenshots. when selecting, it does apply the color, but when viewing the structure field, it shows the html as text. any idea why?

oh, and i am using kirby 3.6.2!

:sun_with_face:


Ah ok.
Then You would have to write a little panel plugin, that renders the html in the preview.
There’s already a great plugin by Sylvain Julé which already covers the multiselect preview for the structure field but it also doesn’t render the text as html.

This is how I would make the preview work:

panel.plugin('getkirby/pluginkit', {
  components: {
    'k-multiselect-field-preview': {
        props: {
          value: String,
        },
        template: `
          <div class="k-multiselect-field-preview">
  		      <div class="multiselect-entries">
  			      <span v-for="entry in value" class="multiselect-entry" v-html="entry.text"></span>
  		      </div>
  	      </div>
        `
      }
    }
});

You can download the plugin here, add it to Your site/plugins and play around with it.

PS: I’m by far no expert and always happy about suggestions!

1 Like

@Cris wooow wow wow thank you so so much!
the kirby community is just amazing!
works like a charm!

:tada: :balloon: :sparkles:

1 Like

@Cris unfortunately since kirby 3.7.4 your first code from above seems to not work anymore. for regular multiselect fields (not the ones nested in structure fields), i am again seeing html code instead of rendered html. on 3.7.3 its all good. might be related to this but i am not familiar with vue.

if you have a minute, it would be really lovely if you could take a look.
thank you so much!

:pray:t2: :sparkles:

I’ll check it out tomorrow. :v:t3:

Hey @jaro.io,
if You compare the multiselect component in the different kirby releases,
You’ll see, that in 3.7.3 the tag component (which is used in the multiselect field) is rendered as html, while the kirby team removed it in 3.7.4 due to this security issue.
In the current release the tags are rendered as html again.
Actually I’m not sure how to help You just for v3.7.4 since I’m no expert with plugins and Vue as well :sweat_smile:.
I guess one could write a whole custom plugin that extends the core multiselect and then change the part, where the tag is rendered, but that would take me too much effort and time.
Also, maybe there’s even an easier solution that I’m not aware of.
Sorry, that I can’t help here - maybe someone else knows an easy solution.
Alternatively, if I may suggest, why don’t You backup Your project and then try to update kirby and see if all is still working? 3.8.+ has some great new features and advantages.

Have a nice weekend,

Cris

1 Like

thank you so much! for this particular project i didn’t update to 3.8 yet because we are using the autoid plugin for a lot of custom stuff. o i wanted to stay on 3.7.x. now i found out that 3.8.1 allows to disable the uuid feature. so i hope we should be good with upgrading now. will do some test.

anyway, thank you so much for your time! i appreciate that a lot!
:pray:t2: :sparkles:

1 Like

Good news @jaro.io,

mystructure:
  label: 'Structure Test'
  type: structure
  fields:
    multiselect:
      type: multiselect
      options:
        type: query
        query: site.find('notes').children.listed
        value: '{{ item.id }}'
        text: '{{ item.title }} <span style="color:gray;">{{ item.id }}</span>'
// site/plugins/kirby-multiselect-preview/src/index.js
import MultiselectPreview  from './components/MultiselectPreview.vue'

window.panel.plugin('k-community/multiselectpreview', {
  components: {
    'k-multiselect-field-preview': MultiselectPreview
  }
});
// site/plugins/kirby-multiselect-preview/src/components/MultiselectPreview.vue
<template>
  <div class="k-multiselect-field-preview">
      <div class="k-multiselect-entries">
        <template v-for="(entry, index) in previews">
          <template v-if="index > 0">, </template>
          <span class="k-multiselect-entry" v-html="entry.text"></span>
        </template>
      </div>
    </div>
</template>

<script>
export default {
    props: {
      value: [Array, Object, String],
      field: [Array, Object, String],
    },
    
    computed: {
      previews(){
        let result = [];
        this.value.forEach((val, k) => {
            result[k] = Object.values(this.field.options)
                        .find((o) => (o.value === val));
        });
        return result;
      },
    }
};
</script>

I’ve found a solution.
All infos we need are in the field and value props.
So all we need to do, is filtering the field.options by the stored values and return the option’s text.
If You don’t wish a comma separted list, just remove this line:
<template v-if="index > 0">, </template>

Again, try and adjust it to Your needs (Tipps for a panel plugin setup).

Until I find time to put it on github, You can download it from here.

All the best,

Cris

@Cris wow wow wow you are my hero today! works like a charm. thank you so so much! if there’s anything i can ever do to you, please let me know! that helps me so much!

:smiling_face_with_three_hearts: :sparkles:

Hey @jaro.io,

You’re welcome! I’m glad, that it finally works for You.
You don’t need to do anything, I got so much help in this forum,
I’m just happy to be able to give something back every now and then.

I wanted to note, that this is just some rough test and
that the code can be optimized drastically performance wise,
since we’re using a filter and two loop functions here.
I’m sure we can get rid of minimum one loop and also probably provide some
fallback / error handling, if the previews turn out to be empty (which they shouldn’t).
I also didn’t test it with other queries.
Maybe it’s also better to output a ul or something rather than spans?

Anyway, have a nice weekend! :v:t3:

Cris

1 Like