Create Alpaca.js custom fields

An example to customize fields in Alpaca Forms Framework.


This is my first post about programming. I will talk about how create a custom field in Alpaca.js.

We are going to create an example of a shopping list form.

We need a textarea field that supports a list of values to submit. Every line of the textarea will be a value to be sent, which represents an item to buy.

We will call the new field textarea-array and we proceed to create it. We extend the existing TextAreaField and modify several behaviours:

Now, if we render an Alpaca form with a field with this type, the value showed is a string representing a list of values. This is not the value we want. We need to change the value and display it as we have introduced.

For this, we add the setValue option to extends object. This option include a function that sanitize and display the correct value in the field:

We can modify other options like onChange, setTitle, etc. You can see the options you can override looking in the source code of Alpaca.js.

The last step is register the new custom field into Alpaca:

Finally, we have to create a JSON with the form specification:

We can see the result in the following image:

P.S. In the following code you have the complete code created for the example:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.