Display select option text in block preview

Kirby 3 Solved ✅
1

Hello everyone, I am struggling to find the solution to display the Select field option text in the block preview. It shows value no matter what I do.

Example blueprint

fieldWidth:
    label: Field width
    type: select
    options:
      "uk-width-1-1": 1/1
      "uk-width-1-2@m": 1/2
      "uk-width-1-3@m": 1/3
      "uk-width-2-3@m": 2/3
      "uk-width-1-4@m": 1/4

Example template preview

<div v-if="content.fieldwidth" class="form-builder-field-section">
  <span>
    Width: {{ content.fieldwidth.text }}
  </span>
</div>

Only {{ content.fieldwidth }} works, and shows the value (example: “uk-width-1-4@m”), but I would like to show options text (example: “1/4”).

Any idea how to display the Select field option text instead of value?

2

Check what this.field('fieldwidth') gives you, see example here: Block factory: Creating your own blocks collection | Kirby CMS

3

I tried this now, added

computed: {
        widthField() {
          return this.field("fieldwidth");
        }
      },
      template: `
        <div @dblclick="open" class="form-builder-field">
          // some code
          <div v-if="content.fieldwidth" class="form-builder-field-section">
            <span>
              Width: {{ widthField.text }}
            </span>
          </div>
          // some code
        </div>
`

But it doesn’t show anything. With only {{ widthField }} displays all options like it is saved in .txt file

4

You should be able to get the options via

widthfield.options

However, this returns an array, so you would need another method to retrieve the desired value from this array.

Say I have a block

name: Box
preview: box
wysiwyg: true
fields:
  colors:
    type: select
    label: Color
    options:
      - text: Green
        value: option1

Then I can do the following:

panel.plugin("cookbook/block-factory", {
  blocks: {
    box: {
      computed: {
        colors() {
          return this.field("colors");
        }
      },
      template: `
        <div>

        <ul v-for="(color, index) in colors.options" class="k-block-type-faq-item" :key="index">
            <li>{{ color.value }} {{color.text}}</li>
          </ul>
        </div>
      `
    }
  }
});

Here I just loop through the array, so you need work from here, I go to sleep…

Edit:

panel.plugin("cookbook/block-factory", {
  blocks: {
    box: {
      methods: {
        coloroptions(value) {
          return this.field("colors").options.find(element => element.value === value)?.text;
        }
      },
      template: `
        <div>
            <div v-html="coloroptions(content.colors)"></div>
        </div>
      `
    }
  }
});
1 Like
5

Yeeeey, this works! :partying_face::partying_face::partying_face:

You are tremendous! Thank you very much! :pray::pray::pray: