Custom select field in a User blueprint

Kirby 4 Question❓
,
1

I’m trying to add a custom select field to a User Blueprint. It’s showing up on the page, and it’s registered as a plugin.

When I change the value of the custom field, the Panel and/or Vue don’t seem to communicate the change of state, meaning there’s no option to Save the change. Other fields in the User Blueprint do trigger the Save and Revert buttons.

Any thoughts on what I’m missing…? Thanks in advance!

index.js

panel.plugin('sodaville/publicationFormatOptions', {
    fields: {
        publicationformat: {
            extends: 'k-select-field',
            props: {
                options: {
                    type: Array,
                    required: true
                }
            },
            computed: {
                formattedOptions() {
                    return this.options.map(option => {
                        return {
                            value: option.value,
                            text: option.text
                        };
                    });
                }
            },
            methods: {
              updateValue(value) {
                console.log('Value updated:', value);
                this.$emit('input', value);
              }
            },
            template: `
                <k-select-field v-bind="$props" :options="formattedOptions"></k-select-field>
            `
        }
    }
});

User.yml

title: 
  en: Contributor
description: 
  en: Somebody who has helped make a comic, either as a creative or as part of editorial. A Contributor can't log into the site; but they need to be added so they can receive credit for their work.
  access: 
    languages: false
    system: false
    users: false
  files:
    create: true
    changeName: true
    changeTemplate: false
    delete: false
    read: true
    replace: true
    update: true
  languages: false
  pages:
    access: true
    changeSlug: false
    changeStatus: false
    changeTemplate: false
    changeTitle: false
    create: true
    delete: false
    list: true
    move: false
    duplicate: false
    preview: true
    read: true
    sort: true
    update: true
  site:
    changeTitle: false
    update: false
  user:
    changeEmail: true
    changeLanguage: true
    changeName: true
    changePassword: true
    changeRole: true
    delete: true
    update: true
  users: false
    
columns:
  - width: 1/2
    fields:
      bio:
        label: Bio
        type: textarea
      website:
        label: Website
        type: url

  - width: 1/2
    fields:
      publicationFormat:
        label: Your default publication format
        type: publicationformat
2

Hm, maybe I’m missing something, but where is this method used?

3

Great question. Looks like it’s an artefact from Copilot which doesn’t appear to connect to anything.

But yeah… with or without the Method bit, I’m not getting the change of state happening.

4

https://lab.getkirby.com/public/lab/components/fields/select

Looks like @input is missing here

5

Copilot added a updateValue method but that’s never called. And your template code is also not listening to the @input event from k-select-field.

Though I would be cautious with extending k-select-field while also using it in the template. This double-usage can sometimes cause problems.

Can I ask what you are trying to do with the custom field? The Vue part itself doesn’t look like it would do anything differently/special compared to the default select field.

6

The intention with the custom select field is to present (and retrieve the user’s preference) the same set of options throughout the site. DRY, etc…

7

But what does your select field do differently form the default one? It’s not clear from me from the code in your first post.

8

Oh, gotcha - in the custom field’s index.php file, there’s an array of key-value pairs for the select field’s options.

–

Per your reply and Sonja’s reply, nothing in Copilot’s code is doing anything at all with @input. So that’s given me something to research and resolve :slight_smile:

9

Hm, if that’s all, why not define the field once as field blueprint, and done with. Why does this need a custom field?

10

I’m open to that…
I landed on this approach because the select field appears in a few places (ie, different blueprints).

11
12

Cool, thanks for that @texnixe – I’ll look into that more closely tonight! Much appreciated!