HTML

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

1st Step – Design

This is the first step of the “HTML” 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. Label Name (mandatory): Specifies the display name or title for a field or control in the user interface.
  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. HTML: Defines the HTML content or structure to be rendered within the component.
  5. Mapping Fields: Specifies the fields used to map data between the component and the data source, enabling seamless integration and data binding.

2nd Step – Advance

  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. Style: Defines CSS styling to customize the appearance and layout of the component directly.

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

How to use HTML control

  1. Begin by creating a blank transaction form.
  2. Add HTML control.
  3. Configure all the attributes in design page based on the specified requirements of the form.
  4. The "HTML" section is where you design how your content will look. You can use dynamic tags (placeholders) to show values from your data — such as name, email, skills, or project details.

    5. Key Features:

    1. Dynamic Tags like {name}, {email}, {skill}, and {project.title} are used to insert data.
    2. Loops allow you to repeat content for a list of items.
      3. [for skill in skills] {skill} [/for]
    3. Conditions help display content only when a rule is met.
      4. [if skill === "React"] {skill} // example: you can add class="bg-success" [/if]
    4. You can style your output using regular HTML and CSS classes (e.g., Bootstrap)
  5. The "Mapping Fields" section connects your dynamic HTML template with your actual data by linking specific fields.
    1. The "HTML Key Name" represents the placeholder used in the HTML template, such as {name} or {skills}.
    2. The "Data Fields" specifies the actual data source that should fill the corresponding placeholder.
    3. The "Format Type" allows you to apply automatic formatting, such as converting array into comma separated, formatting a date, etc.
    4. The "Default Value" provides a fallback value to display when the data field is empty or missing.
    5. The "Hide Empty or Null" toggle controls whether the field should be shown or hidden if no data is available.
  6. Configure all the attributes in advance page based on the specified requirements of the form.
    1. The "Custom Class" field lets you assign a unique class name to your HTML block (e.g., htmlctrl). This class is used to target and style that specific HTML area using CSS.
    2. The "Style" area is where you define custom CSS rules for the class you've entered. This is useful for controlling layout, fonts, colors, spacing, and more.

Final Output:

On this page