カスタマイズ kintone 初心者向け: スペース内のアプリの並び順をコントロールする
チュンこんにちは！ 私の名前はチュンです。
株式会社メディアフュージョンでkintone関連製品の開発を担当しているベトナム出身のエンジニアです。
kintoneに興味のある方、kintoneを使っている方に私の蓄積した経験を共有したいと思います。
現在、kintoneのアプリは、アプリの並び順は、アプリ名または最終利用日時でソートされます。
アプリの数が増えるにつれて、または業務が共通するアプリが隣接しなかったり、探し出すのが難しかったりします。
この記事では、JavaScriptを使用してこのアプリの並び順の課題を解決する方法を説明します。
アプリの並び順の課題
kintoneにはスペースと呼ぶ、アプリをグループ化する機能があります。下記の例では、「プロジェクト管理」というスペースを設定し、このスペースに「プロジェクトリスト」、「プロジェクト人事管理」、「プロジェクト資料」、「任務と進度」、「問題と解決」、「財務管理」という6つのアプリを配置しています。
kintoneでこれらのアプリを作成した際、そのままでは、希望する並び順にすることが出来ませんでした。
そこで、JavaScriptを使ってアプリの並び替えを行います。
以下のように、スペースに配置したアプリをJavaScriptで並び替えします。
スペースとサンプルアプリケーションの準備
スペースの作成は、プロジェクト管理で行います。
スペース内には、「プロジェクトリスト」、「プロジェクト人事管理」、「プロジェクト資料」、「任務と進度」、「問題と解決」、「財務管理」といったアプリケーションを作成します。
JavaScriptプログラム
※このJavaScriptプログラムは、portalに保存します。そのため、kintoneのシステム管理権限が必要です。
下記のリンクで、portalへのJavaScriptプログラムのアップロード方法をご確認ください。
参照; JavaScriptやCSSを使用したKintone全体のカスタマイズ
プログラムの処理流れ
1. スペースのspaceIdと、並び替えたい順番のappIdのリストを取得します。
2. スペースにアクセスした際、現在のspaceIdが、取得したspaceIdと一致するか確認します。
一致する場合、取得したappIdのリストに従って、アプリを並び替えます。
一致しない場合は、何もしません。
(() => {
// 全てのappIdを確認した後、希望の順序でappIdのリストを格納する配列APP_IDSを初期化する。
let APP_IDS = [
1, 5, 4, 2, 6, 3
];
// spaceIdを確認した後、変更したいspaceのID値を格納する変数SPACE_IDを初期化します。
let SPACE_ID = 1;
// 表示されたスペースをクリックしてプログラムを開始します
kintone.events.on('space.portal.show', async function (event) {
// 現在のspaceのIDの値を格納する変数spaceIdを初期化する
let spaceId = event.spaceId;
// もし 現在のスペースがアプリの並び替えを行いたいスペースであるなら、アプリの並び替えを実行してください。
if (spaceId == SPACE_ID) {
// requestAnimationFrame 関数内でコードを書き、すべてのHTML要素が表示されていることを保証する。
requestAnimationFrame(() => {
// アプリケーションのHTML要素を管理するための変数として、appElementsを初期化する。
let appElements = [];
// APP_IDS配列の各要素を順に処理し、対応するappIdのHTML要素を取得する。
for (const appId of APP_IDS) {
// 現在のappIdに対応するHTML要素を格納する変数appElementを初期化します。
let appElement = document.querySelector(`.gaia-argoui-appscrollinglist-item-outer-${appId}`);
// もし appElement が 存在するなら、appElements 配列にその要素を追加します。
if (appElement) appElements.push(appElement);
}
// HTML要素に表示されるアプリのリストを空文字列に設定して、アプリの元の順序を削除します。
document.querySelector('ul.gaia-argoui-appscrollinglist-list').innerHTML = "";
// appElements の各要素を繰り返し処理し、各要素の情報をHTML要素に表示されるアプリのリストに追加します。
for (const appElement of appElements) {
document.querySelector('ul.gaia-argoui-appscrollinglist-list').appendChild(appElement);
}
});
}
return event;
})
})()
参照
kintone の spaceId を確認する方法
kintone の appId を確認する方法
JavaScriptのrequestAnimationFrame関数について
本記事を最後まで読んでいただきありがとうございます。
次の記事を楽しみにお待ちください !
