kintone-ui-componentのCheckboxの表示幅が編集画面のkintone標準Checkboxと不一致

kintone カスタマイズ
1

下記投稿を参考に、詳細画面でkintone-ui-componentのCheckboxを使って、チェックされていない項目もされるようなプラグインを作成した処、kintone標準Checkboxの表示幅より広く表示され、画面レイアウトが崩れました。

さらに、kintone-ui-componentのバージョンが、下記記事の投稿時より新しくなって、cssファイルも提供されなくなったり、classNameプロパティが追加されるなど、仕様変更があったようですが、kintone-ui-componentのCheckboxの横幅をkintone標準CheckBoxの横幅に合わせるような方法が見当たりません。

つきましては、kintone-ui-componentのCheckboxを含む領域の幅を、kintone標準CheckBoxを含む領域の表示幅に合わせるよ方法を教示願います。

★詳細画面でチェックボックスを表示する – cybozu developer network

なお、参考にしたコードは最新のkintone環境とは不整合が生じ、四角い領域が表示されただけで誤動作していたので、kintone-ui-componentの最新版を使って動作するようにしたプラグインのコードは 下記に示します。


(function() {

  "use strict";
  

  kintone.events.on('app.record.detail.show', function(event){

    kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', {

      app: kintone.app.getId()

    }).then(function(response){

      Object.keys(response.properties).filter(function(fieldCode){

        return response.properties[fieldCode].type === 'CHECK\_BOX';

      }).map(function(fieldCode){

        return {

          code: fieldCode,

          options: Object.keys(response.properties[fieldCode].options).map(function(option){

            return response.properties[fieldCode].options[option];

          }).sort(function(a, b){

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(a.index&nbsp;\<&nbsp;b.index)&nbsp;return&nbsp;-1;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;return&nbsp;1;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).forEach(function(property){

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;originElement&nbsp;=&nbsp;kintone.app.record.getFieldElement(property.code);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;checkboxEL1&nbsp;=&nbsp;(new&nbsp;Kuc.Checkbox({

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;label:&nbsp;property.code,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;requiredIcon:&nbsp;true,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items:&nbsp;property.options.map(function(option){

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;option.label,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:&nbsp;option.label

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;event.record[property.code].value,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itemLayout:&nbsp;'horizontal',

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;error:&nbsp;'Error&nbsp;occurred!',

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;className:&nbsp;'input-checkbox-cybozu',

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;id:&nbsp;'options-id',

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:&nbsp;true,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;disabled:&nbsp;true,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;borderVisible:&nbsp;false

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}))

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;originElement.innerHTML&nbsp;=&nbsp;checkboxEL1.getHTML();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;originElement.parentNode.insertBefore(checkboxEL1,originElement);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;originElement.parentNode.removeChild(originElement);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;});

})();

 

画面表示結果は 下図に示します。

 

kintone-ui-componentのcheckbonを含む領域のDOMは、下図に示します。

このDOMを観ると、「 className: ‘input-checkbox-cybozu’,」のパラメタ指定は反映されていないようです。

2

小瀬さん

こんにちは。

 

class名に「input-checkbox-cybozu」を指定すると、

kintone標準のチェックボックスのcssが変に適用されてしまうので、

異なるclass名に変えるか、必要なければ指定しない方が良いと思います。

 

加えて、cssで横幅を定義しました。

※kintoneUIComponentはv1.1.1、GoogleChromeで検証済み。

 

checkboxの★コメント部分だけ修正しました。

var checkboxEL1 = (new Kuc.Checkbox({
 // label: property.code,
 // requiredIcon: true,
 items: property.options.map(function(option) {
  return {
   value: option.label,
   label: option.label
  }
 }),
 value: event.record[property.code].value,
 itemLayout: 'horizontal',
 // error: 'Error occurred!',
 className: 'options-class',	// ★class名は適当（input-checkbox-cybozu以外）
 // id: 'options-id',
 visible: true,
 disabled: true,
 borderVisible: true	// ★枠線を表示する場合はtrue
}))

cssは以下

kuc-checkbox {
 min-width: auto !important;
 width: auto !important;
}
3

応答ありがとうございます。

className指定を無くし、kuc-checkboxのCSSを加えたら、表示幅をkintone標準のcheckbonに合わせることができ、冒頭の問題は解決できました。

ただ、kuc-checkboxの背景色が、詳細画面の他の項目より 薄い色のような気がします。

また、ui-conponentは、kintone標準のUI部品の再現性に拘って設計されているならば、こうした設定はui-conponentに組み込まれれるよう、改善要望ができても良いかと思います。

でも、kintoneのテクニカルサポート窓口からの応答は、下記のような内容でした。

これは、ui-conponentへのバグ報告や仕様改善要望の受け入れ窓口は無いという事なのでしょうか？

「

恐れ入ります。弊社テクニカルサポートでは、API や JavaScript、
プラグインや連携サービスなど、カスタマイズに関する内容につきましては、
サポート対象外となります。

そのため、弊社テクニカルサポート窓口から、kintone UI Component に関する
案内を差し上げることが難しい状況です。

ご希望に沿えず、誠に申し訳ございません。

お手数ではございますが、「cybozu developer network」のコミュニティにある
「kintone UI Component」の記事へ、直接お問い合わせいただけますでしょうか。
」

4

@小瀬さん

横から失礼します。
devnetで回答を書いている人たちは多くがサイボウズの中の人ではないと思いますので、
サポートのことについて質問されても分からないことがおおいと思います（＞＜）

しかし、
kintone UI Component については
↓こちらの公式ページの下の方に
https://kintone-ui-component.netlify.app/ja/

「その他 GitHub Issue にてご質問や機能リクエストを受け付けております。」

とありまして、
私もそちらから要望を出したことがあり、最近要望が実装されました。
ぜひそちらから問い合わせて見られるといいかと思います。

5

応答ありがとうございます。

提示いただいたURLの S** upport Policy**は既に見ていて、その主文のテクニカルサポータに「kintoneのUIの再現性（≒開発意図）にソグワナイ」バグ報告風な文面で問いあ合わせた結果が、前述の応答だった次第です。

何はともあれ、 S** upport Policy**の末に記載された GitHub Issue への投稿が活きていて、「糸電話の細い糸が繋がっている」と判ったのは、収穫です。

「

Support Policy

kintone UI Component の仕様については、テクニカルサポートへお問い合わせいただけます。
サポートへのお問い合わせ方法をご確認の上、お問合せください。

その他 GitHub Issue にてご質問や機能リクエストを受け付けております

」

6

小瀬さん

私もサイボウズの人間ではないので、サポート面は分かりかねますが、色の変更もcssで可能です。

kintoneUIComponentのチェックボックスは、編集画面での利用を主に想定して作られていると思いますので、

編集画面のデザインに合わせたスタイルになっているのだと思います（私の個人的な見解です）。

kuc-checkbox {
 min-width: auto !important;
 width: auto !important;
}

.kuc-checkbox __group__ select-menu[borderVisible] {
 border-color: #d8d8d8 !important;
 background-color: #eee !important;
}

 

juridonさん

サポートの件、フォローありがとうございます。