新規投稿

詳細画面でチェックボックスを表示する

松崎豪

2019年02月18日 11:37

チェックボックスのパーツを使うと、

詳細画面でプレーンテキストのみが表示されるかと思います。

これを詳細画面でも、編集画面の時のようにチェックボックスが表示された状態のままにしたいです。

ご教示のほどよろしくお願いいたします。

5件のコメント

江田篤史 2019年02月19日 03:11

松崎豪様

お世話になっております．
cstapの江田と申します．

kintone UI Componentを使うのが手軽だと思います。
GitHubから、「kintone-ui-component.min.js」と「kintone-ui-component.min.css」をダウンロードして読み込んでください。
その後下記JavaScriptコードを読み込んでください。

(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){
            if(a.index < b.index) return -1;
            else return 1;
          })
        };
      }).forEach(function(property){
        var originElement = kintone.app.record.getFieldElement(property.code);
        originElement.parentNode.insertBefore((new kintoneUIComponent.CheckBox({
          name: property.code,
          items: property.options.map(function(option){
            return {
              value: option.label,
              label: option.label
            }
          }),
          value: event.record[property.code].value,
          isDisabled: true
        }).render()), originElement);
        originElement.parentNode.removeChild(originElement);
      });
    });
  });
})();

※コード修正しました。

江田篤史により編集されました 2019年02月19日 05:01

小野間明子 2019年02月19日 04:46

松崎豪さま、江田さま

小野間と申します。横からすみません。

チェックボックスで実現するには、8行目の

        return response.properties[fieldCode].type === 'RADIO_BUTTON';

は

 return response.properties[fieldCode].type === 'CHECK_BOX';

に変更が必要なのと21行目の

        originElement.parentNode.insertBefore((new kintoneUIComponent.RadioButton({

も

 originElement.parentNode.insertBefore((new kintoneUIComponent.CheckBox({

に変更が必要です。

それで、便乗して質問して申し訳ないのですが、kintone UI Componentを使う場合、チェックボックスの各項目を横並びに表示させるにはどのようにしたら良いのでしょうか。

江田篤史 2019年02月19日 04:59

小野間明子様

お世話になっております．

訂正ありがとうございます。

横並びにするオプションはないようなので、CSSで変更する必要があるかと思います。
「kintone-ui-component.min.css」のあとに下記を読み込ませてください。

.kuc-input-checkbox-item{
  display: inline-block;
}
.kuc-input-checkbox-item input[type=checkbox][disabled]+label{
  color: #333;
  cursor: text;
}
.kuc-input-checkbox-item input[type=checkbox][disabled]:checked+label:after{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwMkNFQUUzRkZCMzExRTNBQkE4Q0IwNUYxMEQ4OTA4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwMkNFQUU0RkZCMzExRTNBQkE4Q0IwNUYxMEQ4OTA4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTAyQ0VBRTFGRkIzMTFFM0FCQThDQjA1RjEwRDg5MDgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTAyQ0VBRTJGRkIzMTFFM0FCQThDQjA1RjEwRDg5MDgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5TrKxVAAABt0lEQVR42rzVSy8DURQH8P+0HaopoV7TkLAoCRYshNjYaTxiZcmexEZsxBeQiEWrC9/AzkpFCCsSQhALEY8uEH3QqXjUtNPpTN07EQumpvpwlneSX/5n5pw7zJFfCLr3w9bTkAgDg6xLSQEdXDGmeqqjzNjKreB7kkqqLEbkWrwgw2FjYyaSUG4sZ+EdbcwZHV6+AfUMubSsVdQzoACVNXr3IiEhp/KHnj/GMeH1w3PA402Ufzw3/RW8joiY3gzhPBzHcUBAS5UZQ82l+knfJQVnJM33uiLg5FoAl7wIOoC9DVbUl7H67UeEJOZ2whhf9WPvTvg6v+A/QQLLZNI76yxwD9jRzpn10d1bAUuHEdy/SpjZCuEkEFPBqfWgmpRuThcBXQSs00ip+U7baswYaS3Dli+Kh2gSs9shWFgDfE8JFeymCQftmm2nTdpUWYQFpx1ORyliSUVNTJMmZEVNuKgDpv36FSVGzDs5gGzHxvWbekZBz2D6ljMaKRuF+zi8JxQ8x+WMQd05pbCr3w6RbE6mYEbDX2s1/d/u/4oqqfyC1DORX4CR3PzqBZuPm596TCH+UR8CDAC9yr4WxILwPAAAAABJRU5ErkJggg==);
}

江田篤史により編集されました 2019年02月19日 05:20

小野間明子 2019年02月19日 05:53

江田様

お世話になっております。

設定用のCSSについて、ご提示いただきありがとうございました！

やっぱり、kintone UI Componentのオプションには項目の並び順指定はないですよね…。CSSでの設定方法についてはあまり良くわかっていなかったので、大変助かりました。CSSの記載方法についても勉強していきたいと思います。

松崎豪 2019年02月19日 09:19

江田篤史様、小野間明子様

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

まさに、意図していた通りの表示をさせることができました！ありがとうございます！

kintone UI Componentについての別記事は見つけたのですが、それを既存のアプリケーションのチェックボックスに適用することができず、悩んでおりました。。

また並び順の指定については質問内容に記載することさえも失念しておりましたので、ご指摘していただきありがとうございました。

大変助かりました！ありがとうございます。。

サインインしてコメントを残してください。