アプリの一覧表にサブタイトルを表示する

やりたいこと

アプリの一覧表に、一覧表の詳しい説明文を表示したい。
kintoneの一覧表は「一覧表名」だけでは表示内容が分かりにくい場合があります。一覧表の詳しい表示内容がサブタイトルで表示されてると便利かもしれないと思いカスタマイズしてみました。
具体的には、一覧表画面の黄色部分の領域にサブタイトルを表示します。
今回はkintoneアプリストアの「案件管理」アプリで試験してみます。

案件管理アプリの一覧表

デモ画面

下記デモ画面の様に、一覧表のヘッダー行の上に説明文を表示します。
一覧表の切替で一覧表の説明文も切替表示されるようにします。

一覧表サブタイトルデモ画面

一覧表サブタイトル表示のJavascriptコード

/* 一覧表にサブタイトルを表示する */
(() => {
    'use strict';

    // 初期設定
    // 一覧表名とメッセージの組み合わせを定義
    const viewMessages = [
        { viewName: '案件一覧',    message: '◆◆全ての案件一覧表です◆◆' },
        { viewName: '確度Aの案件', message: '◆◆確度がＡだけの案件一覧表です◆◆' },
        { viewName: 'kintone案件', message: '◆◆製品名が「kintone」だけの案件一覧表です◆◆' }
    ];
    const MessagesFontSize  = '24px';   // フォントサイズを指定
    const MessagesBackColor = 'yellow'; // 背景色の指定

    kintone.events.on('app.record.index.show', event => {
        const currentViewName = event.viewName; // 現在の一覧表名を取得
        const matchedView = viewMessages.find(view => view.viewName === currentViewName);

        // 対応するメッセージがあれば表示
        if (matchedView) {
            const space = kintone.app.getHeaderSpaceElement();
            space.innerHTML = ''; // 既存の要素をクリア
            const message = document.createElement('div');
            message.textContent = matchedView.message;
            message.style.fontSize = MessagesFontSize; 
            message.style.backgroundColor = MessagesBackColor;
            space.appendChild(message);
        }
        return event;
    });
})();

初期設定で、一覧表名とサブタイトルメッセージの組み合わせを定義して、サブタイトルメッセージのフォントサイズと背景色を指定します。
viewNameとmessageの設定だけで、どのアプリにも適用可能です。

処理内容は、一覧表示イベントで一覧表名を初期設定値と比較して一覧表名がマッチすれば、ヘッダースペース要素にメッセージを挿入しています。
一覧表名がマッチしなければ、サブタイトルメッセージは表示されません。
短いコードで一覧表の視認性が向上する（かもしれない）カスタマイズ例の紹介でした。