Skip to main content
How to use Widgets

Customize the appearance of Tables in an easy way

Nick avatar
Written by Nick
Updated over a week ago

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):

  1. Choose Field.

  2. Choose Password type.

  3. 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):

  1. Choose Field.

  2. Choose Select type.

  3. 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.

Did this answer your question?