メインコンテンツまでスキップ
バージョン: 1.16.0

Tabs customization

概要

この記事では、Tabs コンポーネントの活用とカスタマイズ方法について説明します。
以下のシナリオを想定しています。

  1. Tabs content に KUC コンポーネントを追加する
  2. Tabs content に kintone 標準フィールドを追加する

使用するコンポーネント

完成イメージ

以下が画面の完成イメージです。

tabs customize

事前準備

以下のフィールドを含むアプリを作成します。

  • 2つのスペースフィールド("space_for_native_kintone" と "space_for_custom_components" という id を持つ)
  • 3つのテーブルフィールド("sales_record_table", "task_management_table", "sales_order_table" という id を持つ)

JavaScript/CSS カスタマイズ

kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。
ファイルのアップロード方法などは、 Quick Start をご覧ください。

定数の定義

kintone UI Component のバージョン番号、スペースID、kintone フィールドなど、重要な識別子や値を参照するために定数を使用します。

const Kuc = Kucs['1.x.x'];

const SPACE_FOR_NATIVE_KINTONE = 'space_for_native_kintone';
const SPACE_FOR_CUSTOM_COMPONENTS = 'space_for_custom_components';

const SALES_RECORD_TABLE_ID = 'sales_record_table';
const TASK_MANAGEMENT_ID = 'task_management_table';
const SALES_ORDER_ID = 'sales_order_table';

// A set of Kintone fields that need to be shown/hidden on each tab.
const salesRecordTabFields = [SALES_RECORD_TABLE_ID];
const taskManagementTabFields = [TASK_MANAGEMENT_ID];
const salesOrderTabFields = [SALES_ORDER_ID];
let currentTabFields;

共通関数の作成

2つの共通関数を作成します。

  • KUC Tabs を作成する createContent 関数。DOM 操作を防ぐために、isBorderVisible オプションを作成します。 isBorderVisible: false を設定することで、DOM 操作なしで kintone 標準フィールドを Tabs content に設定することができます。
  • 指定したスペースに Tabs を追加する addTabsToDom 関数。
function createTabs(contents, isBorderVisible) {
const items = [
{
label: 'Sales Record',
value: 'salesRecordTab',
content: contents ? contents[0] : ''
},
{
label: 'Task Management',
value: 'taskManagementTab',
content: contents ? contents[1] : ''
},
{
label: 'Sales Order',
value: 'salesOrderTab',
content: contents ? contents[2] : ''
}
];
const tabs = new Kuc.Tabs({
value: 'salesRecordTab',
borderVisible: isBorderVisible,
items
});
return tabs;
}

function addTabsToDOM(tabs, space_id) {
const spaceElement = kintone.app.record.getSpaceElement(space_id);
spaceElement.appendChild(tabs);
}

カスタムコンポーネント用の Tabs 作成

Tabs コンポーネントを使って、タブによって異なるカスタムテーブル(kintone UI Component の ReadOnlyTable コンポーネントで作成)を表示します。
タブがクリックされると、Tabs コンポーネントは自動的に対応するカスタムテーブルを表示し、残りのテーブルを非表示にします。
createContent 関数を使って、コンポーネントの配列を受け取り、それらを padding を持つコンテナに追加します。
最後に、createTabs 関数を呼び出してタブを作成し、addTabsToDOM() 関数を呼び出して指定したスペースに Tabs コンポーネントを追加します。

function initCustomComponentTabs() {
const salesRecordTable = new Kuc.ReadOnlyTable({
label: 'Sales Record',
columns: [
{ title: 'Create Date', field: 'date' },
{ title: 'Reporter Account', field: 'account' },
{ title: 'Communication Content', field: 'communication' }
],
data: [
{
date: 'Feb 28, 2023',
account: 'Howard',
communication:
'Discussed the new product launch strategy with the client and received positive feedback.' +
'The client agreed to place an order for 500 units of the new product. They also requested a 10% discount on the total order value.'
}
]
});
const salesRecordContent = createContent([salesRecordTable]);

const taskManagementTable = new Kuc.ReadOnlyTable({
label: 'Task Management',
columns: [
{ title: 'Status', field: 'status' },
{ title: 'Task Executor', field: 'executor' },
{ title: 'Task Requirements', field: 'requirements' },
{ title: 'Result Reporting', field: 'reporting' }
],
data: [
{
status: 'In Progress',
executor: 'Mike',
requirements:
'Conduct market research on the latest trends and consumer behavior in the target market.',
reporting: 'Report due by March 15th.'
}
]
});
const taskManagementContent = createContent([taskManagementTable]);

const salesOrderTable = new Kuc.ReadOnlyTable({
label: 'Sales Order',
columns: [{ title: 'Order Number', field: 'order' }],
data: [{ order: '1' }]
});
const salesOrderContent = createContent([salesOrderTable]);

const tabs = createTabs(
[salesRecordContent, taskManagementContent, salesOrderContent],
true
);
addTabsToDOM(tabs, SPACE_FOR_CUSTOM_COMPONENTS);
}

function createContent(components) {
const content = document.createElement('div');
content.style.padding = '16px';
components.map(component => content.appendChild(component));
return content;
}

kintone 標準フィールド用の Tabs 作成

Tabs コンポーネントを使って、タブによって異なる kintone 標準フィールドを表示します。
タブがクリックされると、対応する kintone 標準フィールドを表示し、それ以外のフィールドを非表示にします。
setFieldsShown 関数では、kintone.app.record.setFieldShown() API を使ってフィールドの表示・非表示を行い、addTabsChangeEventListener 関数でクリックイベントを処理しフィールドを更新します。
また、createTabs 関数を使ってタブを作成しますが、今回は kintone 標準フィールドとの親和性を高めるため、isBorderVisible: false を設定します。
最後に、addTabsToDom 関数を呼び出して、指定されたスペースに Tabs コンポーネントを追加します。

function initNativeKintoneTabs() {
setFieldsShown(taskManagementTabFields, false);
setFieldsShown(salesOrderTabFields, false);
currentTabFields = salesRecordTabFields;
const tabs = createTabs(undefined, false);
addTabsChangeEventListener(tabs);
addTabsToDOM(tabs, SPACE_FOR_NATIVE_KINTONE);
}

function addTabsChangeEventListener(tabs) {
tabs.addEventListener('change', event => {
switch (event.detail.value) {
case 'salesRecordTab':
switchDisplayedFields(salesRecordTabFields);
break;
case 'taskManagementTab':
switchDisplayedFields(taskManagementTabFields);
break;
case 'salesOrderTab':
switchDisplayedFields(salesOrderTabFields);
break;
}
});
}

function switchDisplayedFields(displayedFields) {
setFieldsShown(displayedFields, true);
setFieldsShown(currentTabFields, false);
currentTabFields = displayedFields;
}

function setFieldsShown(fields, isShown) {
fields.forEach(field => {
kintone.app.record.setFieldShown(field, isShown);
});
}
備考

本記事は、 2023 年 5 月時点の kintone と Google Chrome で確認したものになります。
また、カスタマイズに使用した kintone UI Component のバージョンは、v1.11.0 です。