kintone UI Componentで要素にクラスやIDの追加

kintone カスタマイズ
1

kintone UI componentで配置したボタンやドロップダウンなど
要素の位置などを修正したいのですが、要素にクラスやIDを
追加することはできるのでしょうか。

要素毎に細かい設定をしたい場合はどのように対応すればいいでしょうか。

2

自己レスです。

renderした後に、’kuc-dropdown-container’などのclass名をgetElementsByClassNameし、
取得した配列順に適宜idを振ることで対応しました。
同じclass名の要素を追加すると取得する配列数と順序も変わるので、都度idを振りなおす修正が発生してしまいますが。

const ButtonA= new kintoneUIComponent.Button({text: 'ボタンＡ'});
kintone.app.getHeaderMenuSpaceElement().appendChild(ButtonA.render());
const ButtonB= new kintoneUIComponent.Button({text: 'ボタンＢ'});
kintone.app.getHeaderMenuSpaceElement().appendChild(ButtonB.render());
const ButtonC= new kintoneUIComponent.Button({text: 'ボタンＣ'});
kintone.app.getHeaderMenuSpaceElement().appendChild(ButtonC.render()); 

const tmp = document.getElementsByClassName('kuc-btn');
 tmp[0].setAttribute('id', 'btn-a');
 tmp[1].setAttribute('id', 'btn-b');  
 tmp[2].setAttribute('id', 'btn-c');

 

3

遅レスですいません。

element という自身のエレメントを示すメンバ変数がありました。（Button のみかもしれませんが・・・）

↓こんな感じで出来そうです。

const ButtonA= new kintoneUIComponent.Button({text: 'ボタンＡ'});ButtonA.element.id = "ButtonA" // ←追加kintone.app.getHeaderMenuSpaceElement().appendChild(ButtonA.render());