Pages/select fields in custom section plugin

The CMS Questions
1

I am trying to integrate fields into my custom section like we’re used to in blueprints in general. it is working with simple fields like text, date, number and so on but not with more complex fields like pages, select, multiselect, etc.

  1. for the pages field I get the following error when I click on it to select pages: this.endpoints is undefined
  2. for the select field I get the following error right away: this.options.forEach is not a function
  3. for the multiselect field I get the following error right away: Sortable: el must be an HTMLElement, not [object Comment]

Please tell me what else I need to load/integrate to make this work.

blueprint

sections:
  foo:
    type: fooexample
    headline: Foo
    fields:
      date:
        label: Date
        type: date
        width: 1/3
      pages:
        label: Pages
        type: pages
      select:
        label: Select
        type: select
        options: query
        query: site.index
      multiselect:
          type: multiselect
          options:
            design: Design
            architecture: Architecture
            photography: Photography
            3d: 3D
            web: Web

index.js

window.panel.plugin('plugins/fooexample', {
    sections: {
        fooexample: {
            template: `
              <section class="k-fooexample-section">
                <k-label>{{ headline }}</k-label>
                <k-form
                  :fields="fields"
                />
              </section>
            `,
            data: function () {
                return {
                    headline: null,
                    fields: {},
                };
            },
            created: function () {
                this.load()
                    .then(response => {
                        this.headline = response.headline;
                        this.fields = response.fields;
                    });
            }
        }
    }
});

index.php

Kirby::plugin('plugins/fooexample', [
	'sections' => [
        'fooexample' => [
            'props' => [
                'headline' => function(string $headline = null)
                {
                    return $headline ?? 'Untitled';
                },
                'fields' => function(array $fields = null)
                {
                    return $fields ?? [];
                },
            ],
        ],
    ],
]);
1 Like
2

I am also looking for a solution here:

It would be great if someone has an example or a solution approach.

3

I got select and multiselect working, by copying computed.form and computed.fields from kirby/config/sections/fields.php at 3.9.5 · getkirby/kirby · GitHub

I assume the Form class is responsible for somehow processing the field properties, haven’t looked into it in detail yet.

the pages field is still not working though.

4

As a workaround:

You could somehow detect if the pages field is empty and then create a dialogue which encourages the user to click…
However, this is an example with a File section, but I think it should work similarly for the Pages section.

<div  class="media media--maxHeight" v-if="source.url">
     
      <video height="100%" :src="source.url" controls autoplay loop playsinline mute >
      <source :src="source.url" :type="source.filetype" >  
      </video>

    </div>
    <div v-else>

<k-block-figure
:is-empty="!source.url"
empty-icon="audio-file"
empty-text="No file selected yet …"
@open="open"
@update="update">
</k-block-figure>
</div>
5

Hey owzim,

maybe this helps:

It solved my issue with the pages field.