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): These are the attributes of the form
  2. Label Name
  3. Placeholder
  4. Column Width
  5. Select view: Select view from the following Form, Grid, Vertical, List, and Tree View
    1. Form
      1. Header Field Name
    2. Grid
      1. Enable Sorting
    3. Vertical
    4. List
    5. Tree View
      1. Header field
      2. Label CSS Class
      3. Label Color
      4. Border Color
      5. Header CSS Class
      6. Header Color

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

3rd Step – Advance

  1. Design
    1. Bootstrap Column Class
    2. Add New Button Text
    3. Hide Add New Button
    4. Hide Delete Button
    5. Show Count
      1. Label
  2. Action

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

    1. Enable Row Submit
      1. Submit Button Label
      2. Grid Submit Button Api: Select data source from the following AI, HTTP, Workflow, No SQL or RDBMS
    2. API
      1. Choose Data Source: Select data source from the following AI, HTTP, Workflow, No SQL or RDBMS
      2. Response Attribute
      3. Dynamic Form For Edit/View
        1. Dynamic Form Property
      4. Custom action
        1. Name
        2. Action Type: Select from the following Edit, Delete or Select
        3. Web Icon
        4. Web Name Type: Select from the following Name Only, Name & Icon or Icon Only
        5. Mobile Icon
        6. Mobile Name Type: Select from the following Name Only, Name & Icon or Icon Only
        7. Primary
        8. Button Type
    1. Form Behavior
      1. Select add/edit Form
      2. Select Card Form
      3. Add new Form show on page
    1. Message
      1. Success Message Icon
      2. Success Message Title
      3. Success Message Text
      4. Update Message Icon
      5. Update Message Title
      6. Update Message Text
      7. Error Message Icon
      8. Error Message Title
      9. Error Message Text
  3. Others
    1. Enable Refresh
    2. Add Attributes to Grid as child
      1. Root Attributes to Grid as child
    3. Read only
    4. Enable UpDown
    5. No Data Configuration
      1. No Data Image URL
      2. Image Width
      3. Background Color
      4. Border Radius
      5. Gap
      6. Icon
      7. Icon Color
      8. Icon Size
      9. Title
      10. Title Color
      11. Title Size
      12. Message
      13. Message Color
      14. Message Size
      15. Padding Top
      16. Padding Right
      17. Padding Bottom
      18. Padding Left
      19. Margin Top
      20. Margin Right
      21. Margin Bottom
      22. Margin Left
      23. Cover Height

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.