A Tags field control allows users to select one or multiple Tag(s) from your existing tags database or type in new tags. You can add the Tags field control to your approval forms or add as fields to your data lists.
Using tags field control for articles, knowledges, policies etc. which users might need to search those related contents with keywords later.
Add the Tags field control
Firstly, find the Tags control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Tags field
Open the Content > Basic block and set the Title's text of this Tags control. For more information about Title for field control, please refer:
Set the Associated variable for this Tags control. When you add a new Tags control, a default variable will be generated automatically. You can click the Edit Button to change the ID and name, or click the Reset button to bind this Tags control to other existing variables. For more information, please refer:
Appearance of the Tags field
Open the Content > Appearance block to set the appearance and layout of this Tags control.
Number of Tags: Set the maximum numbers and tags to be added.
Display Title: Choose display or hide the title of this control. For more information, please refer: Understand the title of field controls
Allow comment: Turn on this option will allow users to add comments on this control.
Dynamic Display Rules: When you set a dynamic display rules, It behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control
.
Validation of the Tags field
Open the Content > Validation block to set the properties of this Tags field control.
Readonly: Turn this ON will make this field control as view only status.
Required: Make this field as required. Users cannot leave the content as empty.
Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field. Learn more about the Custom Validation
.
Action call of the Tags field
Open the Content > Action block to call a pre-defined action from the dropdown list. This action will be triggered once the value of this image field is changed.
Style the Tags field control
Field - Editable
Open the Style > Field - Editable block to set the styles of the field control for it's editable status.
Typography: Set the typography options for the text in the Tags picker control.
Normal / Focus: Set different styles for normal state and focus state of the Tags picker. Styles below are supported to be set separately for Normal and Focus state.
Color: Choose the color of the field's text.
Background Color: Set background color of the field. By default, the background color is set as transparent.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options
Placeholder Color: Choose the color of the placeholder text.
Align: Set the alignment of text inside the field control. Can be Left, Center or Right.
Padding: Set the Padding of the field control.
Field Width: Set the width of the field control in PX , %, em, rem, vw, calc.
Field Alignment: Set the alignment of the field control. This will only be effected when the field width is less than the outside container.
Selected items: Set the styles of the selected Tags.
Margin: Set the Margin of the selected Tags in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the selected Tags in PX , %, em, rem, vw, calc.
Typography: Set the typography options for the text of selected Tags.
Color: Select the color of the selected Tags.
Background Color: Select the background color of the selected Tags block.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options
Error Message: Set the styles of the error message,
Typography: Set the typography options for the error message.
Color: Choose the color of the error message's text.
Dropdown
Open the Style > Dropdown block to set the style of the Tags items.
Typography: Set the typography options for the text of Tags items.
Align: Set the alignment of text inside each of the location items. Can be Left, Center or Right.
Padding: Set the Padding of the Tags items.
Normal / Hover: Set different styles for normal and hover state of each Tags items. Styles below are supported to be set separately for normal, hover and active state.
Text Color: Choose the color of the Tags items' text.
Background Color: Set background color of the Tags items list.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options
Field - Read Only
Open the Style > Field - Read Only block to set the styles of the field control for it's view only status.
Selected items: Set the styles of the selected Tags on it's read only state.
Margin: Set the Margin of the selected Tags in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the selected Tags in PX , %, em, rem, vw, calc.
Typography: Set the typography options for the text of selected Tags.
Color: Select the color of the selected Tags.
Background Color: Select the background color of the selected Tags block.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options
Note:
When setting the control to read-only mode and the desired specific stylesheet behaviors, ensure to configure the style of selected items under Field-Read-Only. If not defined, the control will default to using the style of selected items under Field-Editable, which may impact the visual experience and consistency of the interface.
Style of title
Set the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced options that are applicable to this control.