version 1.0

.gitignore

+/.idea
+
+/vendor/

README.md

+# Kanban
+This is an [extension for CiviCRM](https://docs.civicrm.org/sysadmin/en/latest/customize/extensions/), licensed under [AGPL-3.0](LICENSE.txt).
+
+It adds a "Kanban" Search Display type to Search Kit, to display results in columns according to values of a given field.
+
+## Getting Started
+
+
+## Known Issues
+
+- not draggable
+- how to make the whole card a link?
\ No newline at end of file

ang/crmKanban.ang.php

+<?php
+
+// Angular module crmKanban.
+// @see https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_angularModules
+return [
+  'js' => [
+    'ang/crmKanban.js',
+    'ang/crmKanban/*.js',
+    'ang/crmKanban/*/*.js',
+  ],
+  'css' => [
+    'ang/crmKanban.css',
+  ],
+  'partials' => ['ang/crmKanban'],
+  'requires' => [
+    'crmUi',
+    'crmUtil',
+    'ngRoute',
+    'crmSearchDisplay',
+    'crmSearchTasks',
+  ],
+  'basePages' => ['civicrm/admin/search'],
+  'settings' => [],
+  'exports' => [
+    'crm-search-display-kanban' => 'E',
+  ],
+];

ang/crmKanban.css

+/* Add any CSS rules for Angular module "crmKanban" */
+.crm-kanban {
+  --crm-kanban-card-gap: var(--crm-flex-gap);
+  --crm-kanban-column-gap: var(--crm-flex-gap);
+  --crm-kanban-radius: var(--crm-roundness);
+  --crm-kanban-padding: var(--crm-padding-reg);
+  --crm-kanban-shadow: var(--crm-panel-shadow);
+  --crm-kanban-bg: var(--crm-panel-background);
+  --crm-kanban-border: var(--crm-panel-border);
+}
+
+.crm-kanban-column ul {
+  padding-left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--crm-kanban-card-gap);
+}
+.crm-kanban-card {
+  display: block;
+  border-radius: var(--crm-kanban-radius);
+  background-color: var(--crm-kanban-bg);
+  padding: var(--crm-kanban-padding);
+  box-shadow: var(--crm-kanban-shadow);
+  border: var(--crm-kanban-border);
+}
+.crm-kanban a.crm-kanban-card {
+  --crm-link-decoration: none;
+  --crm-link-decoration-hover: none;
+  color: inherit;
+}
+
+.crm-kanban-empty {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+}
+
+/* striped style option */
+.crm-kanban.crm-kanban_striped .crm-kanban-column:nth-child(2n) {
+  background-color: var(--crm-table-even-row);
+}

ang/crmKanban.js

+(function(angular, $, _) {
+  // Declare a list of dependencies.
+  angular.module('crmKanban', CRM.angRequires('crmKanban'));
+})(angular, CRM.$, CRM._);

ang/crmKanban/crmSearchDisplayKanban.component.js

+(function (angular, $, _) {
+  "use strict";
+
+  angular.module('crmKanban').component('crmSearchDisplayKanban', {
+    bindings: {
+      search: '<',
+      display: '<',
+      apiParams: '<',
+      settings: '<',
+      filters: '<',
+      columnEntity: '@',
+      includeReserved: '<',
+      totalCount: '=?'
+    },
+    require: {
+      afFieldset: '?^^afFieldset'
+    },
+    templateUrl: '~/crmKanban/crmSearchDisplayKanban.html',
+    controller: function ($scope, $element, crmApi4, searchDisplayBaseTrait, searchDisplayTasksTrait) {
+      var ts = $scope.ts = CRM.ts('org.civicrm.search_kit');
+
+      // Mix in required traits
+      angular.extend(this, _.cloneDeep(searchDisplayBaseTrait), _.cloneDeep(searchDisplayTasksTrait));
+
+      this.$onInit = () => {
+        this.initializeDisplay($scope, $element);
+
+        this.initKanbanColumns();
+
+        this.onPostRun.push(this.resultRowsToCards);
+      };
+
+      this.initKanbanColumns = () => {
+        this.kanbanColumns = [];
+
+        crmApi4(this.columnEntity, 'get', {
+          'select': ['id', 'label', 'weight', 'is_reserved'],
+        }).then((results) => {
+          results.forEach((result) => {
+            if (this.includeReserved || !result.is_reserved) {
+              this.kanbanColumns.push({
+                key: result.id,
+                label: result.label,
+                cards: [],
+                count: 0,
+                weight: parseInt(result.weight)
+              });
+            }
+          });
+          this.kanbanColumns.sort((a, b) => a.weight < b.weight ? -1 : 1);
+        });
+      };
+
+      this.resultRowsToCards = () => {
+        this.loading = true;
+
+        const byKey = {};
+
+        if (this.results.length) {
+          const cardLinkColumn = this.settings.cardLinkColumn;
+          const cardLinkColumnIndex = cardLinkColumn ? this.settings.columns.findIndex((col) => col.key === cardLinkColumn) : -1;
+
+          for (const row of this.results) {
+            const keyColumnValue = row.columns[0].val;
+
+            // ensure target column exists
+            byKey[keyColumnValue] = byKey[keyColumnValue] ?? [];
+
+            if (cardLinkColumnIndex >= 0) {
+              row.href = row.columns[cardLinkColumnIndex].val;
+              // blank val so it isn't displayed
+              row.columns[cardLinkColumnIndex].val = null;
+            }
+
+            byKey[keyColumnValue].push(row);
+          }
+        }
+
+        for (const column of this.kanbanColumns) {
+          column.cards = byKey[column.key] ?? [];
+          column.count = column.cards.length;
+        }
+        this.loading = false;
+      };
+    }
+  });
+})(angular, CRM.$, CRM._);

ang/crmKanban/crmSearchDisplayKanban.html

+<div class="crm-search-display crm-search-display-kanban">
+  <div class="alert alert-info crm-search-display-description" ng-if="$ctrl.settings.description">{{:: $ctrl.settings.description }}</div>
+  <div class="form-inline">
+    <div class="btn-group" ng-include="'~/crmSearchDisplay/SearchButton.html'" ng-if="$ctrl.settings.button"></div>
+    <span ng-if="$ctrl.settings.headerCount" ng-include="'~/crmSearchDisplay/ResultCount.html'"></span>
+    <div class="form-group pull-right" ng-include="'~/crmSearchDisplay/toolbar.html'" ng-if="$ctrl.toolbar"></div>
+  </div>
+
+
+  <table class="crm-kanban {{:: $ctrl.settings.classes.join(' ')}}">
+
+    <tr class="crm-kanban-column-headers">
+      <th ng-repeat="(kanbanColumnIndex, kanbanColumn) in $ctrl.kanbanColumns" class="crm-kanban-column-header crm-kanban-column-index-{{ kanbanColumn.key }}">
+        {{:: kanbanColumn.label }}
+        <span ng-if="$ctrl.settings.showColumnCount && $ctrl.loading" class="crm-kanban-column-count">?</span>
+        <span ng-if="$ctrl.settings.showColumnCount && !$ctrl.loading" class="crm-kanban-column-count">{{::kanbanColumn.count }}</span>
+      </th>
+    </tr>
+
+    <tr class="crm-kanban-columns" ng-if="$ctrl.loading || $ctrl.results.length">
+      <td ng-repeat="(kanbanColumnIndex, kanbanColumn) in $ctrl.kanbanColumns" class="crm-kanban-column crm-kanban-column-index-{{ kanbanColumn.key }}">
+        <ul>
+          <li ng-if="$ctrl.loading" ng-repeat="num in $ctrl.settings.placeholders" class="crm-kanban-card">
+            <div class="crm-search-loading-placeholder"></div>
+          </li>
+          <div ng-if="!$ctrl.loading && $ctrl.results && !kanbanColumn.count" class="crm-kanban-empty-column">
+            {{:: $ctrl.settings.emptyColumnPlaceholder }}
+          </div>
+          <li ng-if="!$ctrl.loading" ng-repeat="(cardIndex, card) in kanbanColumn.cards">
+            <a class="crm-kanban-card {{:: card.cssClass}}" href="{{:: card.href}}">
+              <div ng-repeat="(colIndex, colData) in card.columns" title="{{:: colData.title }}" class="crm-search-col-type-{{:: $ctrl.settings.columns[colIndex].type }} {{:: colData.cssClass }} {{:: $ctrl.settings.columns[colIndex].break ? '' : 'crm-inline-block' }}">
+                <!-- skip first card column as kanban column -->
+                <div ng-if=":: colIndex">
+                  <label ng-if=":: colData.label">
+                    {{:: colData.label }}
+                  </label>
+                  <span ng-include="'~/crmSearchDisplay/colType/' + $ctrl.settings.columns[colIndex].type + '.html'"></span>
+                </div>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </td>
+    </tr>
+  </table>
+  <!-- no cards at all: show below all columns -->
+  <div ng-if="!$ctrl.loading && !$ctrl.results.length" class="crm-kanban-empty">
+    No cards found
+  </div>
+
+  <!--
+  <div ng-include="'~/crmSearchDisplay/Pager.html'"></div>
+  -->
+
+</div>

ang/crmKanban/searchAdminDisplayKanban.component.js

+(function(angular, $, _) {
+  "use strict";
+
+  angular.module('crmKanban').component('searchAdminDisplayKanban', {
+    bindings: {
+      display: '<',
+      apiEntity: '<',
+      apiParams: '<'
+    },
+    require: {
+      parent: '^crmSearchAdminDisplay'
+    },
+    templateUrl: '~/crmKanban/searchAdminDisplayKanban.html',
+    controller: function($scope, searchMeta, crmUiHelp) {
+      var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
+        ctrl = this;
+      $scope.hs = crmUiHelp({file: 'CRM/Search/Help/Display'});
+
+      // this is just an example
+      this.kanbanClasses = [
+        {
+          name: 'crm-kanban_striped',
+          label: 'Striped',
+        }
+      ];
+
+      this.toggleClass = (className) => {
+        if (!this.display.settings.classes) {
+          this.display.settings.classes = [];
+        }
+        if (this.display.settings.classes.includes(className)) {
+          this.display.settings.classes = this.display.settings.classes.filter((i) => i !== className)
+        } else {
+          this.display.settings.classes.push(className);
+        }
+      };
+
+      this.getColTypes = function() {
+        return ctrl.parent.colTypes;
+      };
+
+      this.$onInit = function () {
+        if (!ctrl.display.settings) {
+          ctrl.display.settings = {
+            limit: 0,
+            sort: ctrl.parent.getDefaultSort(),
+            classes: [],
+          };
+        }
+        ctrl.parent.initColumns({});
+      };
+
+    }
+  });
+
+})(angular, CRM.$, CRM._);

ang/crmKanban/searchAdminDisplayKanban.html

+<div ng-include="'~/crmSearchAdmin/crmSearchAdminDisplayHeader.html'"></div>
+<details>
+  <summary>{{:: ts('Settings') }}</summary>
+  <fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
+  <fieldset>
+    <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
+    <search-admin-toolbar-config display="$ctrl.display" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></search-admin-toolbar-config>
+    <div class="form-inline">
+      <label>{{:: ts('Kanban Styles') }}</label>
+      <div class="checkbox-inline form-control" ng-repeat="style in $ctrl.kanbanClasses">
+        <label>
+          <input type="checkbox" ng-checked="$ctrl.includes($ctrl.display.settings.classes, style.name)" ng-click="$ctrl.toggleClass(style.name)">
+          <span>{{:: style.label }}</span>
+        </label>
+      </div>
+    </div>
+    <search-admin-css-rules label="{{:: ts('Card Styles') }}" item="$ctrl.display.settings"></search-admin-css-rules>
+  </fieldset>
+  <fieldset>
+    <label>{{:: ts('Link cards')}}</label>
+    <select ng-model="$ctrl.display.settings.cardLinkColumn">
+        <option ng-repeat="(colIndex, col) in $ctrl.display.settings.columns" ng-value=":: col.key">
+            {{ $ctrl.parent.getColLabel(col) }}
+        </option>
+    </select>
+  </fieldset>
+</details>
+<fieldset class="crm-search-admin-edit-columns-wrapper">
+  <legend>
+    {{:: ts('Fields') }}
+  </legend>
+  <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'"></div>
+  <fieldset class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions">
+    <fieldset ng-repeat="(colIndex, col) in $ctrl.display.settings.columns" class="crm-draggable">
+      <i class="crm-i fa-arrows crm-search-move-icon"></i>
+      <span ng-if="!colIndex">Kanban Column Key</span>
+      <button type="button" class="btn btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
+        <i class="crm-i fa-ban"></i>
+      </button>
+      <details>
+        <summary>{{ $ctrl.parent.getColLabel(col) }}</summary>
+        <div class="form-inline" title="{{:: ts('Should this item display on its own line or inline with other items?') }}">
+          <label><input type="checkbox" ng-model="col.break"> {{:: ts('New Line') }}</label>
+        </div>
+        <div class="form-inline crm-search-admin-flex-row">
+          <label>
+            <input type="checkbox" ng-checked="col.label" ng-click="col.label = col.label ? null : $ctrl.parent.getColLabel(col)" >
+            {{:: ts('Label') }}
+          </label>
+          <input ng-if="col.label" class="form-control crm-flex-1" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
+          <crm-search-admin-token-select ng-if="col.label" model="col" field="label" suffix=":label"></crm-search-admin-token-select>
+        </div>
+        <div class="form-inline" ng-if="col.label">
+          <label style="visibility: hidden"><input type="checkbox" disabled></label><!--To indent by 1 checkbox-width-->
+          <div class="checkbox">
+            <label><input type="checkbox" ng-model="col.forceLabel"> {{:: ts('Show label even when field is blank') }}</label>
+          </div>
+        </div>
+        <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></div>
+      </details>
+    </fieldset>
+  </fieldset>
+</fieldset>

composer.json

+{
+    "name": "civicrm/kanban",
+    "description": "Kanban provides a kanban-board style search display to SearchKit",
+    "license": "AGPL-3.0",
+    "require": {},
+    "type": "civicrm-ext"
+}

info.xml

+<?xml version="1.0"?>
+<extension key="kanban" type="module">
+  <file>kanban</file>
+  <name>Kanban</name>
+  <description>Kanban provides a kanban-board style search display to SearchKit</description>
+  <license>AGPL-3.0</license>
+  <authors>
+    <author>
+      <name>Outlandish</name>
+      <email>tech@outlandish.com</email>
+      <role>Maintainer</role>
+    </author>
+  </authors>
+  <urls>
+    <url desc="Main Extension Page">https://lab.civicrm.org/outlandish/kanban</url>
+    <url desc="Licensing">http://www.gnu.org/licenses/agpl-3.0.html</url>
+  </urls>
+  <releaseDate>2025-03-31</releaseDate>
+  <version>1.0</version>
+  <develStage>beta</develStage>
+  <compatibility>
+    <ver>5.80</ver>
+  </compatibility>
+  <comments>This is extension has been developed for use with Nook but may be more broadly usable</comments>
+  <classloader>
+    <psr0 prefix="CRM_" path="."/>
+    <psr4 prefix="Civi\" path="Civi"/>
+  </classloader>
+  <civix>
+    <namespace>CRM/Kanban</namespace>
+    <format>23.02.1</format>
+    <angularModule>crmKanban</angularModule>
+  </civix>
+  <mixins>
+    <mixin>ang-php@1.0.0</mixin>
+    <mixin>mgd-php@1.0.0</mixin>
+  </mixins>
+</extension>

kanban.civix.php

+<?php
+
+// AUTO-GENERATED FILE -- Civix may overwrite any changes made to this file
+
+/**
+ * The ExtensionUtil class provides small stubs for accessing resources of this
+ * extension.
+ */
+class CRM_Kanban_ExtensionUtil {
+  const SHORT_NAME = 'kanban';
+  const LONG_NAME = 'kanban';
+  const CLASS_PREFIX = 'CRM_Kanban';
+
+  /**
+   * Translate a string using the extension's domain.
+   *
+   * If the extension doesn't have a specific translation
+   * for the string, fallback to the default translations.
+   *
+   * @param string $text
+   *   Canonical message text (generally en_US).
+   * @param array $params
+   * @return string
+   *   Translated text.
+   * @see ts
+   */
+  public static function ts($text, $params = []): string {
+    if (!array_key_exists('domain', $params)) {
+      $params['domain'] = [self::LONG_NAME, NULL];
+    }
+    return ts($text, $params);
+  }
+
+  /**
+   * Get the URL of a resource file (in this extension).
+   *
+   * @param string|NULL $file
+   *   Ex: NULL.
+   *   Ex: 'css/foo.css'.
+   * @return string
+   *   Ex: 'http://example.org/sites/default/ext/org.example.foo'.
+   *   Ex: 'http://example.org/sites/default/ext/org.example.foo/css/foo.css'.
+   */
+  public static function url($file = NULL): string {
+    if ($file === NULL) {
+      return rtrim(CRM_Core_Resources::singleton()->getUrl(self::LONG_NAME), '/');
+    }
+    return CRM_Core_Resources::singleton()->getUrl(self::LONG_NAME, $file);
+  }
+
+  /**
+   * Get the path of a resource file (in this extension).
+   *
+   * @param string|NULL $file
+   *   Ex: NULL.
+   *   Ex: 'css/foo.css'.
+   * @return string
+   *   Ex: '/var/www/example.org/sites/default/ext/org.example.foo'.
+   *   Ex: '/var/www/example.org/sites/default/ext/org.example.foo/css/foo.css'.
+   */
+  public static function path($file = NULL) {
+    // return CRM_Core_Resources::singleton()->getPath(self::LONG_NAME, $file);
+    return __DIR__ . ($file === NULL ? '' : (DIRECTORY_SEPARATOR . $file));
+  }
+
+  /**
+   * Get the name of a class within this extension.
+   *
+   * @param string $suffix
+   *   Ex: 'Page_HelloWorld' or 'Page\\HelloWorld'.
+   * @return string
+   *   Ex: 'CRM_Foo_Page_HelloWorld'.
+   */
+  public static function findClass($suffix) {
+    return self::CLASS_PREFIX . '_' . str_replace('\\', '_', $suffix);
+  }
+
+}
+
+use CRM_Kanban_ExtensionUtil as E;
+
+/**
+ * (Delegated) Implements hook_civicrm_config().
+ *
+ * @link https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_config
+ */
+function _kanban_civix_civicrm_config($config = NULL) {
+  static $configured = FALSE;
+  if ($configured) {
+    return;
+  }
+  $configured = TRUE;
+
+  $extRoot = __DIR__ . DIRECTORY_SEPARATOR;
+  $include_path = $extRoot . PATH_SEPARATOR . get_include_path();
+  set_include_path($include_path);
+  // Based on <compatibility>, this does not currently require mixin/polyfill.php.
+}
+
+/**
+ * Implements hook_civicrm_install().
+ *
+ * @link https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_install
+ */
+function _kanban_civix_civicrm_install() {
+  _kanban_civix_civicrm_config();
+  // Based on <compatibility>, this does not currently require mixin/polyfill.php.
+}
+
+/**
+ * (Delegated) Implements hook_civicrm_enable().
+ *
+ * @link https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_enable
+ */
+function _kanban_civix_civicrm_enable(): void {
+  _kanban_civix_civicrm_config();
+  // Based on <compatibility>, this does not currently require mixin/polyfill.php.
+}
+
+/**
+ * Inserts a navigation menu item at a given place in the hierarchy.
+ *
+ * @param array $menu - menu hierarchy
+ * @param string $path - path to parent of this item, e.g. 'my_extension/submenu'
+ *    'Mailing', or 'Administer/System Settings'
+ * @param array $item - the item to insert (parent/child attributes will be
+ *    filled for you)
+ *
+ * @return bool
+ */
+function _kanban_civix_insert_navigation_menu(&$menu, $path, $item) {
+  // If we are done going down the path, insert menu
+  if (empty($path)) {
+    $menu[] = [
+      'attributes' => array_merge([
+        'label' => $item['name'] ?? NULL,
+        'active' => 1,
+      ], $item),
+    ];
+    return TRUE;
+  }
+  else {
+    // Find an recurse into the next level down
+    $found = FALSE;
+    $path = explode('/', $path);
+    $first = array_shift($path);
+    foreach ($menu as $key => &$entry) {
+      if ($entry['attributes']['name'] == $first) {
+        if (!isset($entry['child'])) {
+          $entry['child'] = [];
+        }
+        $found = _kanban_civix_insert_navigation_menu($entry['child'], implode('/', $path), $item);
+      }
+    }
+    return $found;
+  }
+}
+
+/**
+ * (Delegated) Implements hook_civicrm_navigationMenu().
+ */
+function _kanban_civix_navigationMenu(&$nodes) {
+  if (!is_callable(['CRM_Core_BAO_Navigation', 'fixNavigationMenu'])) {
+    _kanban_civix_fixNavigationMenu($nodes);
+  }
+}
+
+/**
+ * Given a navigation menu, generate navIDs for any items which are
+ * missing them.
+ */
+function _kanban_civix_fixNavigationMenu(&$nodes) {
+  $maxNavID = 1;
+  array_walk_recursive($nodes, function($item, $key) use (&$maxNavID) {
+    if ($key === 'navID') {
+      $maxNavID = max($maxNavID, $item);
+    }
+  });
+  _kanban_civix_fixNavigationMenuItems($nodes, $maxNavID, NULL);
+}
+
+function _kanban_civix_fixNavigationMenuItems(&$nodes, &$maxNavID, $parentID) {
+  $origKeys = array_keys($nodes);
+  foreach ($origKeys as $origKey) {
+    if (!isset($nodes[$origKey]['attributes']['parentID']) && $parentID !== NULL) {
+      $nodes[$origKey]['attributes']['parentID'] = $parentID;
+    }
+    // If no navID, then assign navID and fix key.
+    if (!isset($nodes[$origKey]['attributes']['navID'])) {
+      $newKey = ++$maxNavID;
+      $nodes[$origKey]['attributes']['navID'] = $newKey;
+      $nodes[$newKey] = $nodes[$origKey];
+      unset($nodes[$origKey]);
+      $origKey = $newKey;
+    }
+    if (isset($nodes[$origKey]['child']) && is_array($nodes[$origKey]['child'])) {
+      _kanban_civix_fixNavigationMenuItems($nodes[$origKey]['child'], $maxNavID, $nodes[$origKey]['attributes']['navID']);
+    }
+  }
+}

kanban.php

+<?php
+
+require_once 'kanban.civix.php';
+
+use CRM_Kanban_ExtensionUtil as E;
+
+/**
+ * Implements hook_civicrm_config().
+ *
+ * @link https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_config/
+ */
+function kanban_civicrm_config(&$config): void {
+  _kanban_civix_civicrm_config($config);
+}
+
+/**
+ * Implements hook_civicrm_install().
+ *
+ * @link https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_install
+ */
+function kanban_civicrm_install(): void {
+  _kanban_civix_civicrm_install();
+}
+
+/**
+ * Implements hook_civicrm_enable().
+ *
+ * @link https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_enable
+ */
+function kanban_civicrm_enable(): void {
+  _kanban_civix_civicrm_enable();
+}

managed/KanbanDisplay.mgd.php

+<?php
+use CRM_Kanban_ExtensionUtil as E;
+
+return [
+  [
+    'name' => 'SearchDisplayType_Kanban',
+    'entity' => 'OptionValue',
+    'params' => [
+      'version' => 4,
+      'values' => [
+        'option_group_id.name' => 'search_display_type',
+        'value' => 'kanban',
+        'name' => 'crm-search-display-kanban',
+        'label' => E::ts('Kanban'),
+        'icon' => 'fa-table-columns',
+        'is_active' => TRUE,
+      ],
+      'match' => ['option_group_id', 'name'],
+    ],
+  ],
+];