In-office day list customization
概要
今回は FieldGroup と Tooltip コンポーネントの活用とカスタマイズ方法について、In-Office Day List(出社日リスト)を題材に説明します。
このカスタマイズでは、FieldGroup 内に配置した Table コンポーネントでチームメンバーの出社日を確認できるリストを作成します。
以下のシナリオを想定しています。
- FieldGroup と Tooltip の基本的な使い方
- FieldGroup content に Table コンポーネントを追加する
- 2種類の Tooltip を利用する
使用するコンポーネント
事前準備
以下のフィールドを含むアプリを作成します。
- スペースフィールド(要素 ID:space)
JavaScript/CSS カスタマイズ
kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。
ファイルのアップロード方法などは、 Quick Start をご覧ください。
FieldGroup と Tooltip の基 本的な使い方
FieldGroup 内で Tooltip を利用する
"KUC team" というラベルの FieldGroup を作成し、Text コンポーネントを追加します。
const fieldGroup = new Kuc.FieldGroup({
label: "KUC team",
content: new Kuc.Text({ text: "This is a FieldGroup" }),
});
FieldGroup に "Office day info" と表示する Tooltip を追加します。
const tooltip = new Kuc.Tooltip({
title: "Office day info",
content: fieldGroup,
});