Advance Grid

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

1st Step – Design

1. Database Field Name (mandatory): These are the attributes of the form
2. Label Name (mandatory)
3. Column Width

2nd Step – API

1. Data
1. Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
   1. HTTP
      1. Data Connection
      2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
      3. API URL (mandatory)
      4. Query Parameters
         1. Key
         2. Value
         3. Query Variable
         4. Select Type
      5. Headers
         1. Name
         2. Value
      6. Others
         1. Enable raw query
2. Enable Encryption
3. Response Attribute
4. Paging Type: Server Side or Client Side
   1. Server Side
      1. From Param
      2. Page Size Param
      3. API Field for Total Counts (Optional)
      4. Server Pagination View: Load More or Number Type
         1. Number Type
            1. Show Pagination
            2. Show Pagination Top
            3. Show Pagination Bottom
            4. Page Size Options
      5. Show Total Count
      6. Total Count Label
5. Page Size
6. Map With Data Model Property: If true, No Api and client data required. Grid will bind from Page get API
7. Is API Result Nested
8. Primary Key
9. Min Rows
10. Refresh Component On Close

2. Mapping
1. Field Mapping: Click on “Add New” button depending on how many fields you want to map in the grid based on requirement. And click the refresh button to reload the API response. After that start mapping following fields:
   1. Binding
      1. Header
      2. Data Field: From API
      3. Data Type: Choose data type from the following None, Date, Title, Image or Link
      4. Icon Margin
      5. Column Width
      6. Text Alignment
   
   2. Advance
   1. Hide Column
   2. Style
   
2. Enable Nested Data
   1. Nested Collection Field (mandatory)
   2. Field Mapping: Click on “Add New” button depending on how many fields you want to map in the grid based on requirement. And click the refresh button to reload the API response. After that start mapping following fields:
      1. Display Name
      2. Binding Field
      3. Field Type: Choose field type from the following None, Email, Date, Title, Image, etc.
3. Action
1. Action Header
2. Is action on last column
3. Action Button View At: Popover or Inline
4. Actions: Click on “Add New” button depending on how many actions you want to configure on the card based on requirement. Then configure the following details:
   1. Action
      1. Button Text
      2. Button Type: Select option from the dropdown menu
      3. Action Type: Choose action type from the following Sidebar, New Tab, Same Tab, Popup Window, Submit, Submit & Redirect, etc.
      4. Primary Key
      5. Redirect URL
      6. Primary Key Node (optional)
      7. Bind Action with Column
         1. Column Name
   
   2. Web View
      1. Web Name Type: Choose web name type from the following Name Only, Name & Icon or Icon Only
   
   3. Mobile View
      1. Mobile Name Type: Choose mobile name type from the following Name Only, Name & Icon or Icon Only
   
   4. Advance
      1. Action: Choose action from the following Hide, Show, Enable or Disable
      2. Add Rule
         1. Api Field
         2. Operator
         3. Value
         4. Action
         5. Is Value From DataModel
            1. Model Value From Another Form
      3. Set data model to page variable: Set this option as "Yes" to access the page variable on sidebar
         1. Page variable
         2. Type: Object or Array
            1. Array
            1. Key
            2. Value
   

3rd Step – Advance

1. Design
1. Default Image Url: This image will display if the image url is missing in data response
2. Image Width
3. Image Height
4. Image Size: Select option from the dropdown menu
5. Image Position
6. Is Circle Image
7. Action Column Width
8. Bootstrap Column Class
9. Enable Select Column
10. Enable Export Link (Csv)
    1. Export Page Size
11. Enable Manage Column
12. Show Export Link (Pdf)
    1. Export Page Size
13. Enable Freeze Column
14. Enable Client Side Filter
    1. Filter Placeholder
    2. Filter Columns Index
15. Is odd even color row

2. Others
1. Enable Update Link
   1. Choose Update Form Id
   2. Enable Group Collection: Updated Collection will be grouped into Group Field
      1. Group Field (mandatory)
   3. Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
      1. HTTP
         1. Data Connection
         2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
         3. API URL (mandatory)
         4. Query Parameters
            1. Key
            2. Value
            3. Query Variable
            4. Select Type
         5. Headers
            1. Name
            2. Value
         6. Others
            1. Enable raw query
   4. Enable Encryption
   5. Response Attribute
2. Enable Delete Link
   1. Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
      1. HTTP
         1. Data Connection
         2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
         3. API URL (mandatory)
         4. Query Parameters
            1. Key
            2. Value
            3. Query Variable
            4. Select Type
         5. Headers
            1. Name
            2. Value
         6. Others
            1. Enable raw query
   2. Enable Encryption
   3. Response Attribute
3. Enable Email Link
   1. Form Id
   2. Email Form Field (Model in Email Form) (mandatory)
   3. Email Field (Source Email Id Field) (mandatory)
   4. Add in Group
4. Enable Advance Search
   1. API Method: Get or Post
   2. Advance Search Form
   3. Advance search API mapping
      1. API Param
      2. Advance Search Field
   4. Enable Search on Load
   5. Is hide search button text
   6. Search Button Class
   7. Search Button Icon
5. Enable Selection Submit
   1. Selection Attribute
6. No Data Configuration
   1. No Data Image URL
   2. Background Color
   3. Image Width
   4. Cover Height
   5. Title
   6. Message

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