Custom field multiple inputs

[Floriskoch]

Hi there,

I’m trying to build a custom field that contains multiple inputs. You could see this field as a single entry of a structure field. However, I’m having a really hard time figuring out how to generate these inputs (do I write a template or do I use the input() method supplied by the InputField Class for example?) and how to save the values in text files.

I think my problem is also very similar to:

Multiple inputs in custom field and grid

Hi, EDIT: for no reasons it works well when the fields are generated from the PHP class. This allows me to abandon the hard-coded template as well, which is nice. I’m struggling creating a multi-input custom field. I managed to create multiple texts inputs with a hard-coded template, but they remain in a <div> parent. So when I try to apply grid classes .field-item-grid-1-2 for example, they don’t fit next to each others. This is what I have right now: <fieldset class="fieldset field-grid cf…

But I’m not sure how he fixed his problem.

Any help would be great as the documentation on this is lacking…

Thanks in advance!

[texnixe]

Usually, when extending a field, you don’t have to do anything specific to save the input, unless the field requires a particular way to save the data. This is done within the result method. Check out the built-in fields for examples.

A template is a good way to create the input fields.

[flokosiol]

The map field by @AugustMiller has multiple inputs. Maybe this code is a good starting point for you?!

[AugustMiller]

Oh gosh. I hope this makes sense! There are a number of methods in the core MapField class that are extracted only to break apart a long chain of block-building.

Not sure how much help this will be, but I thought I’d record some thoughts on multi-input fields.

Regardless of your approach, be sure that you construct all input elements’ name values appropriately:

<input type="text" name="fieldHandle[yourSubFieldName]" />
<input type="text" name="fieldHandle[yourOtherSubFieldName]" />

…where fieldHandle is retrieved by using $this->name().

The bracket notation is key. On this line, you’ll see the plugin getting the result of a submission, which is all the values passed within the field’s key, so in the case of the above, you’d receive an array:

[
  'yourSubFieldName' => 'text content of the first input',
  'yourOtherSubFieldName' => 'text content of the second input'
]

Don’t add data to the base key— it may get clobbered. For example you can’t have these three inputs:

<input type="text" name="fieldHandle" /> (This one will not reliably be passed to your field)
<input type="text" name="fieldHandle[yourSubFieldName]" />
<input type="text" name="fieldHandle[yourOtherSubFieldName]" />

Instead, namespace all your inputs. The first line would then become <input type="text" name="fieldHandle[firstSubField]" />.

With respect to the original question— as long as your inputs are properly name-spaced, the data will be available through parent::result(). It doesn’t matter where exactly they are in the tree you construct in the field’s content method. As I understand it, the input method is only a convention, but content is what is actually responsible for returning the field’s markup.

August

[Floriskoch]

Thanks @flokosiol and @AugustMiller for your replies, this will get me on the right track hopefully!

[benjaminwil]

@Floriskoch If you make any progress be sure to come back and share. I’m currently struggling with a custom field that I’m building that required two fields, each with its own unique value.

@AugustMiller Thanks for the detailed response – this will hopefully get me further along, too.

Today I’ve been using Kirby’s datetime field as inspiration. It uses two inputs and returns two values. Hopefully that is a useful starting point for someone else, too.