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.

Such components as Table, Chart, List View, and Grid View now do not require manual action assignment - you just have to click the Data field dropdown to see all available actions and variables - Suggested, Page, and App - and easily switch between them. The component structure will automatically regenerate based on your selection.

1. Using the Generate structure button.

Here, you connect your action (state variable or another component property) to an already added component and generate its structure from there. This scenario applies to all the components, except for Table, Chart, List View, and Grid View, since they do not require manual structure regeneration.

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 Inline editable toggle for a specific field. Here, you can switch between Edit modes (Always/On click) and Submit triggers (Blur/Change) options. The field you specified will become editable and end-users will be able to quickly adjust field value 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.

View mode placeholder

You can set a placeholder that will be displayed in View mode for nearly all field types, except for Boolean, Image, Button, and JSON Editor. You need to open the field's Common settings section and add the placeholder - it will be displayed when the field's value is blank.

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.