Widgets allow you to customize the Table view, along with the possibility to change view and controls in the Add/Edit row section.
1. In order to access Widgets, open Table view and click here:
2. Click Add widget.
Now you will be able to see Widget settings:
Let's breakdown each option:
Field – a field of your table you want to customize;
Widget type – a type of control for a table field;
JSON input (Select a node...) – settings of a widget (currently available for Select and Password types);
Field name – a string which replaces the name of a column with your custom name. It applies on the Add/Edit row page;
Description - a string which appears as a tooltip when the one Add or Edit a row. For example, you can leave a comment on how to work with this or that field.
Widget replaces a default control with any type of control you select. Here is the list of available widgets and how they correspond with visual controls. All types are visible in Edit/Add row, Password is also visible in Table view.
Widget type | Control | HTML element |
Boolean | checkbox | <input type=”checkbox” /> |
Date | date picker | <input type=”date” /> |
Time | time picker | <input type=”time” /> |
DateTime | date picker + time picker | <input type=”date” /><input type=”time” /> |
JSON | JSON input |
|
Textarea | textarea | <textarea></textarea> |
String | textbox | <input type=”text” /> |
Readonly | static text | <span></span> |
Number | number picker | <input type=”number” /> |
Select | select, with options provided in JSON | <select></select> |
Password | password | <input type=”password” /> |
Both Select and Password widgets require JSON settings for proper functioning, below are the examples of usage.
Password (widget type):
Choose Field.
Choose Password type.
In Pattern block, enter the characters which will be displayed instead of the original value, for example: ***
4. Click Save and then click Back.
Now you will be able to see that column values are replaced with ***, in both Table view and Edit row menu.
Select (widget type):
Choose Field.
Choose Select type.
To set up select options you need to path the array of objects with keys value and label.
4. Enter: options.
5. Click on lower box -> Append drop-down -> Object.
6. Click on the lower box -> Append. Enter – Value: a.
7. Repeat Step 6 and enter – Label: Alice.
Now you should get this result:
This means - you will see an option Alice in the list for the selected field in the Row edit menu, which represents a value: a.
Let's add another option, by repeating the Steps 5-7, and we should get this result:
Click Save and Back.
Now in the Edit row menu, for the selected field you will see a custom options list, which represents value a for Alice, and value b for Bob.
Are can add any amount of options to any field.