Custom preview for nested structure

I’ve hard time to figure out how to render a custom preview for a nested structure field.

This is how it looks now and I want to show the selected time instead of

This is the related blueprint.

title: Sprechzeiten

tabs:
  settings:
    label: Sprechzeiten
    icon: settings
    columns:
      left:
        fields:
          schedule:
            label: 'Sprechzeiten'
            type: structure
            help: "Eine Tabelle mit den Öffnungszeiten kann mittels <code>(open-hours&colon;)</code> in Textfelder eingefügt werden."
            fields:
              dayname:
                label: Tag
                type: select
                options:
                  '1': Montag
                  '2': Dienstag
                  '3': Mittwoch
                  '4': Donnerstag
                  '5': Freitag
                  '6': Samstag
                  '7': Sonntag
              morning:
                type: structure
                label: Vormittags
                fields:
                  morning_start:
                    label: Öffnen
                    width: 1/2
                    type: time
                  morning_end:
                    label: Schließen
                    width: 1/2
                    type: time
              afternoon:
                type: structure
                label: Nachmittags
                fields:
                  afternoon_start:
                    label: Öffnen
                    width: 1/2
                    type: time
                  afternoon_end:
                    label: Schließen
                    width: 1/2
                    type: time

I’m aware of the field-previews page but I wasn’t able to figure out the proper field name. Has anyone a suggestion?

Okay, I found a solution but I wonder if this is the proper way to solve this because as far as I understand this correctly k-structure-field-preview will match every structure, right?

panel.plugin("gearsdigital/open-hours-preview", {
  components: {
    "k-structure-field-preview": {
      props: {
        value: String,
        column: Object,
        field: Object
      },
      computed: {
        entries() {
          return this.value;
        },
        entriesString() {
          return this.entries
            .map(entry => Object.values(entry))
            .map(row => row.join("–"))
            .join();
        }
      },
      template: '<p class="k-structure-table-text">{{entriesString}}</p>'
    }
  }
});

1 Like

@gearsdigital out of curiosity, do you have to do something to get a structured field to use this preview? I can’t seem to get my (non-nested) structured field preview to change - and also to clarify, @texnixe how can one target a specific structured field?

Structure field previews work on a per field type basis, I don’t know if you can somehow only target individual fields maybe using a condition.

@waffl Afaik there is nothings special to do… If you have setup your plugin correctly it should work.

Do you get any errors? If want to you can provide an example, so we can have a look.

That’s right.

Thank you, I didn’t seem to see any errors, I just noticed the preview wasn’t changing. I’ll take a closer look and see what my mistake was!

Let us know what it was :smiley: