Input fields: data types

The information entered in an input field is stored in the database and can be accessed before defining the input tag, at any location in the template. We call that a ‘custom variable’.

Attributes are used to modify the input field behaviour and add new functionalities.

The default attribute can be used to show a predefined/calculated value in an input field.

Today I will explain how to allocate a specific data type to your input.

Recall from the previous video on input fields, how you can create a boolean input field or a regular input field.

Here in the example, the boolean also is given the ‘required field’ attribute. This does not relate to the data type.

{% input custom.vat.exempt as:boolean required:true %}

A boolean is not just a type of input field - a radio button - but it is also a data type. In liquid, the boolean data type always has the value true, false or blank.

A data type is the format in which your input will be stored in the database. Besides boolean, examples of other important data types are:

• text
• currency
• select
• date
• account_collection

The as:text attribute will allocate the text data type to your input. It will provide a larger and dynamically-sized input field, which is fit for entering full sentences or even a full alinea of text by the user. The data type will just be a string, as is the case with a vanilla input field.

{% input custom.my_namespace.some_info as:text %}

The currency data type is usually accompanied by the ‘precision’ attribute, as seen in this example.

{% input custom.some.amount as:currency precision:0 %}

Using the precision argument of zero, the amount will be saved as if it was already rounded while entered.

Similarly, one could enter an argument equal to one, two or more.

The percentage data type, which is not covered in this video, also can be provided with the precision attribute in order to determine the number of digits after the comma stored in the database.

Except when a default is used, the user will not see how his or her input will be rounded by the precision argument.

For the select attribute, pay close attention to the difference between the input field type and the actual data type connected to it.

The input field type will be a dropdown using the following code:

{% input custom.this.dropdown as:select options:’Apple|Pear|Orange’ option_values:’1|2|3’ %}

The ‘select’ data type will always refer to the option value, which is one of the option_values specified in this example. The options can therefore be changed freely, as long as there is the same amount of options as there are option values.

The date-datatype and its input type will provide the user with a nice calendar view in which a date can be selected.

The data type stored here is a complex date value which should always be provided with a certain format when printed.

This will be covered in another video but is also elaborately explained on the developer site.

{% input custom.my_namespace.some_date as:date %}

The last data type we will explain in this video is the account selector.

In the account selector you can select a series of accounts using a drag-and-drop modal. A modal is a sort of pop-up screen. Please try this out yourself to see.

Access to the modal is provided via a ‘hash’ button.

{% input custom.my_namespace.coll as:account_collection accounts_var:my_coll range:'0__9' %}

The accounts_var attribute is optional, but often used to be able to easily re-use the collection of accounts the user has created using this field.

The range attribute is not optional, without it no accounts can be selected, so when developing always provide a range when adding an account selector to your template.

The account_collection data type refers to a string of account id’s which correspond to the accounts the user has selected using the hashtag and modal.

Examples of other important liquid data types are:

• percentage
• integer
• file

Make sure to reach out to the development site to read more about these data types!

Conclusion

• The data type of an input field determines how your input is stored in the database.
• There are a number of different data type attributes for input fields.
• Each will make the input field look different and lead to a different data type.