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): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Placeholder: Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  4. Web Icon: Specifies the icon to be displayed alongside the field or control in a web interface, enhancing visual representation or user interaction.
  5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
    1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon.
    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: Determines whether the input field should use masking to format the entered data.
    1. Mask Type: Specifies the type of mask to be applied to the input field.

3rd Step – Advance

  1. Design
    1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    2. Custom Class: Specifies a user-defined CSS class to apply custom styles and formatting to the component.
    3. Is Show Color: Determines if the color property should be applied to the element, enabling color customization for visual emphasis.
    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: Specifies whether the header text in a grid or label should be displayed in bold for emphasis.
      2. Column Text Align: Defines the text alignment for a column in a grid or layout.
  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): Indicates whether the value field is linked to a page variable for dynamic data binding.
    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: Ensures that the text or content is displayed in a single line, regardless of its length.
    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: Configures API settings for fetching data dynamically.
      1. API end point [Refresh] (mandatory): Specifies the mandatory API endpoint to fetch data and includes a refresh option to update the data.
      2. Add API Parameter: Allows adding query parameters to the API call for customized data retrieval.
  3. Mobile
    1. Mobile Icon: Defines the icon to be used for mobile view.
    2. Mobile Color: Specifies the color for the mobile icon or element.
    3. Width: Sets the width of the element.
    4. Minimum Height: Specifies the minimum height of the element.
    5. Number Of Lines: Determines the number of lines the text should span.
    6. Flex: Specifies how a flex item will grow, shrink, or maintain its size within a flex container, determining its proportion relative to other items.
    7. Align Self: Select align self from the following Auto, Top, Center, Bottom or Stretch
    8. Line Height: Specifies the vertical spacing between lines of text, affecting the overall text layout.
    9. Text Align: Controls the horizontal alignment of the text.
    10. Margin: Sets the outer spacing around the element.
      1. Margin Left: Defines the space or gap on the left side of an element, controlling its position relative to adjacent elements.
      2. Margin Top: Specifies the space or gap at the top of an element, determining its vertical position relative to elements above it.
      3. Margin Right: Sets the space or gap on the right side of an element, influencing its horizontal positioning relative to adjacent elements.
      4. Margin Bottom: Defines the space or gap at the bottom of an element, controlling its vertical positioning relative to elements below it.
      5. Margin Left Auto: Automatically adjusts left margin.
      6. Margin Top Auto: Automatically adjusts top margin.
      7. Margin Right Auto: Automatically adjusts right margin.
      8. Margin Bottom Auto: Automatically adjusts bottom margin.
    11. Padding: Defines the inner spacing within the element.
      1. Padding Left: Adjusts the amount of space between the left edge of the control and its content.
      2. Padding Top: Adjusts the amount of space between the top edge of the control and its content.
      3. Padding Right: Adjusts the amount of space between the right edge of the control and its content.
      4. Padding Bottom: Adjusts the amount of space between the bottom edge of the control and its content.
    12. Show Border Bottom: Toggles the display of a bottom border for the element.
      1. Border Color: Specifies the color of the border.
      2. Number: Defines the thickness or style of the border.
    13. Label Property: Customizes the label text and appearance.
      1. Label Color: Sets the color of the label text.
      2. Label Font Size: Adjusts the font size of the label.
      3. Label Bold: Toggles bold styling for the label.
      4. Label Italic: Toggles italic styling for the label.
      5. Label Width: Defines the width of the label element.
      6. Justify Content: Select from the following Left, Right, Center, etc.
    14. Value Property: Customizes the value text and appearance.
      1. Value Color: Sets the color of the value text.
      2. Value Font Size: Adjusts the font size of the value text.
      3. Value Bold: Toggles bold styling for the value text.
      4. Value Italic: Toggles italic styling for the value text.
      5. Justify Content: Select from the following Left, Right, Center, etc.

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