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

kintone カスタマイズ
1

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

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

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

 

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

2

松崎豪様

お世話になっております．
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){returnresponse.properties[fieldCode].type==='CHECK\_BOX';}).map(function(fieldCode){return{code:fieldCode,options:Object.keys(response.properties[fieldCode].options).map(function(option){returnresponse.properties[fieldCode].options[option];}).sort(function(a,b){if(a.index\<b.index)return-1;elsereturn1;})};}).forEach(function(property){varoriginElement=kintone.app.record.getFieldElement(property.code);originElement.parentNode.insertBefore((newkintoneUIComponent.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);});});});})();

※コード修正しました。

3

松崎豪さま、江田さま

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

チェックボックスで実現するには、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を使う場合、チェックボックスの各項目を横並びに表示させるにはどのようにしたら良いのでしょうか。

4

小野間明子様

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

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

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

.kuc-input-checkbox-item{display:inline-block;}.kuc-input-checkbox-iteminput[type=checkbox][disabled]+label{color:#333;cursor:text;}.kuc-input-checkbox-iteminput[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==);}
5

江田様

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

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

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

6

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

 

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

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

 

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

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

 

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