Card Grid

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

1st Step – Design

  1. Select Layout (mandatory): Choose a layout for displaying items. Options include List View, Grid View, Slider View, or Split View.
    1. Grid View: Displays items in a grid format.
      1. No. of Card in Row: Specifies the number of cards to display in a single row.
    2. Slider View: Displays items in a slider format.
      1. Slider Options: Configurable settings for the slider.
        1. Enable Slider Navigation: Adds navigation controls to the slider.
        2. Enable Slider Pagination: Enables pagination dots for the slider.
        3. Infinite loop: Allows the slider to loop infinitely.
        4. Slider Size: Specifies the size of the slider container.
        5. Center Class: Adds a class for centering elements in the slider.
        6. Center Padding: Defines padding for centered items in the slider.
        7. Rows: Specifies the number of rows in the slider view.
        8. Auto-play Speed: Sets the speed for auto-play functionality.
        9. Speed: Defines the transition speed for sliding between items.
        10. Is Auto-play: Enables auto-play for the slider.
        11. Swipe to Slide: Allows users to swipe through slides manually.
        12. Is Vertical: Displays the slider in a vertical orientation.
        13. Vertical Swiping: Enables swiping functionality for vertical sliders.
        14. Pause on Hover: Pauses auto-play when the slider is hovered over.
  2. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  3. Label Name (mandatory): Specifies the display name or title for a field or control in the user interface.
  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.

2nd Step – API

  1. Data
    1. Configure Data Source: Select a data source to fetch data. Options include HTTP, Workflow, No SQL, or RDBMS.
      1. HTTP: Configure HTTP-based data source settings.
        1. Data Connection: Specify the connection details for the HTTP request.
        2. Method (mandatory): Choose an HTTP method (GET, PUT, POST, PATCH, DELETE, or POCO).
        3. API URL (mandatory): Enter the endpoint URL for the API.
        4. Query Parameters: Provide parameters to be sent with the API request.
          1. Key: Specify the parameter key.
          2. Value: Provide the parameter value.
          3. Query Variable: Bind the query to a variable.
          4. Select Type: Choose the type of parameter.
        5. Headers: Add HTTP headers for the API request.
          1. Name: Specify the header name.
          2. Value: Provide the header value.
        6. Others: Additional settings for the HTTP data source.
          1. Enable Raw Query: Allows sending raw query strings.
    2. Enable Encryption: Encrypts the data for secure communication.
    3. Response Attribute: Specify the response attribute to bind data.
    4. Paging Type: Choose how to handle pagination, either Server Side or Client Side.
      1. Server Side: Configure server-side pagination settings.
        1. Page From Param: API parameter for the starting page.
        2. Page Size Param: API parameter for the number of items per page.
    5. Page Size: Specify the number of items to display per page.
    6. Enable Sorting: Enable the ability to sort data.
      1. Sorting Column: Configure sorting options.
        1. Field Label: Label for the sortable column.
        2. Sorting Field (API): API field used for sorting.
        3. Sort Order: Specify the sort order (ascending or descending).
    7. Show Total Count: Display the total count of items.
      1. Count Label (mandatory): Label for the total count display.
      2. API Field for Total Counts (Optional) (mandatory): API field used to fetch total count.
    8. Is API Result Nested: Indicates whether the API response contains nested data.
    9. Map With Data Model Property: If enabled, grid data will be bound from the Page get API without requiring additional API or client data.
  2. Mapping
    1. Load Card by Form UI: Configure card grid using a custom card design.
      1. Form Id: Specify the form ID to load the custom card design.
      2. Horizontal Alignment: Choose alignment for the card content from the following options: Left, Right, Center, Between, or Around.
      3. Hide Default Border: Option to hide the default border for the card.
      4. Custom Header: Configure the custom header for the card.
        1. Name: Specify the name of the custom header.
        2. Custom Class: Add a CSS class to style the custom header.
        3. Width: Define the width of the custom header.
      5. Header Custom Class: Add a custom CSS class to style the card header.
    2. Card Type: There are certain cards designs to choose from like List, Photo, Backdrop, Large, Profile, Contact, Product, Dynamic, etc.
    3. 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: Configure how data is bound to the card fields.
        1. Label: Define the label displayed for the bound data field.
        2. Data Field: Specify the data field to bind from the API response.
        3. Data Type: Choose the data type for the field from the following options: None, Email, Date, Title, SubTitle, Image, Header Image, etc.
        4. Text Color: Select the text color for the field from the dropdown menu.
      2. Web View: Configure the appearance and functionality of the web view layout.
        1. Label Option: Select the label display option for the web view. Choose from the following: Name Only, Name & Icon, Icon Only, or None.
        2. Disable Word Wrap: Prevent text content from wrapping within the web view layout.
      3. Mobile View: Configure the display settings and layout for mobile devices.
        1. Hide in Mobile: Option to hide the element on mobile devices.
        2. Number of Line: Specify the maximum number of lines for the text in the mobile view.
        3. Label Option: Select how labels are displayed in the mobile view. Options include Name Only, Name & Icon, Icon Only, or None.
          1. Icon: Specify the icon to be displayed with the label.
          2. Icon Size: Set the size of the icon.
          3. Icon Color: Define the color of the icon.
        4. Label Property: Adjust the properties of the label text in mobile view.
          1. Font Size: Set the font size for the label.
          2. Line Height: Specify the line height for the label text.
          3. Color: Choose the color of the label text.
          4. Is Font Italic: Option to make the label text italicized.
          5. Is Font Bold: Option to make the label text bold.
          6. Label and value not in one line?: Decide if the label and value should be displayed on separate lines.
          7. Gap between Label and Value: Define the spacing between the label and value.
        5. Value Property: Customize the properties of the value text in mobile view.
          1. Font Size: Set the font size for the value text.
          2. Line Height: Specify the line height for the value text.
          3. Color: Choose the color of the value text.
          4. Is Font Italic: Option to make the value text italicized.
          5. Is Font Bold: Option to make the value text bold.
  3. Action
    1. Action Button View at: Configure where the action button should appear, either in a Popover or Footer.
      1. Footer: Display the action button in the footer section.
        1. Action Button Position: Specify the position of the action button within the footer.
    2. Gap between buttons: Define the spacing between action buttons.
    3. Actions: Configure actions for the card. Click "Add New" to create actions based on requirements. Configure the following details:
      1. Action: Define individual button actions.
        1. Button Text: Text displayed on the button.
        2. Button Type: Choose the button type from the dropdown menu.
        3. Action Type: Select the action type from Sidebar, New Tab, Same Tab, Popup Window, Submit, Submit & Redirect, etc.
        4. Primary Key Field Name: Define the field name used as the primary key.
        5. Redirect URL: Specify the URL for redirection after the action.
        6. Primary Key Node (optional): Configure additional node details for the primary key.
      2. Web View: Configure action buttons for web display.
        1. Label Option: Choose label style: Name Only, Name & Icon, or Icon Only.
        2. Web Icon: Select an icon from the dropdown menu for web view.
      3. Mobile View: Customize action buttons for mobile devices.
        1. Label Option: Choose label style: Name Only, Name & Icon, or Icon Only.
        2. Is Icon Right?: Specify whether the icon should appear on the right side of the button.
        3. Mobile Icon: Select an icon for mobile view from the dropdown menu.
        4. Gap between Icon and Text: Define the spacing between the icon and text.
        5. Button Active Background Color: Set the background color for active state.
        6. Button Text Color: Choose the text color for the button.
        7. Button Active Text Color: Set the text color for active state.
        8. Button Size: Adjust the size of the button.
        9. Button Variant: Select the button variant style.
        10. Border Radius: Define the border radius for the button.
        11. Padding Vertical: Set vertical padding for the button.
        12. Padding Horizontal: Set horizontal padding for the button.
        13. Font Size: Specify the font size of the button text.
        14. Line Height: Define the line height for the button text.
        15. Swipe List Action: Configure swipe actions for list layout only.
        16. Margin Left: Set the left margin of the button.
        17. Margin Right: Set the right margin of the button.
      4. Advance: Configure advanced settings for actions.
        1. Mark As Default Action [Click on card]: Set an action as the default on card click.
        2. Action: Choose an action such as Hide, Show, Enable, or Disable.
        3. Add Rule: Create custom rules for actions.
          1. API Field: Define the API field for the rule.
          2. Operator: Select an operator for the condition.
          3. Value: Specify the value for the condition.
          4. Action: Define the action triggered by the rule.
          5. Is Value From DataModel: Indicate if the value is derived from the DataModel.
            1. Model Value From Another Form: Use model values from another form.
        4. Set data model to page variable: Configure page variables to interact with the sidebar.
          1. Page variable: Define the page variable name.
          2. Type: Specify the type as Object or Array.
            1. Array: Configure key-value pairs for array type.
              1. Key: Define the key for the array item.
              2. Value: Define the value for the array item.

3rd Step – Advance

  1. Design
    1. Image Width: Define the width of the image displayed in the card.
    2. Image Height: Specify the height of the image displayed in the card.
    3. Default Image URL: This image will display if the image URL is missing in the data response.
    4. Bootstrap Column Class: Set the Bootstrap column class to define the image's responsive behavior.
    5. Show Card Image in Circle: Enable to display the image in a circular shape.
    6. Enable Shadow: Add a shadow effect around the card image.
    7. Hide Initials: Option to hide initials if the image is missing.
  2. Others
    1. Enable Export: Allow exporting data to a file format.
      1. File Name: Specify the name of the exported file.
    2. Enable Advance Search: Enable advanced search options for better filtering.
      1. Open Advance Search in Sidebar: Open the advanced search form in a sidebar.
        1. Filter Sidebar Position (Left Side): Choose the position of the sidebar filter.
      2. Remember last Searched Criteria: Save the last used search criteria for quick access.
      3. Store Search Keywords (Return from API Response): Store keywords from API responses for search.
      4. Search Keywords API Field: Specify the API field for search keywords.
      5. API Method: Choose between GET or POST for the API request.
      6. Advance Search Form: Define the form structure for advanced search.
      7. Advance Search API Mapping: Map API parameters to search fields.
        1. API Param: The parameter to be sent to the API.
        2. Advance Search Field: Field used in advanced search.
      8. Enable Search On-load: Automatically enable search on page load.
    3. Enable Action Link (To Add Selected Item in Parent Page): Add an action link to manage selected items.
      1. Primary Key (mandatory): Specify the unique identifier for the item.
      2. Selection Attribute: Define the attribute for item selection.
    4. Enable Chart: Allow displaying data in chart format.
      1. Chart API Mapping: Map API data fields to chart elements.
        1. Label: Define the label for the chart data.
        2. Binding Field: Specify the data field to bind to the chart.
    5. No Data Configuration: Configure the display for no data scenarios.
      1. No Data Image URL: URL of the image to display when no data is available.
      2. Image Width: Define the width of the no-data image.
      3. Background Color: Set the background color for the no-data section.
      4. Border Radius: Define the border radius for the no-data container.
      5. Gap: Space between elements in the no-data section.
      6. Enable Shadow: Add shadow effects to the no-data container.
      7. Icon: Display an icon when no data is available.
      8. Icon Color: Set the color of the icon.
      9. Icon Size: Specify the size of the icon.
      10. Title: Add a title for the no-data message.
      11. Title Color: Set the color of the title.
      12. Title Size: Specify the size of the title text.
      13. Message: Add a message to display in the no-data section.
      14. Message Color: Define the color of the message text.
      15. Message Size: Set the font size of the message text.
      16. Padding Top: Add padding at the top of the no-data section.
      17. Padding Right: Add padding at the right of the no-data section.
      18. Padding Bottom: Add padding at the bottom of the no-data section.
      19. Padding Left: Add padding at the left of the no-data section.
      20. Margin Top: Add margin at the top of the no-data section.
      21. Margin Right: Add margin at the right of the no-data section.
      22. Margin Bottom: Add margin at the bottom of the no-data section.
      23. Margin Left: Add margin at the left of the no-data section.
      24. Cover Height: Define the height of the no-data cover area.

4th Step – Mobile

  1. Background Color: Set the background color of the card or container.
  2. Border Radius: Define the roundness of the card corners.
  3. Border Color: Specify the color of the card border.
  4. Border Width: Set the thickness of the card border.
  5. Padding Top: Add space at the top inside the card.
  6. Padding Right: Add space at the right inside the card.
  7. Padding Bottom: Add space at the bottom inside the card.
  8. Padding Left: Add space at the left inside the card.
  9. Slider View: Configure the slider's display settings.
    1. Slider Type: Define the type of slider (e.g., horizontal or vertical).
    2. Layout Card Offset: Set the offset for card alignment in the slider.
    3. Loop: Enable or disable continuous looping of the slider.
    4. Loop Clones Per Side: Define the number of cloned slides for looping.
    5. Auto Play Delay: Set the delay duration for auto-play in milliseconds.
    6. Auto Play: Enable or disable automatic sliding.
    7. Has Parallax Images: Add parallax effect to images within the slider.
    8. Inactive Slide Scale: Adjust the size of inactive slides.
    9. Inactive Slide Opacity: Set the opacity level for inactive slides.
    10. Item Width (in %): Define the width of each item in percentage.
    11. Slider Width: Specify the total width of the slider.
    12. Vertical: Enable or disable vertical sliding.
    13. Slider Height: Set the height of the entire slider.
    14. Item Height: Define the height of individual items in the slider.
    15. Border Radius: Adjust the roundness of the slider's corners.
  10. Gap Between Cards: Set the spacing between cards in the layout.
  11. Gap Between Rows Inside Card: Adjust the spacing between rows within a card.
  12. Enable Shadow?: Add shadow effects to the card or container.
  13. Container: Configure the container's dimensions and spacing.
    1. Container Height: Define the height of the container.
    2. Container Max Height: Set the maximum height of the container.
    3. Margin Top: Add space above the container.
    4. Margin Right: Add space to the right of the container.
    5. Margin Bottom: Add space below the container.
    6. Margin Left: Add space to the left of the container.

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