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 layout from the following List View, Grid View, Slider View or Split View
    1. Grid View
      1. No. of Card in Row
    2. Slider View
      1. Slider Options
        1. Enable Slider Navigation
        2. Enable Slider Pagination
        3. Infinite loop
        4. Slider Size
        5. Center Class
        6. Center Padding
        7. Rows
        8. Auto-play Speed
        9. Speed
        10. Is Auto-play
        11. Swipe to Slide
        12. Is Vertical
        13. Vertical Swiping
        14. Pause on Hover
  2. Database Field Name (mandatory): These are the attributes of the form
  3. Label Name (mandatory)
  4. Column Width

2nd Step – API

  1. Data
    1. Configure 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. Page From Param
        2. Page Size Param
    5. Page Size
    6. Enable Sorting
      1. Sorting Column
        1. Field Label
        2. Sorting Field (API)
        3. Sort Order
    7. Show Total Count
      1. Count Label (mandatory)
      2. API Field for Total Counts (Optional) (mandatory)
    8. Is API Result Nested
    9. Map With Data Model Property: If true, No Api and client data required. Grid will bind from Page get API
  2. Mapping
    1. Load Card by Form UI: This is used to configure card grid using a Custom Card design
      1. Form Id
      2. Horizontal Alignment: Choose alignment from the following Left, Right, Center, Between or Around
      3. Hide Default Border
      4. Custom Header
        1. Name
        2. Custom Class
        3. Width
      5. Header Custom Class
    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
        1. Label
        2. Data Field: From API
        3. Data Type: Choose data type from the following None, Email, Date, Title, SubTitle, Image, Header Image, etc.
        4. Text Color: Select option from the dropdown menu
      2. Web View
        1. Label Option: Select label option from the following Name Only, Name & Icon, Icon Only or None
        2. Disable Word Wrap
      3. Mobile View
        1. Hide in Mobile
        2. Number of Line
        3. Label Option: Select label option from the following Name Only, Name & Icon, Icon Only or None
          1. Icon
          2. Icon Size
          3. Icon Color
        4. Label Property
          1. Font Size
          2. Line Height
          3. Color
          4. Is Font Italic
          5. Is Font Bold
          6. Label and value not in one line?
          7. Gap between Label and Value
        5. Value Property
          1. Font Size
          2. Line Height
          3. Color
          4. Is Font Italic
          5. Is Font Bold
  3. Action
    1. Action Button View at: Popover Or Footer
      1. Footer
        1. Action Button Position
    2. Gap between buttons
    3. 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 Field Name
        5. Redirect URL
        6. Primary Key Node (optional)
      2. Web View
        1. Label Option: Choose label option from the following Name Only, Name & Icon or Icon Only
        2. Web Icon: Select option from the dropdown menu
      3. Mobile View
        1. Label Option: Choose label option from the following Name Only, Name & Icon or Icon Only
        2. Is Icon Right?
        3. Mobile Icon: Select option from dropdown menu
        4. Gap between Icon and Text
        5. Button Active Background Color
        6. Button Text Color
        7. Button Active Text Color
        8. Button Size
        9. Button Variant
        10. Border Radius
        11. Padding Vertical
        12. Padding Horizontal
        13. Font Size
        14. Line Height
        15. Swipe List Action: This property is applicable for List layout only
        16. Margin Left
        17. Margin Right
      4. Advance
        1. Mark As Default Action [Click on card]
        2. Action: Choose action from the following Hide, Show, Enable or Disable
        3. Add Rule
          1. API Field
          2. Operator
          3. Value
          4. Action
          5. Is Value From DataModel
            1. Model Value From Another Form
        4. 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. Image Width
    2. Image Height
    3. Default Image URL: This image will display if the image url is missing in data response
    4. Bootstrap Column Class
    5. Show Card Image in Circle
    6. Enable Shadow
    7. Hide Initials
  2. Others
    1. Enable Export
      1. File Name
    2. Enable Advance Search
      1. Open Advance Search in Sidebar
        1. Filter Sidebar Position (Left Side)
      2. Remember last Searched Criteria
      3. Store Search Keywords (Return from API Response)
      4. Search Keywords API Field
      5. API Method: Get or Post
      6. Advance Search Form
      7. Advance Search API Mapping
        1. API Param
        2. Advance Search Field
      8. Enable Search On-load
    3. Enable Action Link (To Add Selected Item in Parent Page)
      1. Primary Key (mandatory)
      2. Selection Attribute
    4. Enable Chart
      1. Chart API Mapping
        1. Label
        2. Binding Field
    5. No Data Configuration
      1. No Data Image URL
      2. Image Width
      3. Background Color
      4. Border Radius
      5. Gap
      6. Enable Shadow ?
      7. Icon
      8. Icon Color
      9. Icon Size
      10. Title
      11. Title Color
      12. Title Size
      13. Message
      14. Message Color
      15. Message Size
      16. Padding Top
      17. Padding Right
      18. Padding Bottom
      19. Padding Left
      20. Margin Top
      21. Margin Right
      22. Margin Bottom
      23. Margin Left
      24. Cover Height

4th Step – Mobile

  1. Background Color
  2. Border Radius
  3. Border Color
  4. Border Width
  5. Padding Top
  6. Padding Right
  7. Padding Bottom
  8. Padding Left
  9. Slider View
    1. Slider Type
    2. Layout Card Offset
    3. Loop
    4. Loop Clones Per Side
    5. Auto Play Delay
    6. Auto Play
    7. Has Parallax Images
    8. Inactive Slide Scale
    9. Inactive Slide Opacity
    10. Item Width (in %)
    11. Slider Width
    12. Vertical
    13. Slider Height
    14. Item Height
    15. Border Radius
  10. Gap Between Cards
  11. Gap Between Rows Inside Card
  12. Enable Shadow?
  13. Container
    1. Container Height
    2. Container Max Height
    3. Margin Top
    4. Margin Right
    5. Margin Bottom
    6. Margin Left

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