Kanban

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. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
2. Status Field: A field representing the status of the form or data.
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. Data Source: Select the data source from the following options: HTTP, Workflow, No SQL, or RDBMS.
   1. HTTP: Settings related to HTTP as the data source.
      1. Data Connection: The connection details for the HTTP source.
      2. Method (mandatory): Select the HTTP method from the following options: GET, PUT, POST, PATCH, DELETE, or POCO.
      3. API URL (mandatory): The URL for the API endpoint to fetch data.
      4. Query Parameters: Optional parameters to be passed in the query string.
         1. Key: The key for the query parameter.
         2. Value: The value for the query parameter.
         3. Query Variable: Variables to be used in the query.
         4. Select Type: The type of selection for the query.
      5. Headers: Additional headers to include in the API request.
         1. Name: The header name.
         2. Value: The value for the header.
      6. Others: Other settings related to the HTTP request.
         1. Enable raw query: Option to enable or disable raw query input.
2. Response Attribute: The attribute in the response to bind to the grid.
3. Is API Result Nested: Indicates whether the API result is nested inside a parent structure.
4. Map With Data Model Property: If true, no API or client data is required, and the grid will bind from the page's get API.
5. Enable Pagination: Option to enable pagination in the data display.
   1. Page Size: The number of items to display per page when pagination is enabled.

2. Mapping
1. Load Card by Form UI: This is used to configure a card grid using a custom card design.
   1. Form Id: The identifier for the form used in the card grid.
   2. Horizontal Alignment: Choose alignment from the following options: Left, Right, Center, Between, or Around.
   3. Hide Default Border?: Option to hide the default border around the card.
   4. Custom Header: Configurations for a custom header within the card.
      1. Name: The name of the custom header.
      2. Custom Class: A custom CSS class to style the header.
      3. Width: The width of the custom header.
   5. Header Custom Class: A custom CSS class to style the header of the card.

2. Card Type: Choose from various card designs such as List, Photo, Backdrop, Large, Profile, Contact, Product, Dynamic, etc.
3. Field Mapping: Click on “Add New” to map fields in the grid based on your requirements, and refresh the API response. After mapping, configure the following fields:
   1. Binding: Configuration for binding data to the card fields.
      1. Label: The label associated with the field.
      2. Data Field: From API: The data field pulled from the API.
      3. Data Type: Choose the data type, such as None, Email, Date, Title, Subtitle, Image, Header Image, etc.
      4. Text Color: The color of the text displayed on the card.
   
   2. Web View: Configuration for how the card should appear in web view.
      1. Label Option: Select from the following options: Name Only, Name & Icon, Icon Only, or None.
      2. Disable Word Wrap?: Option to disable word wrapping in the card.
   
   3. Mobile View: Configuration for how the card should appear in mobile view.
      1. Label Option: Select from the following options: Name Only, Name & Icon, Icon Only, or None.
      2. Number of Line: The number of lines to display in mobile view.
      3. Mobile Color: The color for mobile display.
      4. Hide in Mobile: Option to hide the card in mobile view.
      5. Font Size: The font size for text in mobile view.
      6. Is Font Bold?: Option to apply bold styling to the font.
      7. Is Font Italic?: Option to apply italic styling to the font.
   
3. Action
1. Action Button Position: Popover or Card Footer
   1. Card Footer: The position where the action button is displayed on the card.
      1. Position: Specifies the location of the action button in the card footer.
2. Custom Action: Configure the actions on the card based on requirements by clicking on the "Add New" button. Then configure the following details:
   1. Action: Configuration of the action button.
      1. Button Text: The text displayed on the action button.
      2. Button Type: Select button type from the dropdown menu.
      3. Action Type: Choose action type from the following options: Sidebar, New Tab, Same Tab, Popup Window, Submit, Submit & Redirect, etc.
      4. Primary Key Field: The primary field to be used for the action.
      5. Redirect URL: The URL to redirect after the action is triggered.
      6. Primary Key Node (optional): The optional primary key node for the action.
   
   2. Web View: Configuration for how the action button appears in the web view.
      1. Label Option: Choose label option from the following: Name Only, Name & Icon, or Icon Only.
   
   3. Mobile View: Configuration for how the action button appears in the mobile view.
      1. Label Option: Choose label option from the following: Name Only, Name & Icon, or Icon Only.
   
   4. Advance: Advanced configuration for the action button.
      1. Action: Choose action from the following options: Hide, Show, Enable, or Disable.
      2. Add Rule: Option to add rules for the action button.
         1. API Field: The field in the API to be used for the rule.
         2. Operator: The operator used in the rule.
         3. Value: The value to be compared in the rule.
         4. Action: The action to take based on the rule.
         5. Is Value From DataModel: Indicates if the value is from the DataModel.
            1. Model Value From Another Form: Specifies if the value is sourced from another form in the DataModel.
   

3rd Step – Advance

1. Design
1. Show Card Header: Option to display or hide the header of the card.

2. Others
1. No Data Configuration: Configuration for when there is no data to display on the card.
   1. No Data Image URL: The URL of the image to be displayed when there is no data available.
   2. Background Color: The background color to be applied when no data is present.
   3. Image Width: The width of the image to be displayed when there is no data.
   4. Cover Height: The height of the cover image when there is no data.
   5. Title: The title text to be displayed when no data is available.
   6. Message: The message text to be displayed when no data is available.

4th Step – Mobile

1. Popover Right: Defines the position of the popover element from the right side of its container.
2. Popover Top: Defines the position of the popover element from the top of its container.

Click “Confirm” and “Kanban” control is configured.

How to use Kanban

1. Begin by creating a blank transaction form.
2. Add Kanban control.
3. Configure all the attributes in design page based on the specified requirements of the form.
1. The Status Field defines how your Kanban cards are grouped and labeled — for example, categories like Health Care, Energy, etc.

4. In Data tab of API page you can add following details:
1. Configure this section to connect to a datasource.

5. In Mapping tab of API page you can add following details:
1. Card Type defines the kind of card layout you want to use. In this case, the type is set to Contact
2. The Field Mapping section connects your placeholders to actual data fields.

6. The Action section allows you to define what happens when users interact with a card — such as viewing details, opening a form, or redirecting to another page. You can fully customize the action button's appearance, behavior, and target.
1. The Custom Action section allows you to define the label, style, behavior, target form, and routing logic for the action button displayed on each card.


Final Output: