Custom field renders as a line

The CMS Questions
1

Hello, I’m poking around at creating a custom field. For starters I’m extending the text field. I’ve just instructed Kirby to extend the field, nothing more so I’d expect the custom field to act and look just like a standard text field, but it renders with just a line.

ss
ss1263×197 14.8 KB

Here’s my plugin index.php…

<?php
Kirby::plugin('twp/myfield', [
	'fields' => [
		'myfield' => [
			'extends' => 'text'
		]
	]
]);

Here’s my index.js

panel.plugin("twp/myfield", {
  fields: {
    myfield: {
      extends: "k-text-field"
    }
  }
});

So why not just render like a standard text field. After I understand this I’ll move onto how I might be able to add a default value to this custom field but baby steps.

2

As far as I know, you can’t extend templates in Vue components. If you extend a standard field, you get all the props, methods etc. But you have to recreate the template like:

panel.plugin("twp/myfield", {
    fields: {
        myfield: {
            extends: "k-text-field",
            template: ... your template
        }
     }
});
3

Thanks for the reply @czJonny. Maybe I’ll take the default template and dump it in there. Do you know where those field templates are stored within the kirby/ folder?

4

You can find them in Kirby Github repository here.

5

Super. Thanks again @czJonny