Label

This control is used for fields where you want to show text on the form as Labels and no input from users is involved or you want to display non-editable data from GET API on the form.

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Label” control form wizard. Here you are required to fill in the following details:

1. Database Field Name (mandatory): These are the attributes of the form
2. Placeholder
3. Column Width
4. Web Icon
5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
   1. Tooltip Text
   2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

1. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
   1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.
2. Is Mask
   1. Mask Type

3rd Step – Advance

1. Design
1. Bootstrap Column Class
2. Custom Class
3. Is Show Color
4. Is Truncate?: Choose when you want to truncate the text
5. Is use in Grid?: Use this property when the Label is added in a Grid. When selected "Yes", you shall have to further configure the Text alignment of the Label in the Grid.
   1. Is Bold Header
   2. Column Text Align

2. Others
1. Select Format Type: Select format type from the following H1, H2, H3, H4, H5, H6 , P, Plain Text
2. Max Length: It is used when we want to limit the number of characters that can be displayed on the screen
3. Is Page Variable (Value field)
4. Label type: Choose from Text (for only Text), Value (To bind value from GET API) or Both (Display both Text and Value)
5. Text: Type the “Text” that you want to display
6. Value field: Put the attribute from GET API whose value you want to be displayed
7. Value Field Type: Choose from Number, Text, Date, Time, Date and Time, Email, Phone, Website, Address, etc.
8. Show in one line
9. Horizontal Alignment: Select horizontal alignment from the following Left, Right, Center, Between or Around
10. Vertical Alignment: Select vertical alignment from the following Top, Bottom, Center, Baseline or Stretch
11. API
    1. API end point [Refresh] (mandatory)
    2. Add API Parameter

3. Mobile
1. Mobile Icon
2. Mobile Color
3. Width
4. Flex
5. Align Self: Select align self from the following Auto, Top, Center, Bottom or Stretch
6. Margin
   1. Margin Left
   2. Margin Top
   3. Margin Right
   4. Margin Bottom
   5. Margin Left Auto
   6. Margin Top Auto
   7. Margin Right Auto
   8. Margin Bottom Auto
7. Padding
   1. Padding Left
   2. Padding Top
   3. Padding Right
   4. Padding Bottom
8. Show Border Bottom
   1. Border Color
   2. Number
9. Label Property
   1. Label Color
   2. Label Font Size
   3. Label Bold
   4. Label Italic
   5. Label Width
   6. Justify Content: Select from the following Left, Right, Center, etc.
10. Value Property
    1. Value Color
    2. Value Font Size
    3. Value Bold
    4. Value Italic
    5. Justify Content: Select from the following Left, Right, Center, etc.

Click “Confirm” and “Label” control is configured.