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. Label Option: Select label option from the following Name Only, Name & Icon, Icon Only or None
      2. Number of Line
      3. Mobile Color
      4. Hide in Mobile
      5. Font Size
      6. Is Font Bold
      7. Is Font Italic
   
3. Action
1. Action Button View at: Popover Or Footer
   1. Footer
      1. Action Button Position
2. 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. Mobile Icon: Select option from dropdown menu
      3. Swipe List Action: This property is applicable for List layout only
   
   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. Background Color
   3. Image Width
   4. Cover Height
   5. Title
   6. Message

4th Step – Mobile

1. Container Height
2. Container Max Height
3. 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
4. Margin Top
5. Margin Left
6. Margin Bottom
7. Margin Right
8. Enable Shadow

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