Page method field plugin

Kirby 3 Solved ✅
1

Hello,

How can I make page methods accessible to a custom field plugin?

Let’s say if I have a page method mid1Default() which just pulls text from another page, it works for built in fields. But if I make a super simple plugin with a content prop:

  infoplus:
    type: infoplus
    content: page.mid1Default

It gets output as text rather than using the page method:

Screenshot 2022-10-20 at 14.59.02

My simple vue component looks like this:

<template>
  <div>
    <k-field class="k-field-header" :label="label"></k-field>
    <div v-html="content"></div>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    content: String,
  },
};
</script>

Any ideas? From the docs, I guess the rest api is not calling the page method before sending the value to my vue component.

Fields can have many options in your blueprint, such as a label, a default value, placeholders, etc. Those property values from the blueprint will be sent to the field via the REST API and the Vue component can work with them to display the field accordingly.

Thanks for any help

2

You content prop should probably return the rendered result of the query in the PHP part of the field.

3

Yes, that’s what I thought, but it’s passing page.mid1Default as a string, rather than calling the function. Ideally I would like to pass either a string, or call a page method (like a regular info field). I’ve checked the kirby dist on github but I can’t figure out at what point the prop is passed as a string or a page method is called. In the file kirby/config/fields/info.php it seems to already be a string.

4

Look at the computed text method in that field. It uses toSafeString().

You would have to pass your value in the content prop as query string, though:

content: '{{ page.whatever }}`

You can see an example result when you do this, e.g. in the about template of a Starterkit

dump($page->toSafeString('{{ page.layouts.toBlocks }}'));
5

Ah yes, perfect, thank you. In the end I set the prop like this:

'props' => [
    'text' => function ($text = null) {
        $text = $this->model()->toString($text);
        return $text;
    },
]
6

I guess there is a reason this is nowhere done in the props part of the source code… I think you should do this in the computed section.

7

Ok. I’ll put here in case it’s useful to anyone:

'computed' => [
    'text' => function () {
        if ($text = $this->text) {
            $text = $this->model()->toString($this->text);
            return $text;
        }
    },
]
1 Like