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.