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
Database Field Name (mandatory): These are the attributes of the
form
Status Field
Label Name (mandatory)
Column Width
2nd Step – API
Data
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
Response Attribute
Is API Result Nested
Map With Data Model Property: If true, No Api and client data
required. Grid will bind from Page get API
Enable Pagination
Page Size
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
Web View
Label Option: Select label option from the following
Name Only, Name & Icon, Icon Only or None
Disable Word Wrap ?
Mobile View
Label Option: Select label option from the following
Name Only, Name & Icon, Icon Only or None
Number of Line
Mobile Color
Hide in Mobile
Font Size
Is Font Bold ?
Is Font Italic ?
Action
Action Button Position: Popover Or Card Footer
Card Footer
Position
Custom Action: 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
Redirect URL
Primary Key Node (optional)
Web View
Label Option: Choose label option from the following
Name Only, Name & Icon or Icon Only
Mobile View
Label Option: Choose label option from the following
Name Only, Name & Icon or Icon Only
Advance
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
3rd Step – Advance
Design
Show Card Header
Others
No Data Configuration
No Data Image URL
Background Color
Image Width
Cover Height
Title
Message
4th Step – Mobile
Popover Right
Popover Top
Click “Confirm” and “Kanban” control is
configured.