Accessing content in a custom field


I have a structure field in my blueprint:

        label: Einträge auf der Warteliste
        type: structure
        style: table
            type: text
            label: Vorname
            type: text
            label: Name
            # ...

As I’m not happy with the way big tables are displayed in the panel, I would like to build my own view for the data in the structure field. I figured that I would probably have to build a custom field plugin.

        type: tableview

In this plugin I would like to loop over the data from the structure field and thus build my table row by row for output in the panel.

  1. How can I access the data in the structure field in my custom plugin?
  2. Where would I put the looping part? In the index.php or the index.js? What is the code that I need to achieve this? (docs are very sparse on this)
  3. I suppose most of my HTML-code should go into the template property in my index.js?! I guess if I have some more lines of HTML code it gets really hard to read if I put it all into the string-value of the template property (quotes in quotes, line breaks etc.). Is there any way to store HTML code separately (e.g. in a <template>-tag) where it’s more readable?


I take it you’ve looked at the plugin kit?

Also its probably worth watching Bastian’s live streams on creating a panel plugin. Might clear up a few things for you.


Part 2…

Still the question is open: how can I access the data in the structure field in my custom plugin?

Kirby::plugin('mshoestrng/tableview', [
    'fields' => [
        'tableview' => [
          'computed' => [
            'mytitle' => function() {
              return $page->title();

The above gives the error: “Undefined variable: page”. So what’s the correct way to access data in the plugin?

I searched the entire documentation and there is not a single example how to access page data or other data from the PHP API in plugins… (@bastianallgeier @texnixe)

If I remember correctly, you get the page object via $this->parentModel()

@texnixe thanks! But how can I then access the content of the structure field so I can access the different entries in it in my index.js? Please give a code example. Also is there any way I can debug (e.g. var_dump()) stuff in index.php and index.js in my component?

It’s very frustrating to develop in Kirby 3 if there is no documentation on this and if one has no way to debug (i.e. echo values) step-by-step in index.php and index.js during development!!

I really don’t want to spend a lot of time reading through all of the Vue documentation etc. So it would be much appreciated if you can give concrete example how I can effectively debug in the new Kirby3/Vue environment.

You can pass your structure items as a query in your field

Then you could fetch the items like this in youur index.php

      'computed' => [
                'items' => function () {
                    $q = new Kirby\Toolkit\Query($this->query, [
                        'site' => site(),
                        'page' => $this->model(),
                        'pages' => site()->pages()
                    $result = $q->result();
                    return $result->pluck($this->field);

Note that in the example, I only pluck a single field from the structure. The items are then available in your JS.

Unfortunately, I can’t help you a lot with this. My best advice is to look at example plugins. And yes, we have to provide better documentation and I would do it if I knew more about this stuff.

@bastianallgeier you pointed me to the other day for the source of the structure field, but where is the PHP part of it? Maybe this helps me to understand how the data is passed to the vue.

In /kirby/config/fields/structure.php

Ok, so you don’t want to build anything that fetches data from a structure field but you want to build a custom structure field, it seems? In that case, forget the above.

Wouldn’t it then make sense to use the structure field as basis and only changed the Vue part that displays the data?