Grid

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 “Grid” layout 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: Specifies the display name or title for a field or control in the user interface.
  3. Placeholder: Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
  4. 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.
  5. Select view: Choose a display view from the following options: Form, Grid, Vertical, List, and Tree View.
    1. Form: Display the field in a form layout.
      1. Header Field Name: The field name to be displayed as the header in the form view.
    2. Grid: Display the field in a grid layout.
      1. Enable Sorting: Allows sorting of data based on this field in the grid view.
    3. Vertical: Display the field in a vertical layout.
    4. List: Display the field in a list format.
    5. Tree View: Display the field in a tree structure format.
      1. Header Field: Specifies the field to be used as the header in the tree view.
      2. Label CSS Class: Custom CSS class for styling the labels in the tree view.
      3. Label Color: Color of the labels in the tree view.
      4. Border Color: Border color of the tree view elements.
      5. Header CSS Class: Custom CSS class for styling the headers in the tree view.
      6. Header Color: Color of the headers in the tree view.

2nd Step – Validation

  1. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
  2. Maximum Row(s) allowed: Here you can mention maximum number of rows that you want allow for user input.
  3. Default Row(s) On First Load: Specifies the number of rows or data entries that should be displayed or initialized when the form, table, or grid is first loaded. This helps set up a predefined structure or layout for user interaction.

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. Add New Button Text: Allows you to customize the label or text for the "Add New" button.
    3. Hide Add New Button: Enables or disables the visibility of the "Add New" button.
    4. Hide Delete Button: Enables or disables the visibility of the delete button.
    5. Show Count: Displays the count of items or entries.
      1. Label: Specifies the text to display alongside the count.
  2. Action

    3. If “Select view” is selected as “List”, then the following actions should perform as follows:

    1. Enable Row Submit: Allows submission of individual rows in the grid.
      1. Submit Button Label: Specifies the text label for the submit button.
      2. Grid Submit Button API: Select the data source for the submit button from the following: AI, HTTP, Workflow, No SQL, or RDBMS.
    2. API: Configuration for API integration and actions.
      1. Choose Data Source: Select the data source for the API from the following: AI, HTTP, Workflow, No SQL, or RDBMS.
      2. Response Attribute: Specifies the attribute to be used from the API response.
      3. Dynamic Form for Edit/View: Allows linking to dynamic forms for editing or viewing data.
        1. Dynamic Form Property: Defines properties for the dynamic form.
      4. Custom Action: Adds customizable actions to the grid rows.
        1. Name: Specifies the name of the custom action.
        2. Action Type: Defines the action type, which can be Edit, Delete, or Select.
        3. Web Icon: Icon to be displayed for the action in web view.
        4. Web Name Type: Defines the display style for the action name on the web. Options are Name Only, Name & Icon, or Icon Only.
        5. Mobile Icon: Icon to be displayed for the action in mobile view.
        6. Mobile Name Type: Defines the display style for the action name on mobile. Options are Name Only, Name & Icon, or Icon Only.
        7. Primary: Marks the action as a primary button.
        8. Button Type: Specifies the type of button to be used for the action.
  1. Form Behavior
    1. Select Add/Edit Form: Choose the form to be used for adding or editing entries.
    2. Select Card Form: Specifies the card layout form to be used for displaying data.
    3. Add New Form Show on Page: Determines whether a new form is displayed directly on the page.
  1. Message
    1. Success Message Icon: Icon displayed alongside the success message to visually indicate success.
    2. Success Message Title: Title of the success message shown after a successful operation.
    3. Success Message Text: Additional details or text accompanying the success message.
    4. Update Message Icon: Icon displayed alongside the update message to visually indicate an update action.
    5. Update Message Title: Title of the message shown after a successful update.
    6. Update Message Text: Additional details or text accompanying the update message.
    7. Error Message Icon: Icon displayed alongside the error message to visually indicate an error.
    8. Error Message Title: Title of the message shown after an operation failure.
    9. Error Message Text: Additional details or text explaining the error or failure.
  1. Others
    1. Enable Refresh: Allows the grid to refresh data dynamically.
    2. Add Attributes to Grid as Child: Adds specific attributes to the grid as child elements.
      1. Root Attributes to Grid as Child: Maps root-level attributes as child components of the grid.
    3. Read Only: Makes the grid content non-editable.
    4. Enable UpDown: Enables vertical scrolling or movement for the grid content.
    5. No Data Configuration: Customizes the grid display when no data is available.
      1. No Data Image URL: Specifies the URL of the image displayed when no data is present.
      2. Image Width: Sets the width of the "no data" image.
      3. Background Color: Defines the background color of the "no data" section.
      4. Border Radius: Sets the border radius for rounded corners of the "no data" section.
      5. Gap: Determines the spacing between elements in the "no data" section.
      6. Icon: Displays an icon when no data is available.
      7. Icon Color: Sets the color of the icon in the "no data" section.
      8. Icon Size: Adjusts the size of the icon in the "no data" section.
      9. Title: Specifies the title text for the "no data" section.
      10. Title Color: Defines the color of the title text.
      11. Title Size: Sets the font size of the title text.
      12. Message: Displays an additional message in the "no data" section.
      13. Message Color: Sets the color of the message text.
      14. Message Size: Adjusts the font size of the message text.
      15. Padding Top: Adds space above the "no data" section content.
      16. Padding Right: Adds space to the right of the "no data" section content.
      17. Padding Bottom: Adds space below the "no data" section content.
      18. Padding Left: Adds space to the left of the "no data" section content.
      19. Margin Top: Adds space above the "no data" section.
      20. Margin Right: Adds space to the right of the "no data" section.
      21. Margin Bottom: Adds space below the "no data" section.
      22. Margin Left: Adds space to the left of the "no data" section.
      23. Cover Height: Defines the height of the "no data" section.

After the Grid is added on the screen we add controls in the grid like Text Box, Number, Email, Phone, etc. like shown below. Everytime we click on the “Add New” button the controls added with the Grid will get created for multiple entries.

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