はじめまして。
kintoneを始めたばかりで分からないことばかりですがご教授願います。
ユーザー選択フィールドのユーザーが長すぎて一覧表示時スクロールをかなりしないといけないので折りたたむ事は出来ますでしょうか。
イメージは表示された時は折りたたまれていて1のみが表示されていてクリックをしたら長く表示出来れば理想です。
何卒よろしくお願い致します。
こんにちは！
可能だとは思いますが、DOM操作となりますのであまりオススメはできないカスタマイズではあります。
（kintoneのアップデートや仕様変更によって動かなくなる可能性があります）
検索ワードとしては、
「js 折りたたみ」「CSS 折りたたみ」などが良いと思います。
要素の指定方法が分からない場合は
「js セレクタ」とか「css セレクタ」なども検索されてみてください。
juridon様
こんにちは。
色々と調べてみたのですが該当するものが見つけれませんでした。
具体的に記載されているページを教えていただ無いでしょうか。
何卒よろしくお願い致します。
折りたたみ方についてはこのあたりが参考になるかなと思います。
https://qiita.com/Kahiro-M/items/6b4472e5747a2127f5e0
https://shanabrian.com/web/javascript/fold01.php
https://kakurasan.blogspot.com/2015/04/javascript-expand-collapse.html
また、これらをkintoneでどうやるかという具体的に書かれたページはないと思うので、
DOM操作の方法を検索するといいと思います。
kintone DOM操作 のキーワードで検索して上から順に見ていくといいかと思います。
https://www.google.com/search?q=kintone+dom%E6%93%8D%E4%BD%9C
※実際に試したわけではないので、できるかどうかは分からないです。
juridon様
ご返信ありがとうございます。
HTMLの場合は理解できるのですがkintoneに当てはめた場合イメージがわきません。
そもそも不可能なのでしょうかね？
こんにちは！
不可能ではないですが、難易度は高めだと思います。
↓こちらで要素を取得できそう（ユーザー選択）
https://developer.cybozu.io/hc/ja/articles/201942014#step3
それからJavaScriptでDOM操作するとよいです。
juridon様
ご連絡ありがとうございます。
要素のID探ってCSS変更するしか無いでしょうかね？
HTMLなら簡単に出来るのですがkintoneは中々融通が利かないですね。
kazumaさんが想定しているやり方は違うと思いますが、
スペースフィールド（要素IDは"sp"）にボタンを設置してボタンで開閉～というやり方だったら
↓ボタンを押したときの挙動をこちらのJavaScriptとCSSをそのまま使って、gif画像のようにすることはできます。
https://qiita.com/Kahiro-M/items/6b4472e5747a2127f5e0
JavaScript
// 詳細
kintone.events.on([“app.record.detail.show”], (event) => {
const usersel = kintone.app.record.getFieldElement(“ユーザー選択”);
usersel.classList.add(“openHere”);
// スペースフィールドにボタン設置
const sp = kintone.app.record.getSpaceElement(“sp”);
const btn_fields = document.createElement(“button”);
btn_fields.textContent = “おりたたみ”;
sp.appendChild(btn_fields);
btn_fields.addEventListener(“click”, () => {
var obj = document.getElementsByClassName(“openHere”);
for (var i = 0; i < obj.length; i++) {
//非表示ならインライン要素に変更。表示状態なら非表示に変更。
if (obj[i].style.display == “inline-block”) {
obj[i].style.display = “none”;
} else {
obj[i].style.display = “inline-block”;
}
}
});
return event;
});
juridon様
ご連絡ありがとうございます。
ちょっと上記とは違いますね。
一覧表示の時ユーザを折りたたみたいんですよ。
一覧表示でも一覧表示後のイベントにして要素の指定を工夫すれば折りたたみ自体はできます。
あとはどこをクリックするか？や、１番上のユーザだけを残す・・・というところだと思いますが
これ以上書いてしまうと「答え」になってしまって、コミュニティの趣旨上良くないですので
大変申し訳ないですが、ぜひ工夫されてみてください（＞＜）！
// 一覧
kintone.events.on([“app.record.index.show”], (event) => {
// 一覧でユーザー選択フィールドの要素取得
let usersel = kintone.app.getFieldElements(“ユーザー選択”);
usersel.forEach((v) => {
//ユーザー選択フィールドそれぞれにクラスを追加
v.firstElementChild.classList.add(“openHere”);
});
// メニューにボタン設置
const sp = kintone.app.getHeaderMenuSpaceElement();
～以下同じ～