背景・実現したいこと
カテゴリーごとにフィールドの表示/非表示を切り替えたいと考えております。
カテゴリー変更時に発生するイベントはkitnone側で用意されていないようなので、
文字列フィールドの自動計算機能を用いて、選択されたカテゴリーを取得⇒文字列フィールド変更時イベントを発生させられないかと考えております。
確認したいこと
自動計算機能で、カテゴリーを取得することは可能でしょうか。
LA様
先日LA様の別件で「自動計算にカテゴリーを入れられたなら…」と書いたTOです．
カテゴリーごとに、フィールドの表示/非表示を制御したい
あれからちょっと試してみましたが，カテゴリーの値は自動計算や計算フィールドには入れられないようです．
適当なことを書いてしまったお詫び…でもないのですが，
同じスレッドでrex0220様が話題にしていたMutationObserverを利用した例を紹介します．
MutationObserver ※ググるといっぱいでてきます
developer networkの過去事例(グループフィールドの開閉を検出)
kintone.events.on(
['app.record.edit.show'], function(event) {
const ele = document.querySelectorAll('.input-category-cybozu');
//MutationObserver（インスタンス）の作成
var mo = new MutationObserver(function(moRecords) {
moRecords.forEach((rec) => {
if (rec.target.className.indexOf('tree-node-select-cybozu') != -1) {
//処理
}
});
});
//監視する対象の指定
var config = {
attributes: true,//「属性」の変化
attributeFilter: ['class'],
subtree: true,//孫以降のノードの変化も検出
};
//監視の開始
mo.observe(ele[0], config);
});
カテゴリーはHTML要素のclass：input-category-cybozuで取得できて，選択されているカテゴリーにはclass：tree-node-select-cybozuが追加されるので，その有無を複数のカテゴリーをループして検出しています．
このコードはカテゴリーをクリックしたときに「チェックの付いているカテゴリーをすべて検出する」ところまでです．
検出したあとの処理は適宜追加ください．
また，カテゴリーの枝分かれの仕方によっては，moRecordsの中身が変わる可能性があるので，
検証しつつ実装してください．
rex0220様が仰っていたように，kintoneのHTML要素を利用しているので，kintoneのアップデートによってclass名が変わるとうごかなくなる場合があります．その点留意ください．
TO様
ご教示いただきありがとうございます。
こちら理解不足で申し訳ないのですが、「MutationObserver（インスタンス）の作成」内の「moRecords」と「rec」には何が入っているのでしょうか。
変数宣言や代入の式が見当たらず、迷っている状態です。
LA様
moRecordsの中にはいっぱいいろいろ入っています．
console.logでみていただくのが早いかと思いますが，
（たくさんあるので一つ一つ説明しきれない）
moRecordsは提示の例ではカテゴリーのリストが要素になった配列になっています．
提示の例では子要素(カテゴリーの各リスト)及び属性の変化を検出しているので，
もしカテゴリーのリストが3つあるなら，
リストそれぞれ+属性の変化があったリストの4つの要素が配列に格納されます．
配列の各要素（提示の例でいうとrec）ではtargetの中がいわゆるDOMで要素を取得したような情報がはいっていて，
（ちょっとニュアンスが違うかもしれませんが）
提示の例ではtargetのclassNameの中に’tree-node-select-cybozu’があるかを判定しています．
これがあるということはそのカテゴリーが選択されていることになります．
元々の要求は「選択されたカテゴリーに対して表示/非表示を設定したい」とのことでしたので，
ここまで判定できれば，あとはフィールド設定なのでmoRecordの中身はあまり関係なくなると考えました．
ただ，複数選択されている場合など，moRecordを見てもらわないとわからない部分もあったので，
「検証しつつ実装してください」とお知らせした次第です．
参考になれば幸いです．
TO様
consol.logで確認することを失念しておりました…。
諸々の確認と情報を基に、一通り理解はできたかな…と思います。
また、いただいたコードをベースに作成したところ、無事想定通りの挙動を行うことが出来ました。
大変助かりました。ご教示いただきありがとうございました。
横から失礼します。
ここのスレッドを参考に下記の処理をおこなったのですが、
複数カテゴリがある場合、最後に選択したものだけが文字列に追加されてしまい、最初に選択されているものが消えてしまいます。
処理
let recordData = kintone.app.record.get(), record = recordData.record;
record[‘setcategory’].value =rec.target.innerText;
kintone.app.record.set(recordData);
どこを修正すれば良いでしょうか？
下記のコードで出来るようになりました。
ただし、登録した「カテゴリ－」を変更し、フィールド「」setcategoryに反映する場合は、一度、保存した後に変更というオペレーションになります。
kintone.events.on([‘app.record.create.show’,‘app.record.edit.show’],function(event){
const ele = document.querySelectorAll(‘.input-category-cybozu’);
// Initialize an empty array to store all selected categories
let allCategories = ;
//MutationObserver（インスタンス）の作成
var mo = new MutationObserver(function(moRecords) {
moRecords.forEach((rec) => {
if (rec.target.className.indexOf(‘tree-node-select-cybozu’) != -1) {
//処理
let categories = rec.target.innerText.split(‘\n’);
// Add the newly selected categories to the allCategories array
categories.forEach(category => {
if (!allCategories.includes(category)) {
allCategories.push(category);
}
});
} else if (rec.target.className.indexOf('tree-node-deselect-cybozu') != -1) {
//処理
let categories = rec.target.innerText.split('\n');
// Remove the deselected categories from the allCategories array
allCategories = allCategories.filter(category => !categories.includes(category));
}
let recordData = kintone.app.record.get(), record = recordData.record;
record['setcategory'].value = allCategories.join(',');
kintone.app.record.set(recordData);
});
});
//監視する対象の指定
var config = {
attributes: true,//「属性」の変化
attributeFilter: [‘class’],
subtree: true,//孫以降のノードの変化も検出
};
//監視の開始
mo.observe(ele[0], config);
return event;
});
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。