Field types & types recognition

Here, we talk about Table, Form, and Detail components.

Complex components (Table, Form, Detail) support various column/field types, such as:

🔠 String	🗓️ Date
🔠 Long Text	⌛ Time
🔗 Link	✔️ Select/Tag
🔢 Number	☑️ Multiselect/Tags
⭐ Rating	{;} JSON
💲 Currency	🔘 Button
📈 Percent	🔽 Context menu button
✅ Boolean	🖼️ Image
📅 Date & Time	🖇️ File

These field types share their settings among all supported components, meaning that, for example, configuring dropdowns for a Table or Form is exactly the same.

Using these types, you can build a component that will support most of the common use cases.

Autogeneration of field types

Form, Table, Detail and some other components support autogeneration of field types based on the component data. Autogeneration works in the following cases:

1. Creating an Action and adding a Component.

This is the scenario when you first create and run an action, then add a component and assign your action to it. All the fields and their types are generated automatically.

1. Using the Regenerate structure button.

Here, you connect your action (state variable or another component property) to an already added component and generate its structure from there.

No need to configure similar Components over and over again.

When generating a structure based on another Component property, UI Bakery not only creates the same structure but also copies the properties of all its field types.

Manual fields configuration

You can also configure fields and columns of various types manually. Follow this instruction to learn how you can do that:

1. Click the plus sign at the bottom of the Columns list.

2. In the Field panel that pops up, configure the following properties:

   1. If your component is connected to a data source, select a proper field from the Field name dropdown. If you can't find the field you need in the list, enter a name manually. This way, a new field/column will be added but not mapped to the connected dataset.

   2. Select a field type from the Type dropdown.

   3. Configure the remaining properties as needed.

View/Edit modes

All field types support View and Edit modes. These modes are extremely helpful when you need to edit data inline in a Table or Detail component without creating a separate Form for it.

This is quite simple: you just need to add your component (say, a Detail) and turn on the Edit mode for a specific field. This way, any end-user will be able to quickly adjust the model directly from the component.

Similarly, you can also turn on the View only mode for fields, for example, in a Form component. In this case, the fields will be displayed but your end-users won't be able to edit them.

Fields validation

All field types in UI Bakery support validation but these settings vary from one type to another. You can find validation settings in the field's Edit settings section.