I intentionally separated the Field Module from the user documentation because it is more high-level and geared toward power-user or extension builders.
A field is a structure for holding data. We can have Fields that are nested and even Fields that can refer to themselves, more like a foreign key kind of relationship, but let's take it a step at a time, I will get to that in a bit.
In this guide, you would learn about all the native and core Fields in Tonics...
Note: Fields are grouped into categories, so, the list would be in a category relationship.
Getting Started
The Field Module is a requirement and it is included by default in most Tonics Solutions.
To start creating a Field Items, you need to create a Field that would hold the items, to create a Field, goto
- Tool -> Field
- Create the field and save the changes
To start creating Field Items, goto
- Tool -> Field -> All Fields
- Select the newly created Field, then click on the builder link
Having done, you can start adding Fields, you can learn more about the various types of Fields in Tonics below...
Field Types
Fields are structured in different categories, for example, we have the Input category that houses all Fields related to Inputs such as Text, Range, Choice, and so on, so, let's start looking at them one after the order.
Input
The inputs house several Fields such as Text, Range, Choice, Date, Rich Text, Select & Color
Text
The Text field is under the Input Field category, it can be used to create a text input.
ScreenShot
Note: Pay attention to the below as that is how the rest of the fields options toggle works
To add the Text field, open the Input menu on the left side, select Text, and click the Add To Field button
You should see the Text Field added like in the below image:
By Default, Fields options settings would be closed, so, open it by clicking the Field arrow-down button:
Upon opening the Field option, you get the following:
Option
- Field Name: Name used to identify the field
- Input Name: Name used to retrieve the input value in your template or wherever you are using the field
- Default Value: The default value shown for the user
More Settings Option
Under More Settings, you have the following:
- Hide In User Edit Form: If set to true, it would hide the field in the user edit page
- Max Character: This property sets the maximum number of characters that can be entered in the text input. For example, if you set the max character to 50, the user will not be able to enter more than 50 characters in the text input. This property is useful for limiting the length of the user input, which can be helpful in situations where there are constraints on the amount of text that can be entered.
- Placeholder: This property sets a placeholder text inside the text input that disappears when the user starts typing. It is used to provide a hint or example of the type of input that is expected in the text input. For example, a placeholder for a username input field could be "Enter your username here". This property can help to improve the user experience by providing guidance on what to enter in the field.
- Read Only: This property sets the text input to read-only, which means that the user cannot edit the input field. This is useful when you want to display information in a text input that the user should not be able to edit, such as a read-only input displaying a calculated value.
- Required: This property specifies that the text input must be filled out before submitting the form. If this property is set to "required", the user must enter some text into the input field before they can submit the form. This is helpful to ensure that important information is not left out of form submission.
Field Validation and Field Sanitization Option
Under Field Validation or Field Sanitization option, you have the following:
Fields Validation can be used to validate the field after form submission, do not rely on it for any serious thing, it is more or less used to inform the user about incorrect field value in a field type.
Field Sanitization on the other hand has:
- DefaultSlug: Use this option if you want to use the value as a Slug
- PageSlug: Same as above except that it preserves dash (-)
- PostContentEditor: Use this option if you have fields in the value
User Interface
The Text field interface looks as follows:
Range
The range field can be used to create a slider control for numeric input values.
ScreenShot
Option
- Min Range: The minimum value that can be selected on the slider. For example, if you set the minimum value to 0, the user cannot slide the control to a value less than 0. Leave blank for no minimum value
- Max Range: The maximum value that can be selected on the slider. For example, if you set the maximum value to 100, the user cannot slide the control to a value greater than 100. Leave blank for no maximum value
- Step: The increment or decrement value when the user moves the slider. For example, if you set the step to 5, the slider will move in increments of 5
- Default Value: The default value for the range input. The default value will be the initial value of the slider when the page loads. If this property is not set, the slider will default to the minimum value.
- Fields Validation and Fields Sanitization are the same as the Text Field
User Interface
The Range field interface looks as follows: