Kirby 5 panel view buttons: access content

The CMS Questions
1

FYI: There are no Kirby 5 tags in the forum yet.

I’m trying to use Kirby 5’s panel view buttons to display a clickable checkbox. It should look something like this:

CleanShot 2025-01-17 at 09.34.42@2x
CleanShot 2025-01-17 at 09.34.42@2x770×534 2.59 KB

I’d appreciate a nudge into the right direction when it comes to accessing the current page and its content. Depending on a (hidden) field on the page, the component should display “Ready” or “In progress”. I found some information for custom blocks, custom views, but obviously none for the view buttons yet. How do I do that? So far I haven’t had any luck withthis.$api, this.$helpers or this.$store.

panel.plugin("medienbaecker/ready", {
  viewButtons: {
    ready: {
      template: `<k-button :icon="isReady() ? 'check' : 'circle'" variant="filled" :theme="isReady() ? 'positive' : 'notice'" size="sm">{{ isReady() ? 'Ready' : 'In progress' }}</k-button>`,
      methods: {
        isReady() {
          // ???
        },
      },
    },
  },
});

Any help would be greatly appreciated.

2

For the content of the current page, you can use this.$panel.content. this.$panel.content.changes likely for the current field values including unsaved changes.

And I’d rather put it as computed:

panel.plugin("medienbaecker/ready", {
  viewButtons: {
    ready: {
      template: `<k-button :icon="isReady ? 'check' : 'circle'" variant="filled" :theme="isReady ? 'positive' : 'notice'" size="sm">{{ isReady ? 'Ready' : 'In progress' }}</k-button>`,
      computed: {
        isReady() {
          // ???
          return this.$panel.content.changes.myField === true;
        },
      },
    },
  },
});
1 Like
3

Ah! Thank you, Nico. That makes a lot of sense :+1:

4

We just had the discussion as well on Discord and the content module does not provide direct access to all values of all fields. $panel.content.changes() returns an object with all fields and values that have in fact changed, but the rest is not included. You need to go through $panel.view.props.content for that. That conversation made me wonder if we should add some shortcuts to the content module. I.e. $panel.content.originals, $panel.content.values or something like that. We had that before but removed it again to not have too many shortcuts. But for plugins it might be really useful.

Tobi also mentioned that you should just use kirbyuse by @johannschopplich for that instead. GitHub - johannschopplich/kirbyuse: 🎛️ Collection of Vue Composition utilities and typed `window.panel` for Kirby CMS

5

I didn’t realize. I think we should. The way digging into the props feels like a hack when we have a dedicated content module. values makes sense to me. Originals would mean without the changes.