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
Select Layout (mandatory): Choose layout from the following List
View, Grid View, Slider View or Split View
Grid View
No. of Card in Row
Slider View
Slider Options
Enable Slider Navigation
Enable Slider Pagination
Infinite loop
Slider Size
Center Class
Center Padding
Rows
Auto-play Speed
Speed
Is Auto-play
Swipe to Slide
Is Vertical
Vertical Swiping
Pause on Hover
Database Field Name (mandatory): These are the attributes of the
form
Label Name (mandatory)
Column Width
2nd Step – API
Data
Configure data source: Select data source from the following
HTTP, Workflow, No SQL or RDBMS
HTTP
Data Connection
Method (mandatory): Select method from the following
GET, PUT, POST, PATCH, DELETE or POCO
API URL (mandatory)
Query Parameters
Key
Value
Query Variable
Select Type
Headers
Name
Value
Others
Enable raw query
Enable Encryption
Response Attribute
Paging Type: Server Side or Client Side
Server Side
Page From Param
Page Size Param
Page Size
Enable Sorting
Sorting Column
Field Label
Sorting Field (API)
Sort Order
Show Total Count
Count Label (mandatory)
API Field for Total Counts (Optional) (mandatory)
Is API Result Nested
Map With Data Model Property: If true, No Api and client data
required. Grid will bind from Page get API
Mapping
Load Card by Form UI: This is used to configure card grid
using a Custom Card design
Form Id
Horizontal Alignment: Choose alignment from the following
Left, Right, Center, Between or Around
Hide Default Border
Custom Header
Name
Custom Class
Width
Header Custom Class
Card Type: There are certain cards designs to choose from like
List, Photo, Backdrop, Large, Profile, Contact, Product,
Dynamic, etc.
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:
Binding
Label
Data Field: From API
Data Type: Choose data type from the following None,
Email, Date, Title, SubTitle, Image, Header Image,
etc.
Text Color: Select option from the dropdown menu
Web View
Label Option: Select label option from the following
Name Only, Name & Icon, Icon Only or None
Disable Word Wrap
Mobile View
Hide in Mobile
Number of Line
Label Option: Select label option from the following
Name Only, Name & Icon, Icon Only or None
Icon
Icon Size
Icon Color
Label Property
Font Size
Line Height
Color
Is Font Italic
Is Font Bold
Label and value not in one line?
Gap between Label and Value
Value Property
Font Size
Line Height
Color
Is Font Italic
Is Font Bold
Action
Action Button View at: Popover Or Footer
Footer
Action Button Position
Gap between buttons
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:
Action
Button Text
Button Type: Select option from the dropdown menu
Action Type: Choose action type from the following
Sidebar, New Tab, Same Tab, Popup Window, Submit,
Submit & Redirect, etc.
Primary Key Field Name
Redirect URL
Primary Key Node (optional)
Web View
Label Option: Choose label option from the following
Name Only, Name & Icon or Icon Only
Web Icon: Select option from the dropdown menu
Mobile View
Label Option: Choose label option from the following
Name Only, Name & Icon or Icon Only
Is Icon Right?
Mobile Icon: Select option from dropdown menu
Gap between Icon and Text
Button Active Background Color
Button Text Color
Button Active Text Color
Button Size
Button Variant
Border Radius
Padding Vertical
Padding Horizontal
Font Size
Line Height
Swipe List Action: This property is applicable for
List layout only
Margin Left
Margin Right
Advance
Mark As Default Action [Click on card]
Action: Choose action from the following Hide, Show,
Enable or Disable
Add Rule
API Field
Operator
Value
Action
Is Value From DataModel
Model Value From Another Form
Set data model to page variable: Set this option as
"Yes" to access the page variable on sidebar
Page variable
Type: Object or Array
Array
Key
Value
3rd Step – Advance
Design
Image Width
Image Height
Default Image URL: This image will display if the image url is
missing in data response
Bootstrap Column Class
Show Card Image in Circle
Enable Shadow
Hide Initials
Others
Enable Export
File Name
Enable Advance Search
Open Advance Search in Sidebar
Filter Sidebar Position (Left Side)
Remember last Searched Criteria
Store Search Keywords (Return from API Response)
Search Keywords API Field
API Method: Get or Post
Advance Search Form
Advance Search API Mapping
API Param
Advance Search Field
Enable Search On-load
Enable Action Link (To Add Selected Item in Parent Page)
Primary Key (mandatory)
Selection Attribute
Enable Chart
Chart API Mapping
Label
Binding Field
No Data Configuration
No Data Image URL
Image Width
Background Color
Border Radius
Gap
Enable Shadow ?
Icon
Icon Color
Icon Size
Title
Title Color
Title Size
Message
Message Color
Message Size
Padding Top
Padding Right
Padding Bottom
Padding Left
Margin Top
Margin Right
Margin Bottom
Margin Left
Cover Height
4th Step – Mobile
Background Color
Border Radius
Border Color
Border Width
Padding Top
Padding Right
Padding Bottom
Padding Left
Slider View
Slider Type
Layout Card Offset
Loop
Loop Clones Per Side
Auto Play Delay
Auto Play
Has Parallax Images
Inactive Slide Scale
Inactive Slide Opacity
Item Width (in %)
Slider Width
Vertical
Slider Height
Item Height
Border Radius
Gap Between Cards
Gap Between Rows Inside Card
Enable Shadow?
Container
Container Height
Container Max Height
Margin Top
Margin Right
Margin Bottom
Margin Left
Click “Confirm” and “Card Grid” control is
configured.