背景・実現したいこと
お世話になります。チュートリアルを経て、kintoneの社内アプリ向けにカスタマイズをしていきたいと思っております。
実現させたいこと：
・詳細画面表示時及びレコード編集時に、一部の範囲をタブ表示させ、
表示内容をタブにより切り替える。
・レコード新規作成時及びレコード編集時に、タブ表示させたフィールド内の
チェックボックスおよびラジオボタンにて、選択結果により所定のフィールド
の表示・非表示が切り替えられるようにする。
下図合わせてご参照下さい。後述のコードの「aaButton」クリック時の表示内容です。
試したこと：
タブ表示についてはこちらの記事（外部サイト）を、フィールド表示・非表示制御についてはこちらを参考にしました。
コードの組み合わせ方が分からず、タブ表示についてのソースコードをベースにフィールド表示・非表示制御についてのコードを入れ込みましたが、入れる場所が悪いのか、タブ表示もフィールドの表示制御も機能しなくなってしまいます。
（上の画面はタブ表示のコードのみ適用しています。）
エラー情報 （開発者ツールのコンソール）
そもそもエラーが出る前でつまずいているのか、コードと関係なさそうな部分のメッセージのみとなっているように見受けられます。（下図ご参照下さい。全画面にしたら小さくなってしまいました。）
利用したソースコード
うまく貼り付けられず、左の余白が無効になってしまっております。見辛く申し訳ありません。
(function() {
'use strict';
//１．イベントの定義
//レコードの追加、編集、詳細画面で適用する
var events = ['app.record.create.show', //レコード作成画面表示時
'app.record.detail.show', //レコード詳細画面表示時
'app.record.app.record.create.show', //レコード追加画面表示時
'app.record.create.change.請求書送付期日有無', //レコード追加画面表示で[フィールドコード]変更時
'app.record.create.change.点検前に送付',
'app.record.create.change.請求書指定事項',
'app.record.create.change.請求書送付先',
'app.record.create.change.その他必要書類',
'app.record.create.change.その他書類送付タイミング',
'app.record.create.change.見積書_ビル管理担当者と同じ',
'app.record.create.change.日程調整_ビル管理担当者と同じ',
'app.record.create.change.日程_宛名なし',
'app.record.create.change.報告書_現地担当者と同じ',
'app.record.create.change.作業届_宛名なし',
'app.record.edit.show', //レコード編集画面表示時
'app.record.edit.change.請求書送付期日有無', //レコード編集画面表示で[フィールドコード]変更時
'app.record.edit.change.点検前に送付',
'app.record.edit.change.請求書指定事項',
'app.record.edit.change.請求書送付先',
'app.record.edit.change.その他必要書類',
'app.record.edit.change.その他書類送付タイミング',
'app.record.edit.change.見積書_ビル管理担当者と同じ',
'app.record.edit.change.日程調整_ビル管理担当者と同じ',
'app.record.edit.change.日程_宛名なし',
'app.record.edit.change.報告書_現地担当者と同じ',
'app.record.edit.change.作業届_宛名なし'];
kintone.events.on(events, function(event) {
var record = event.record;
//２．タブボタン設置
var aaButton = document.createElement('button'); //ボタン生成
aaButton.id = 'aaButton'; //ボタンID
aaButton.style.heirgt = '50px'; //ボタン成形：高さ
aaButton.style.width = '150px'; //ボタン成形：横幅
aaButton.style.borderRadius = '15px 15px 0px 0px'; //ボタン成形：上部角丸
aaButton.innerHTML = 'ビル管理＆書類'; //ボタン表示名
var bbButton = document.createElement('button');
bbButton.id = 'bbButton';
bbButton.style.height = '50px';
bbButton.style.width = '150px';
bbButton.style.borderRadius = '15px 15px 0px 0px';
bbButton.innerHTML = '現地担当＆日程';
var ccButton = document.createElement('button');
ccButton.id = 'ccButton';
ccButton.style.height = '50px';
ccButton.style.width = '150px';
ccButton.style.borderRadius = '15px 15px 0px 0px';
ccButton.innerHTML = '見積送付先';
var ddButton = document.createElement('button');
ddButton.id = 'ddButton';
ddButton.style.height = '50px';
ddButton.style.width = '150px';
ddButton.style.borderRadius = '15px 15px 0px 0px';
ddButton.innerHTML = '日程調整';
var eeButton = document.createElement('button');
eeButton.id = 'eeButton';
eeButton.style.height = '50px';
eeButton.style.width = '150px';
eeButton.style.borderRadius = '15px 15px 0px 0px';
eeButton.innerHTML = '報告書';
var ffButton = document.createElement('button');
ffButton.id = 'ffButton';
ffButton.style.height = '50px';
ffButton.style.width = '150px';
ffButton.style.borderRadius = '15px 15px 0px 0px';
ffButton.innerHTML = '作業届';
var ggButton = document.createElement('button');
ggButton.id = 'ggButton';
ggButton.style.height = '50px';
ggButton.style.width = '100px';
ggButton.style.borderRadius = '15px 15px 0px 0px';
ggButton.innerHTML = ' 全表示 ';
var devSpace = document.createElement('dev'); //ボタン配置調整スペース
devSpace.innerHTML = ' '; //表示名（空白）を入れて左に空間を作る
//３．タブボタンをスペースに設定
function tagSet() {
//既に表示されていたら処理しない
if (document.getElementById('button') !== null) {
return;
}
//タブボタン設置
kintone.app.record.getSpaceElement('TAG_MENU').style.borderBottom = 'none';
kintone.app.record.getSpaceElement('TAG_MENU').appendChild(devSpace);
kintone.app.record.getSpaceElement('TAG_MENU').appendChild(aaButton);
kintone.app.record.getSpaceElement('TAG_MENU').appendChild(bbButton);
kintone.app.record.getSpaceElement('TAG_MENU').appendChild(ccButton);
kintone.app.record.getSpaceElement('TAG_MENU').appendChild(ddButton);
kintone.app.record.getSpaceElement('TAG_MENU').appendChild(eeButton);
kintone.app.record.getSpaceElement('TAG_MENU').appendChild(ffButton);
kintone.app.record.getSpaceElement('TAG_MENU').appendChild(ggButton);
//初期表示
tagView(0);
//各タブボタン毎に、クリックされたときに呼ばれるファンクションを定義する
aaButton.onclic = function() {
tagView(0);
//ビル管理&書類タブ内のフィールド表示・非表示連動設定
//請求書送付期日で「◯日まで」選択の場合は日付フィールドを表示する
//（ラジオボタン）
if (record['請求書送付期日有無'].value === '◯日まで') {
kintone.app.record.setFieldShown('請求書期日', true);
}else {
//その他の場合は日付フィールドを表示しない
kintone.app.record.setFieldShown('請求書期日', false);
}
//請求書指定事項で請求書発行日指定にチェックある場合は日付フィールドを表示する
//（チェックボックス）
if (record['請求書指定事項'].value.indexOf('請求書発行日指定あり', 0) > -1) {
kintone.app.record.setFieldShown('請求書発行日', true);
}else {
//請求書発行日指定にチェックない場合は日付フィールドを表示しない
kintone.app.record.setFieldShown('請求書発行日', false);
}
//請求書送付先で「別途送付先」選択の場合は送付先フィールドを表示する
//（ラジオボタン）
if (record['請求書送付先'].value === '別途請求書送付先あり') {
kintone.app.record.setFieldShown('請求書送付先_別途の場合', true);
}else {
//請求書送付先でそれ以外選択の場合は送付先フィールドを表示しない
kintone.app.record.setFieldShown('請求書送付先_別途の場合', false);
}
//その他必要書類でその他にチェックある場合はその他フィールドを表示する
//（チェックボックス）
if (record['その他必要書類'].value.indexOf('その他', 0) > -1) {
kintone.app.record.setFieldShown('必要書類_その他', true);
}else {
//その他必要書類でその他にチェックない場合はその他フィールドを表示しない
kintone.app.record.setFieldShown('必要書類_その他', false);
}
//その他書類送付タイミングで「◯日まで」選択の場合は日付フィールドを表示する
//（ラジオボタン）
if (record['その他書類送付タイミング'].value === '◯日まで') {
kintone.app.record.setFieldShown('その他書類期日', true);
}else {
//請求書送付先でそれ以外選択の場合は送付先フィールドを表示しない
kintone.app.record.setFieldShown('その他書類期日', false);
}
return false; //処理が進まないように中断させる
}
bbButton.onclic = function() {
tagView(1);
//見積書送付先タブ内のフィールド表示・非表示連動設定
//見積書送付先で「ビル管理担当者と同じ」にチェックある場合は入力フィールドを表示しない
//（チェックボックス）
if (record['見積書_ビル管理担当者と同じ'].value.indexOf('ビル管理担当者と同じ') > -1) {
kintone.app.record.setFieldShown('氏名_見積', false);
kintone.app.record.setFieldShown('会社名_見積', false);
kintone.app.record.setFieldShown('郵便番号_見積', false);
kintone.app.record.setFieldShown('住所_見積', false);
kintone.app.record.setFieldShown('電話番号1_見積', false);
kintone.app.record.setFieldShown('電話番号2_見積', false);
kintone.app.record.setFieldShown('メールアドレス_見積', false);
}else {
//「ビル管理担当者と同じ」にチェックない場合は入力フィールドを表示する
kintone.app.record.setFieldShown('氏名_見積', true);
kintone.app.record.setFieldShown('会社名_見積', true);
kintone.app.record.setFieldShown('郵便番号_見積', true);
kintone.app.record.setFieldShown('住所_見積', true);
kintone.app.record.setFieldShown('電話番号1_見積', true);
kintone.app.record.setFieldShown('電話番号2_見積', true);
kintone.app.record.setFieldShown('メールアドレス_見積', true);
}
return false;
}
ccButton.onclic = function() {
tagView(2);
//日程調整タブ内のフィールド表示・非表示連動設定
//日程調整窓口で「ビル管理担当者と同じ」にチェックある場合は入力フィールドを表示しない
//（チェックボックス）
if (record['日程調整_現地担当者と同じ'].value.indexOf('ビル管理担当者と同じ', 0) > -1) {
kintone.app.record.setFieldShown('氏名_日程', false);
kintone.app.record.setFieldShown('日程_宛名なし', false);
kintone.app.record.setFieldShown('会社名_日程', false);
kintone.app.record.setFieldShown('電話番号1_日程', false);
kintone.app.record.setFieldShown('電話番号2_日程', false);
kintone.app.record.setFieldShown('メールアドレス_日程', false);
}else {
//「防災センター宛でOK」にチェックある場合は入力フィールドを表示しない
if (record['日程_宛名なし'].value.indexOf('「防災センター」宛でOK', 0) > -1) {
kintone.app.record.setFieldShown('氏名_日程', false);
kintone.app.record.setFieldShown('会社名_日程', false);
kintone.app.record.setFieldShown('電話番号1_日程', false);
kintone.app.record.setFieldShown('電話番号2_日程', false);
kintone.app.record.setFieldShown('メールアドレス_日程', false);
}else {
//「ビル管理担当者と同じ」にチェックない場合は入力フィールドを表示する
kintone.app.record.setFieldShown('氏名_見積', true);
kintone.app.record.setFieldShown('会社名_見積', true);
kintone.app.record.setFieldShown('郵便番号_見積', true);
kintone.app.record.setFieldShown('住所_見積', true);
kintone.app.record.setFieldShown('電話番号1_見積', true);
kintone.app.record.setFieldShown('電話番号2_見積', true);
kintone.app.record.setFieldShown('メールアドレス_見積', true);
}}
return false;
}
ddButton.onclic = function() {
tagView(3);
return false;
}
eeButton.onclic = function() {
tagView(4);
return false;
}
ffButton.onclic = function() {
tagView(5);
return false;
}
ggButton.onclic = function() {
tagView(8);
return false;
}
//４．タブボタンが押されたときの表示/非表示
function tagView(setInfo) {
//タブ初期スタイル
aaButton.style.background = '#eeeeee';
aaButton.style.border = '1px solid #c0c0c0';
aaButton.style.color = '#469bd9';
bbButton.style.background = '#eeeeee';
bbButton.style.border = '1px solid #c0c0c0';
bbButton.style.color = '#469bd9';
ccButton.style.background = '#eeeeee';
ccButton.style.border = '1px solid #c0c0c0';
ccButton.style.color = '#469bd9';
ddButton.style.background = '#eeeeee';
ddButton.style.border = '1px solid #c0c0c0';
ddButton.style.color = '#469bd9';
eeButton.style.background = '#eeeeee';
eeButton.style.border = '1px solid #c0c0c0';
eeButton.style.color = '#469bd9';
ffButton.style.background = '#eeeeee';
ffButton.style.border = '1px solid #c0c0c0';
ffButton.style.color = '#469bd9';
ggButton.style.background = '#eeeeee';
ggButton.style.border = '1px solid #c0c0c0';
ggButton.style.color = '#469bd9';
//タブ初期フィールド非表示
kintone.app.record.setFieldShown('AAA',false);
kintone.app.record.setFieldShown('BBB',false);
kintone.app.record.setFieldShown('CCC',false);
kintone.app.record.setFieldShown('DDD',false);
kintone.app.record.setFieldShown('EEE',false);
kintone.app.record.setFieldShown('FFF',false);
//タブごとの表示ルール（AAタブをクリックした時～GGタブをクリックした時の表示パターン）
switch (setInfo) {
//ビル管理＆書類タブ
case 0: aaButton.style.background = '#469bd9'; //クリックしたときのタブの背景色
aaButton.style.border = '1px solid #c0c0c0'; //クリックしたときのタブの枠線
aaButton.style.color = '#ffffff'; //クリックしたときのタブの文字色
kintone.app.record.setFieldShown('AAA',true); //クリックしたときの表示フィールド
break;
//現地担当＆日程タブ
case 1: bbButton.style.background = '#469bd9';
bbButton.style.border = '1px solid #c0c0c0';
bbButton.style.color = '#ffffff';
kintone.app.record.setFieldShown('BBB',true);
break;
//見積送付先タブ
case 2: ccButton.style.background = '#469bd9';
ccButton.style.border = '1px solid #c0c0c0';
ccButton.style.color = '#ffffff';
kintone.app.record.setFieldShown('CCC',true);
break;
//日程調整タブ
case 3: ddButton.style.background = '#469bd9';
ddButton.style.border = '1px solid #c0c0c0';
ddButton.style.color = '#ffffff';
kintone.app.record.setFieldShown('DDD',true);
break;
//報告書タブ
ase 4: eeButton.style.background = '#469bd9';
eeButton.style.border = '1px solid #c0c0c0';
eeButton.style.color = '#ffffff';
kintone.app.record.setFieldShown('EEE',true);
break;
//作業届タブ
case 5: ffButton.style.background = '#469bd9';
ffButton.style.border = '1px solid #c0c0c0';
ffButton.style.color = '#ffffff';
kintone.app.record.setFieldShown('FFF',true);
break;
//全表示タブ
default :
ggButton.style.background = '#469bd9';
ggButton.style.border = '1px solid #c0c0c0';
ggButton.style.color = '#ffffff';
kintone.app.record.setFieldShown('AAA',true);
kintone.app.record.setFieldShown('BBB',true);
kintone.app.record.setFieldShown('CCC',true);
kintone.app.record.setFieldShown('DDD',true);
kintone.app.record.setFieldShown('EEE',true);
kintone.app.record.setFieldShown('FFF',true);
break;
}
return;
}
}});
})();
お手数ですが、何卒お力添えのほどお願い致します。