Kanban Views

Kanban views display records as draggable cards grouped by a field.

Basic Kanban

{
  "data_type": "UiView",
  "identifier": "lead_kanban_view",
  "type": "Kanban",
  "model": "Lead",
  "arch": [
    {
      "drag_fields": ["stage"],
      "content": [
        {
          "type": "field",
          "name": "name",
          "properties": {"widget": "Text", "fw": "600"}
        },
        {
          "type": "field",
          "name": "expected_revenue",
          "properties": {"widget": "Text"}
        }
      ]
    }
  ]
}

Drag Fields

Define which field controls the columns:

{
  "drag_fields": ["stage"]
}

Multiple drag fields create nested grouping:

{
  "drag_fields": ["stage", "priority"]
}

Card Content

Cards contain layout elements similar to forms:

{
  "content": [
    {
      "type": "field",
      "name": "priority",
      "properties": {
        "widget": "Badge",
        "size": "xs",
        "colors": {
          "low": "gray",
          "high": "red"
        }
      }
    },
    {
      "type": "field",
      "name": "name",
      "properties": {
        "widget": "Text",
        "fw": "600"
      }
    },
    {
      "type": "row",
      "content": [
        {
          "type": "field",
          "name": "assignee",
          "span": 6,
          "properties": {"widget": "Avatar", "size": "sm"}
        },
        {
          "type": "field",
          "name": "due_date",
          "span": 6,
          "properties": {"widget": "Text", "size": "xs", "c": "dimmed"}
        }
      ]
    }
  ]
}

Field Properties

Kanban card fields support visibility and group-based access control. These work with both boolean values and Q-expressions.

Property	Type	Description
visible	Boolean/String	Hide field or use Q-expression. Default: true
groups	Array	User must be in one of these groups to see the field

Conditional Visibility

Show fields based on record data:

{
  "type": "field",
  "name": "discount",
  "properties": {
    "widget": "Text",
    "visible": "Q(has_discount__eq=true)"
  }
}

Group-Restricted Field

{
  "type": "field",
  "name": "internal_notes",
  "properties": {
    "widget": "Text",
    "groups": ["sales.manager"]
  }
}

Header Aggregates

Show totals in column headers:

{
  "drag_fields": ["stage"],
  "header_aggregate": {
    "field": "expected_revenue",
    "type": "sum"
  },
  "content": [...]
}

Aggregate types: sum, count, avg

Complete Example

{
  "data_type": "UiView",
  "identifier": "opportunity_kanban_view",
  "type": "Kanban",
  "model": "CrmLead",
  "arch": [
    {
      "drag_fields": ["stage"],
      "header_aggregate": {
        "field": "opportunity_amount",
        "type": "sum"
      },
      "content": [
        {
          "type": "row",
          "content": [
            {
              "type": "field",
              "name": "priority",
              "span": 6,
              "properties": {
                "widget": "Badge",
                "size": "xs",
                "variant": "dot",
                "colors": {
                  "low": "gray",
                  "medium": "blue",
                  "high": "orange",
                  "urgent": "red"
                }
              }
            },
            {
              "type": "field",
              "name": "probability",
              "span": 6,
              "properties": {
                "widget": "Text",
                "size": "xs",
                "c": "dimmed",
                "suffix": "%"
              }
            }
          ]
        },
        {
          "type": "field",
          "name": "name",
          "properties": {
            "widget": "Text",
            "fw": "600",
            "lineClamp": 2
          }
        },
        {
          "type": "field",
          "name": "contact",
          "properties": {
            "widget": "Text",
            "size": "sm",
            "c": "dimmed"
          }
        },
        {
          "type": "row",
          "properties": {"mt": "sm"},
          "content": [
            {
              "type": "field",
              "name": "opportunity_amount",
              "span": 6,
              "properties": {
                "widget": "Text",
                "size": "sm",
                "fw": "500"
              }
            },
            {
              "type": "field",
              "name": "expected_close_date",
              "span": 6,
              "properties": {
                "widget": "Text",
                "size": "xs",
                "c": "dimmed"
              }
            }
          ]
        },
        {
          "type": "row",
          "properties": {"mt": "xs"},
          "content": [
            {
              "type": "field",
              "name": "salesperson",
              "span": 6,
              "properties": {
                "widget": "Avatar",
                "size": "sm"
              }
            },
            {
              "type": "field",
              "name": "tags",
              "span": 6,
              "properties": {
                "widget": "Tags",
                "size": "xs"
              }
            }
          ]
        }
      ]
    }
  ]
}

Kanban with Images

{
  "content": [
    {
      "type": "field",
      "name": "image",
      "properties": {
        "widget": "Image",
        "h": 120,
        "fit": "cover"
      }
    },
    {
      "type": "field",
      "name": "name",
      "properties": {"widget": "Text", "fw": "600"}
    }
  ]
}

Card Actions

Add action buttons on hover:

{
  "content": [
    {"type": "field", "name": "name", "properties": {"widget": "Text"}},
    {
      "type": "actionButton",
      "properties": {
        "icon": "Check",
        "size": "xs",
        "variant": "subtle",
        "method": "mark_done"
      }
    }
  ]
}

Next Steps

• Stats Banner - Rich visual stats above kanban views
• Other Views - Calendar and Search views
• Widgets - All available widgets