Adding (structure) fields interactively

Hi there,

I was wondering, if it is possible to let the editors add structure fields interactively in the panel. It seems that this is not possible?

If this is indeed not possible, are there any ways to work around this and create a similar behavior? I am thinking something like allowing to add subpages, each containing a structure field and then somehow showing these structure fields listed on the main page? Is there a way to show other pages’ fields? If so, how?

Thanks!

What do you mean by “add interactively”?

I mean that there is some sort of button “Add table” for the editor to click and then it adds that structure field to the panel page. And allowing this several times, so the editor can add as many tables as they require.

Come to think of it, I probably need what I described above, but I need to add an entire section (not just a structure field, but several single text fields as well) that I need the editor to be able to insert several times. So I have a feeling that I am definitively better off using subpages. However, once I create a subpage, can I then somehow display the subpage’s contents and fields on the parent page? Preferably in a way to have them still editable?

Sorry for the vague questions, I am just trying to get an idea of how to structure this best and to make sense of the options I have.

In general, you can display the contents of any page everywhere on the frontend.

I think you have to options:

  • subpages with a structure field
  • nested structure fields

It is definitely not possible to add new complete structure fields via the Panel (because fields are defined in the blueprint).

But in this case I need to display it in the panel. Is it possible to display the fields of a subpage X in the panel of its parent page?

No, not out of the box.

Ok, thanks for the clarification. Will have to think of another way to structure my input fields then.

I am not sure if I understood the initial question correctly, but have you looked into whether the Kirby Builder plugin provides an approach to solve your issue at hand?

It allows to define “blueprint blocks” (for example a block that contains a pre-defined structure field) and the editors may add one or multiple instances of that block on a page, shuffle them around as desired, etc. I have used it on a site where the editors can assemble their content pages from pre-designed layout modules and it works like a charm (a bit like Lego).

This sounds promising. Will look into it. Thanks!

The builder is great, but if you structure fields always have the same fields, then you might as well stick with the structure field. Depends on use case.

Structure field: Each item has the same set of fields
Builder field: Each item can have different sets of fields

I don’t think I understand, how could structure fields alone help me here? You mean when I nest structure fields within other structure fields? In this case, is there even an option to display the nested structure field’s options on the panel page?

I was just trying to make clear what the differences are, because I’m not 100% sure what exactly you want to achieve.

Maybe best try out if the Builder plugin solves your issue or not.

Now that I tried the nested structure fields, I think that might be the way to go for me. However, the structure field column within the parent structure field shows up empty. Is there a way to query some information from the nested (child) structure field and display them in the column? For example something like earliest date and the number of entries?

Yes, that could be done with a custom preview, I think, examples here: GitHub - sylvainjule/kirby-previews: Add some missing structure previews. Kirby 3 only.

Ok, that means I would need to alter this existing plugin to my specific needs, right?
I will see, if this feasible for me, this might be a bit over my skill level.

I think it shouldn’t be to difficult to adapt the structure preview to show some real content instead of just the string “two entries”.

See also this: Custom preview for nested structure

This sentence is what initially made me think of the Builder plugin:

But I, too, struggle to fully grasp what you are trying to achieve, so indeed the Builder may or may not at all be what you need.

Could you explain the desired outcome with a concrete example? (What are these “entire sections” about, what kind of page content are we talking about, what do they contain, what is the desired user experience for the editors and how will it be rendered on the website, etc. etc.)

I am creating a portfolio page for a dancer. She has several dance pieces. All these pieces have different event contexts (stage, city, optional festival) in which they are shown.
Then each context will have several dates with several different event types (premiere, rehearsals) and lots of different sub infos. Basically these event dates need to be their own (quite complex) table within each event context (within each project). So it’s a lot of nesting.

I gave now both suggested options a try.

Theoretically, the structure fields nested within structure fields are able to represent my logical data structure. However, even with quite some customizing efforts, I found that the data in a structure like this is really confusing to fill in (you have to press ok for the inner structure, then have to remember to also press ok for the outer structure / if you forget to fill a mandatory field, then the view jumps back to the top of the page etc.), even for me as the programmer. It will be way to complex for the non-tech-savvy editor.

I also gave the kirby builder plugin a first quick try and this seems to be much closer to what I need. I have not implemented my actual fields yet, but will give this a try and report back. I am a bit intimidated by the Template Usage section, but I hope it becomes clearer, once I have my actual setup and some data.

Thank you both for your help so far!

Something I used in a previous project. It adds a more useful preview for nested structure fields.

Just put it in a folder like site/plugins/custom-structure-preview. This will show you the title of each entry comma seperated in the parent structure field. Actually it will currently try to use the title field first and then try use the label field as a fallback. You could define any possible fields in the keys variable.

Perhaps this helps if you go down the nested structure field road :slight_smile:

// index.js

panel.plugin('acme/custom-structure-preview', {
  components: {
    'k-structure-field-preview': {
      props: {
        value: String,
        column: Object,
        field: Object
      },
      computed: {
        text: function() {
          var result = [];
          var keys = ['title', 'label'];

          this.value.forEach(entry => keys.some(key => {
            var value = entry[key] || null;

            if (value) {
              result.push(value);
            }
          }));

          if (result.length) {
            return result.join(', ');
          }

          return '…';
        }
      },
      template: '<p class="k-structure-table-text">{{ text }}</p>',
    }
  }
});