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

Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
Label Name (mandatory): Specifies the display name or title for a field or control in the user interface.
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.

2nd Step – API

Data

Data Source: Select the data source from the following options: HTTP, Workflow, No SQL, or RDBMS.
1. HTTP: Configuration for using HTTP as the data source.
  1. Data Connection: Specify the data connection settings.
  2. Method (mandatory): Select the HTTP method from GET, PUT, POST, PATCH, DELETE, or POCO.
  3. API URL (mandatory): Enter the endpoint URL for the API.
  4. Query Parameters: Configure the query parameters for the API.
    1. Key: The parameter name.
    2. Value: The parameter value.
    3. Query Variable: Variable used in the query.
    4. Select Type: Specify the parameter type.
  5. Headers: Define the HTTP headers to include in the API request.
    1. Name: Header name.
    2. Value: Header value.
  6. Others: Additional settings for the API request.
    1. Enable raw query: Enable or disable raw query support.
Response Attribute: Specify the attribute in the API response to bind data.
Paging Type: Select the pagination type, either Server Side or Client Side.
1. Server Side: Configure server-side pagination settings.
  1. From Param: Parameter to indicate the starting record.
  2. Page Size Param: Parameter for specifying the page size.
  3. API Field for Total Counts (Optional): Specify the API field that provides total record counts.
  4. Server Pagination View: Choose the server pagination style, either Load More or Number Type.
    1. Number Type: Settings for number-based pagination.
      1. Show Pagination: Enable or disable pagination display.
      2. Show Pagination Top: Show pagination controls at the top.
      3. Show Pagination Bottom: Show pagination controls at the bottom.
      4. Page Size Options: Define the available page size options.
  5. Show Total Count: Display the total record count.
  6. Total Count Label: Label for the total record count display.
Page Size: Specify the number of records per page.
Map With Data Model Property: If enabled, no API or client data is required, and the grid binds from the Page get API.
Is API Result Nested: Indicate whether the API result is nested.
Primary Key: Specify the unique identifier for each record.
Refresh Component On Close: Reload the component when it is closed.

Mapping

Field Mapping: Click on the "Add New" button to map the required number of fields in the grid. Use the refresh button to reload the API response, then configure the following fields:
1. Binding: Define the data bindings for the fields.
  1. Header: The header text displayed for the column.
  2. Data Field: Specify the field name from the API response.
  3. Data Type: Select the data type, such as None, Date, Title, Image, or Link.
  4. Show Icon Only: Enable or disable showing only the icon without text.
  5. Icon Margin: Define the margin around the icon.
  6. Column Width: Set the width for the column.
  7. Text Alignment: Align text to the left, right, or center.
  8. Is Multi Row Text?: Specify if the text spans multiple rows.
2. Advance: Additional column settings.
  1. Hide Column: Enable to hide this column from the grid.
  2. Style: Apply custom styles to the column.
Enable Nested Data? Enable nested data support for the grid.
1. Nested Collection Field (mandatory): Specify the collection field that contains nested data.
2. Field Mapping: Click "Add New" to map fields for nested data, refresh the API response, and configure the following:
  1. Display Name: The display name for the nested field.
  2. Binding Field: Specify the field name for binding nested data.
  3. Field Type: Choose the field type, such as None, Email, Date, Title, or Image.
Card Type (Mobile only): Specify the card type used for mobile views.

Action

Action Header: The header label for the action column in the grid.
Is action on last column: Specify whether the action button is placed in the last column.
Action Button View At: Select the view type for the action button, either Popover or Inline.
Actions: Click on the "Add New" button to configure actions based on requirements. Configure the following details:
1. Action: Configure the action properties.
  1. Button Text: Text displayed on the action button.
  2. Button Type: Select the button type from the dropdown menu.
  3. Action Type: Choose the type of action, such as Sidebar, New Tab, Same Tab, Popup Window, Submit, Submit & Redirect, etc.
  4. Primary Key: Specify the primary key for the action.
  5. Redirect URL: Provide the URL to redirect after the action is executed.
  6. Primary Key Node (optional): Specify the node for the primary key if needed.
  7. Bind Action with Column: Bind the action with a specific column.
    1. Column Name: The name of the column to bind the action.
2. Web View: Configure settings for web view.
  1. Web Name Type: Choose how the name is displayed, such as Name Only, Name & Icon, or Icon Only.
  2. Web Icon: Specify the icon for web view.
3. Mobile View: Configure settings for mobile view.
  1. Mobile Name Type: Choose how the name is displayed on mobile, such as Name Only, Name & Icon, or Icon Only.
  2. Mobile Icon: Specify the icon for mobile view.
4. Advance: Additional action settings.
  1. Mark As Default Action: Set this action as the default.
  2. Action: Choose the action behavior, such as Hide, Show, Enable, or Disable.
  3. Add Rule: Configure rules for the action.
    1. Api Field: The field from the API response to apply the rule.
    2. Operator: Specify the operator for the rule condition.
    3. Value: Set the value to match the condition.
    4. Action: Define the action to perform when the condition is met.
    5. Is Value From DataModel? Indicate if the value comes from a data model.
      1. Model Value From Another Form? Specify if the value is from a different form.
  4. Set data model to page variable: Enable this to access the page variable on the sidebar.
    1. Page variable: Define the variable name.
    2. Type: Select Object or Array.
      1. Array: Configure key-value pairs for the array.
        
        Key: The key for the array element.
        
        Value: The value for the array element.

3rd Step – Advance

Design

Default Image Url: This image will display if the image URL is missing in the data response.
Image Width: Set the width of the displayed image.
Image Height: Set the height of the displayed image.
Image Size: Select the size of the image from the dropdown menu.
Image Position: Specify the position of the image within the layout.
Is Circle Image: Enable or disable circular formatting for the image.
Action Column Width: Define the width of the action column.
Bootstrap Column Class: Specify the Bootstrap class for column styling.
Enable Select Column: Enable a selectable column for the grid.
Enable Export Link (Csv): Enable the option to export data in CSV format.
1. Export Page Size: Define the page size for the exported file.
2. Export File Dynamic Name: Specify a dynamic name for the exported file.
3. Do you want to remove header?: Specify whether to exclude the header from the exported file.
4. Do you want to remove Serial Number column?: Specify whether to exclude the serial number column from the exported file.
Enable Manage Column: Enable the ability to manage and configure grid columns.
Show Export Link (Pdf): Enable the option to export data in PDF format.
1. Export Page Size: Define the page size for the exported PDF file.
Enable Freeze Column: Enable the ability to freeze specific columns in the grid.
Enable Client Side Filter: Enable filtering capabilities on the client side.
1. Filter Placeholder: Set placeholder text for the filter input field.
2. Filter Columns Index: Specify the index of the columns to include in the filter.
Is odd even color row?: Enable alternate row coloring for better readability.

Others

Enable Update Link: Allow users to update records via a link.
1. Choose Update Form Id: Select the form ID to be used for updates.
2. Enable Group Collection: Group updated records into a specified field.
  1. Group Field (mandatory): Define the field for grouping updated records.
3. Data Source: Select the data source from HTTP, Workflow, No SQL, or RDBMS.
  1. HTTP: Configure HTTP-based data source.
    1. Data Connection: Specify the connection details for the data source.
    2. Method (mandatory): Select HTTP method (GET, PUT, POST, PATCH, DELETE, POCO).
    3. API URL (mandatory): Provide the API endpoint URL.
    4. Query Parameters: Set parameters for API queries.
      1. Key: Key for the query parameter.
      2. Value: Value for the query parameter.
      3. Query Variable: Variable used in the query.
      4. Select Type: Specify the type for the query parameter.
    5. Headers: Set HTTP headers for the request.
      1. Name: Name of the header.
      2. Value: Value of the header.
    6. Others: Additional HTTP settings.
      1. Enable raw query: Allow raw query execution.
4. Response Attribute: Specify the attribute in the API response to use.
Enable Delete Link: Allow users to delete records via a link.
1. Data Source: Select the data source from HTTP, Workflow, No SQL, or RDBMS.
  1. HTTP: Configure HTTP-based data source.
    1. Data Connection: Specify the connection details for the data source.
    2. Method (mandatory): Select HTTP method (GET, PUT, POST, PATCH, DELETE, POCO).
    3. API URL (mandatory): Provide the API endpoint URL.
    4. Query Parameters: Set parameters for API queries.
      1. Key: Key for the query parameter.
      2. Value: Value for the query parameter.
      3. Query Variable: Variable used in the query.
      4. Select Type: Specify the type for the query parameter.
    5. Headers: Set HTTP headers for the request.
      1. Name: Name of the header.
      2. Value: Value of the header.
    6. Others: Additional HTTP settings.
      1. Enable raw query: Allow raw query execution.
2. Response Attribute: Specify the attribute in the API response to use.
Enable Email Link: Allow users to send emails through the grid.
1. Form Id: ID of the form used for sending emails.
2. Email Form Field (Model in Email Form) (mandatory): Define the form field for email addresses.
3. Email Field (Source Email Id Field) (mandatory): Specify the source email field.
4. Add in Group: Include the email in a group for bulk operations.
Enable Advance Search: Enable advanced search options in the grid.
1. API Method: Select API method (GET or POST).
2. Advance Search Form: Define the form for advanced searches.
3. Advance search API mapping: Map API parameters to search fields.
  1. API Param: Parameter used in the API.
  2. Advance Search Field: Field used for advanced search.
4. Enable Search on Load: Enable search execution on page load.
5. Is hide search button text: Hide text in the search button if enabled.
6. Search Button Class: CSS class for the search button.
7. Search Button Icon: Icon for the search button.
Enable Selection Submit: Enable submission of selected records.
1. Selection Attribute: Specify the attribute for selected records.
No Data Configuration: Configure settings when no data is available in the grid.
1. No Data Image URL: URL of the image to display when no data is available.
2. Background Color: Set the background color for the no-data state.
3. Image Width: Width of the no-data image.
4. Cover Height: Height of the no-data image cover.
5. Title: Title text for the no-data state.
6. Message: Message text for the no-data state.

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