Reload Panel on change of field (or trigger query fetch again)

The CMS Questions
1

I’m working on a project were i have a blueprint for a page template called “Event”. The template is used to create pages that represent an event and its related information.

The “event_location” field allows the user to choose a location from a list of options fetched using a query. The “event_venue” field allows the user to choose one or more venues for the event based on the location selected in the “event_location” field. The options for the “event_venue” field are fetched from a structure field from another page.

columns:
  main:
    width: 2/3
    sections:
      content:
        type: fields
        fields:
          event_location:
            label: Location
            width: 1/2
            type: select
            options: query
            query:
              fetch: site.find("locations").children.unlisted
              text: "{{ page.location_name }}"
              value: "{{ page.id }}"
          event_venue:
            label: Venue
            width: 1/2
            type: checkboxes
            options: query
            query:
              fetch: site.find(page.event_location).location_venues.toStructure
              text: "{{ structureItem.name }}"
              value: "{{ structureItem.code}}"

Everything works fine but when the “event_location” field changes, the checkboxes of the “event_venue” field do not update unless you reload the page.

Is there a way to reload the panel when a field changes? Or to trigger the query fetch again to update the “event_location” variable?

Thank you in advance! Help is much appreciated :blush:

2

No, this is not possible. You would have to create a custom solution where field b listens to changes of field a.

3

Not out of the box as Sonja said. But do a simple workaround: for example, place in help text or in a info section (preferred):

<button onClick="window.location.reload();" class="style-me">Load new entries</button>
4

Thank you both!

The solution by @Oli1 is a nice workaround but I will have to rethink the whole structure as I can’t rely on the editors to click on the reload button :sweat_smile:

5

The problem is that even if you would “reload on change” (actually rather simple to do in a plugin) or a “reload when button was pressed”, the changes wouldn’t have been saved and only exist in your browser.
Therefore the result of the query would still be the old one, because page.event_location, from Kirby’s point of view, would still be the old one.

A workaround would be to automatically save the page when the event_location changes, I don’t know if that is desirable though. That being said, a minimalist plugin example could look like this:

site/plugins/venues/index.js

panel.plugin('samuel/venues', {
  use: [Vue => {
    const orig = Vue.component('k-fields-section');
    Vue.component('k-fields-section', {
      extends: orig,
      methods: {
        async input(values, field, fieldName) {
          if(fieldName === 'event_location') {
            await panel.app.$api.pages.update(panel.app.$view.props.model.id, {
              [fieldName]: values[fieldName],
            });
            panel.$reload();
          } else {
            orig.options.methods.input.call(this, values, field, fieldName);
          }
        }
      },
    })
  }]
});
1 Like
6

@rasteiner Thank you for explaining the problem and providing a nice solution. I don’t have that much experience with plugins, so i hadn’t really thought about writing a plugin for my problem.

I don’t see any problems in saving the page automatically.