他のアプリの値を参照し、親子関係にあるプルダウンをJavaScriptにて作成しました。(親プルダウンを選択した時に子プルダウンの選択肢を動的に変更するもの）
プルダウンの表示、値の選択と連動については実現できたのですが、Kintoneに値を登録することができませんでした。
‘app.record.create.submit’ と 'app.record.edit.submit’ のイベント発生時に上記の様にJavaScriptにて作成したプルダウンの値を取得しKintone上にあらかじめ設定している文字列(１行)の項目に値を設定したいのですが、このようなことは可能でしょうか？
よろしくお願いします。
後藤 耕一 さん
cstapの瀧ヶ平です
どういったプルダウンを作成しているのかはわかりませんが、実装可能だと思います。
プルダウンの内容を取得できるのであればそれをフィールドの値に設定すれば可能だと思いますが、どのあたりで躓いているのか分かりますでしょうか？
瀧ヶ平様
早速のご回答ありがとうございます。
JavaScriptについては、下記を参考に作成しました。
https://gist.github.com/fddcddhdd/95cf9a4d5090cf886055
同一のKintoneアプリ内で２種類の連動プルダウンを作成するためカスタマイズしたところで躓いています。
連動プルダウングループ１のプルダウンnameを「big_cat1」、連動プルダウングループ２のプルダウンnameを「big_cat2」として、下記のように値を設定しようとしていますが、実行時にエラーが発生し保存ができません。
event[“record”][BIG_CATEGORY_NAME][“value”] = $(‘select[name=“big_cat1”]’).val();
event[“record”][SMALL_CATEGORY_NAME][“value”] = $(‘select[name=“small_cat1”]’).val();
何らかの原因でプルダウン作成時に設定した「name」を参照する際に参照できない状態になっていると考えているのですが、そもそもプルダウン作成時点での設定の仕方に問題があるのでしょうか？
設定の仕方、参照の仕方についてご教授いただけないでしょうか？
よろしくお願いします。
以下、作成したJavaScriptの全文です。(長文です。すみません。)
(function () {
// 新規レコード追加・編集画面になったら
kintone.events.on([‘app.record.create.show’, ‘app.record.edit.show’, ‘app.record.detail.show’], function (event) {
var appId = kintone.app.getId();
//カテゴリーマスタ・アプリの情報
var MASTER_CATEGORY_APP_NO1;
var MASTER_BIG_CATEGORY_NAME;
var MASTER_SMALL_CATEGORY_NAME;
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
var BIG_CATEGORY_NAME;
var SMALL_CATEGORY_NAME;
var BIG_CATEGORY_NAME2;
var SMALL_CATEGORY_NAME2;
//連動プルダウン設定
switch (appId) {
case 102:
//消費電力
//自販機種類-選択２
MASTER_CATEGORY_APP_NO1 = 103;
MASTER_BIG_CATEGORY_NAME = ‘Char1_USetPoint’;
MASTER_SMALL_CATEGORY_NAME = ‘Char1_SetPoint’;
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
BIG_CATEGORY_NAME = ‘DD_Select1’;
SMALL_CATEGORY_NAME = ‘DD_Select2’;
BIG_CATEGORY_NAME2 = ‘自販機種類’;
SMALL_CATEGORY_NAME2 = ‘選択２’;
get_Record(event, MASTER_CATEGORY_APP_NO1, MASTER_BIG_CATEGORY_NAME, MASTER_SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME, SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME2, SMALL_CATEGORY_NAME2, 1);
//分野１-分野２
MASTER_CATEGORY_APP_NO1 = 89;
MASTER_BIG_CATEGORY_NAME = ‘Char1_USetPoint’;
MASTER_SMALL_CATEGORY_NAME = ‘Char1_SetPoint’;
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
BIG_CATEGORY_NAME = ‘DD_Bunya1’;
SMALL_CATEGORY_NAME = ‘DD_Bunya2’;
BIG_CATEGORY_NAME2 = ‘分野１’;
SMALL_CATEGORY_NAME2 = ‘分野２’;
get_Record(event, MASTER_CATEGORY_APP_NO1, MASTER_BIG_CATEGORY_NAME, MASTER_SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME, SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME2, SMALL_CATEGORY_NAME2, 2);
break;
default:
break;
}
/*
MASTER_CATEGORY_APP_NO1 = 103;
MASTER_BIG_CATEGORY_NAME = ‘Char1_USetPoint’;
MASTER_SMALL_CATEGORY_NAME = ‘Char1_SetPoint’;
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
BIG_CATEGORY_NAME = ‘DD_Select1’;
SMALL_CATEGORY_NAME = ‘DD_Select2’;
BIG_CATEGORY_NAME2 = ‘自販機種類’;
SMALL_CATEGORY_NAME2 = ‘選択２’;
get_Record(event, MASTER_CATEGORY_APP_NO1, MASTER_BIG_CATEGORY_NAME, MASTER_SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME, SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME2, SMALL_CATEGORY_NAME2, 1);
MASTER_CATEGORY_APP_NO1 = 89;
MASTER_BIG_CATEGORY_NAME = ‘Char1_USetPoint’;
MASTER_SMALL_CATEGORY_NAME = ‘Char1_SetPoint’;
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
BIG_CATEGORY_NAME = ‘DD_Bunya1’;
SMALL_CATEGORY_NAME = ‘DD_Bunya2’;
BIG_CATEGORY_NAME2 = ‘分野１’;
SMALL_CATEGORY_NAME2 = ‘分野２’;
get_Record(event, MASTER_CATEGORY_APP_NO1, MASTER_BIG_CATEGORY_NAME, MASTER_SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME, SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME2, SMALL_CATEGORY_NAME2, 2);
*/
return event;
});
// レコード追加・編集保存前イベント
kintone.events.on([‘app.record.create.submit’, ‘app.record.edit.submit’], function(event) {
var appId = kintone.app.getId();
//連動プルダウン設定
switch (appId) {
case 102:
//消費電力
//自販機種類-選択２
BIG_CATEGORY_NAME = ‘DD_Select1’;
SMALL_CATEGORY_NAME = ‘DD_Select2’;
// プルダウンで選択されている値を、kintoneレコードに格納する
event[“record”][BIG_CATEGORY_NAME][“value”] = $(‘select[name=“big_cat1”]’).val();
//↑ここでエラーが発生している模様
event[“record”][SMALL_CATEGORY_NAME][“value”] = $(‘select[name=“small_cat1”]’).val();
//分野１-分野２
BIG_CATEGORY_NAME = ‘DD_Bunya1’;
SMALL_CATEGORY_NAME = ‘DD_Bunya2’;
// プルダウンで選択されている値を、kintoneレコードに格納する
event[“record”][BIG_CATEGORY_NAME][“value”] = $(‘select[name=“big_cat2”]’).val();
event[“record”][SMALL_CATEGORY_NAME][“value”] = $(‘select[name=“small_cat2”]’).val();
break;
default:
break;
}
return event;
});
})();
/**
* Kintoneと通信を行うクラス()
*/
KintoneRecordManager = (function() {
KintoneRecordManager.prototype.query = ‘’;
KintoneRecordManager.prototype.records = [];
KintoneRecordManager.prototype.appId = null;
KintoneRecordManager.prototype.query = ‘’;
KintoneRecordManager.prototype.limit = 100;
KintoneRecordManager.prototype.offset = 0;
function KintoneRecordManager(MASTER_CATEGORY_APP_NO1) {
this.appId = MASTER_CATEGORY_APP_NO1;
}
// すべてのレコード取得する
KintoneRecordManager.prototype.getRecords = function(callback) {
kintone.api(‘/k/v1/records’, ‘GET’, {
app: this.appId,
// query: this.query + (’ order by 優先度 asc limit ’ + this.limit + ’ offset ’ + this.offset ) //order by,limit, offsetの順番じゃないとダメ！
query: this.query + (’ order by Char1_UCode, Char1_Code asc limit ’ + this.limit + ’ offset ’ + this.offset ) //order by,limit, offsetの順番じゃないとダメ！
}, (function(_this) {
return function(res) {
var len=0;
Array.prototype.push.apply(_this.records, res.records);
len = res.records.length;
_this.offset += len;
if (len < _this.limit) {
_this.ready = true;
if (callback !== null) {
callback(_this.records);
}
} else {
_this.getRecords(callback);
}
};
})(this));
};
return KintoneRecordManager;
})();
function get_Record(event, MASTER_CATEGORY_APP_NO1, MASTER_BIG_CATEGORY_NAME, MASTER_SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME, SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME2, SMALL_CATEGORY_NAME2, type) {
//別kintoneアプリからの取得クラス変数
var getRecordMethod;
// 元々ある大小のテキスト入力フィールドは非表示にする(表示・操作はプルダウンだけにしたい)
kintone.app.record.setFieldShown(BIG_CATEGORY_NAME, false);
kintone.app.record.setFieldShown(SMALL_CATEGORY_NAME, false);
// 既存レコードの場合、選択済のカテゴリーの値を、変数に格納する。
var big_cat_selected1;
var small_cat_selected1;
var big_cat_selected2;
var small_cat_selected2;
// 大小のプルダウンを表示するエリアを生成
var mySpaceField;
switch (type) {
case 1:
var big_cat_selected1 = event[“record”][BIG_CATEGORY_NAME][“value”];
var small_cat_selected1 = event[“record”][SMALL_CATEGORY_NAME][“value”];
mySpaceField = kintone.app.record.getSpaceElement(‘Space1’);
break;
case 2:
var big_cat_selected2 = event[“record”][BIG_CATEGORY_NAME][“value”];
var small_cat_selected2 = event[“record”][SMALL_CATEGORY_NAME][“value”];
mySpaceField = kintone.app.record.getSpaceElement(‘Space2’);
break;
}
// 別アプリである「カテゴリーマスタ」のデータを入れる連想配列を初期化
var hashItems = new Array();
//別kintoneアプリからの取得クラスを生成(リロードや二回目の編集を考慮して初期化)
getRecordMethod = new KintoneRecordManager(MASTER_CATEGORY_APP_NO1);
getRecordMethod.records = [];
getRecordMethod.offset = 0;
//全てのレコードセットをグローバル変数に格納(WebAPI経由なので１秒位かかる)
getRecordMethod.getRecords(function(records) {
// 0件なら何もしない
if (records.length == 0) {
mySpaceField.innerHTML = ‘マスタアプリにレコードがありません’;
return;
}
// マスタアプリのデータを、ローカルの連想配列に格納
switch (type) {
case 1:
for (var i = 0; i < records.length; i++) {
var record = records[i];
hashItems[i] = {
big_cat1: record[MASTER_BIG_CATEGORY_NAME][“value”],
small_cat1: record[MASTER_SMALL_CATEGORY_NAME][“value”]
};
}
hashItems[0] = {
big_cat1: “”,
small_cat1: “”
};
for (var i = 0; i < records.length; i++) {
var record = records[i];
hashItems[i + 1] = {
big_cat1: record[MASTER_BIG_CATEGORY_NAME][“value”],
small_cat1: record[MASTER_SMALL_CATEGORY_NAME][“value”]
};
}
// 新規作成なら(選択済が無ければ)、大・小カテゴリーの最初の選択肢を選択済にしておく
if(big_cat_selected1 == undefined) { big_cat_selected1 = hashItems[0][‘big_cat1’];}
if(small_cat_selected1 == undefined) { small_cat_selected1 = hashItems[0][‘small_cat1’];}
/*
//最初にプルダウンを、全てクリアする
for (var i=mySpaceField.childNodes.length-1; i>=0; i–) {
mySpaceField.removeChild(mySpaceField.childNodes[i]);
}
*/
//大・小カテゴリーのプルダウンを作成
var select1 = document.createElement(“select”); select1.name = “big_cat1”;
var select2 = document.createElement(“select”); select2.name = “small_cat1”;
//プルダウンオブジェクト・選択済項目・親カテゴリ・自カテゴリの定義配列
var arrCategory = new Array(
{“pulldown”:select1, “selected”:big_cat_selected1, “parent”:‘’, “self”:‘big_cat1’},
{“pulldown”:select2, “selected”:small_cat_selected1, “parent”:‘big_cat1’, “self”:‘small_cat1’}
);
break;
case 2:
for (var i = 0; i < records.length; i++) {
var record = records[i];
hashItems[i] = {
big_cat2: record[MASTER_BIG_CATEGORY_NAME][“value”],
small_cat2: record[MASTER_SMALL_CATEGORY_NAME][“value”]
};
}
hashItems[0] = {
big_cat2: “”,
small_cat2: “”
};
for (var i = 0; i < records.length; i++) {
var record = records[i];
hashItems[i + 1] = {
big_cat2: record[MASTER_BIG_CATEGORY_NAME][“value”],
small_cat2: record[MASTER_SMALL_CATEGORY_NAME][“value”]
};
}
// 新規作成なら(選択済が無ければ)、大・小カテゴリーの最初の選択肢を選択済にしておく
if(big_cat_selected2 == undefined) { big_cat_selected2 = hashItems[0][‘big_cat2’];}
if(small_cat_selected2 == undefined) { small_cat_selected2 = hashItems[0][‘small_cat2’];}
/*
//最初にプルダウンを、全てクリアする
for (var i=mySpaceField.childNodes.length-1; i>=0; i–) {
mySpaceField.removeChild(mySpaceField.childNodes[i]);
}
*/
//大・小カテゴリーのプルダウンを作成
var select1 = document.createElement(“select”); select1.name = “big_cat2”;
var select2 = document.createElement(“select”); select2.name = “small_cat2”;
//プルダウンオブジェクト・選択済項目・親カテゴリ・自カテゴリの定義配列
var arrCategory = new Array(
{“pulldown”:select1, “selected”:big_cat_selected2, “parent”:‘’, “self”:‘big_cat2’},
{“pulldown”:select2, “selected”:small_cat_selected2, “parent”:‘big_cat2’, “self”:‘small_cat2’}
);
break;
}
var SetCnt = 0;
//大・小カテゴリーのプルダウン作成
for(iCat=0; iCat <arrCategory.length; iCat++){
//カテゴリーマスタのレコード数だけループ(重複したフィールド値を１個にまとめる)
var first_value = “”;
for ( var i in hashItems ) {
// 親カテゴリーが無い or 親カテゴリーが一致なら
if(arrCategory[iCat][‘parent’] == ‘’ || arrCategory[iCat-1][‘selected’] == hashItems[i][arrCategory[iCat][‘parent’]]){
if(SetCnt == 0){
//先頭に空白を入れる
var option1 = document.createElement(‘option’);
option1.setAttribute(‘value’, ‘’);
arrCategory[iCat][‘pulldown’].appendChild(option1);
SetCnt = 1;
}
// かつ、自カテゴリの新しい値だったら、プルダウンに追加する
if(first_value != hashItems[i][arrCategory[iCat][‘self’]]){
var option = document.createElement(‘option’);
option.setAttribute(‘value’, hashItems[i][arrCategory[iCat][‘self’]]);
//既存レコードの選択済の値だったら、selectedにしておく
if(arrCategory[iCat][‘selected’] == hashItems[i][arrCategory[iCat][‘self’]]){
option.setAttribute(‘selected’, true);
}
option.innerHTML = hashItems[i][arrCategory[iCat][‘self’]];
arrCategory[iCat][‘pulldown’].appendChild(option);
// プルダウンに追加した値を、次の比較対象とする
first_value = hashItems[i][arrCategory[iCat][‘self’]];
}
} else {
//小カテゴリーになったらフラグを戻す
SetCnt = 0;
}
}
}
// 大カテゴリーを変更
select1.onchange = function(event) {
var first_value_small = “”;
// 小カテゴリーをクリア
for (var i=select2.childNodes.length-1; i>=0; i–) {
select2.removeChild(select2.childNodes[i]);
}
//カテゴリーマスタのレコード数だけループ
for ( var i in hashItems ) {
switch (type) {
case 1:
//新しい小カテゴリーが出てきたらプルダウンに追加する
if(this.value == hashItems[i][‘big_cat1’] && first_value_small != hashItems[i][‘small_cat1’]){
var option2 = document.createElement(‘option’);
option2.setAttribute(‘value’, hashItems[i][‘small_cat1’]);
option2.innerHTML = hashItems[i][‘small_cat1’];
select2.appendChild(option2);
first_value_middle = hashItems[0][‘small_cat1’];
}
break;
case 2:
//新しい小カテゴリーが出てきたらプルダウンに追加する
if(this.value == hashItems[i][‘big_cat2’] && first_value_small != hashItems[i][‘small_cat2’]){
var option2 = document.createElement(‘option’);
option2.setAttribute(‘value’, hashItems[i][‘small_cat2’]);
option2.innerHTML = hashItems[i][‘small_cat2’];
select2.appendChild(option2);
first_value_middle = hashItems[0][‘small_cat2’];
}
break;
}
}
}
// 画面に、大・小カテゴリーのプルダウンを表示する
mySpaceField.appendChild(select1);
mySpaceField.appendChild(select2);
// CSSを使って、見た目をkintoneっぽくする
//プルダウンオブジェクト・項目名の定義配列
var arrOutput = new Array(
{“pulldown”:select1, “fieldname”:BIG_CATEGORY_NAME2},
{“pulldown”:select2, “fieldname”:SMALL_CATEGORY_NAME2}
);
//親子関係カテゴリーのプルダウンを画面に表示する
for(iOutput=0; iOutput <arrOutput.length; iOutput++){
// 見た目がkintoeデフォルトと同じようになるように、CSS解析してセット(崩れる可能性あり)
var div_outer = document.createElement(‘div’);
div_outer.className = ‘control-gaia control-single-select-field-gaia’;
var span = document.createElement(‘span’);
span.innerHTML = arrOutput[iOutput][‘fieldname’];
span.className = ‘control-label-text-gaia’;
var div = document.createElement(‘div’);
div.className = ‘control-label-gaia’;
div.appendChild(span);
div_outer.appendChild(div);
arrOutput[iOutput][‘pulldown’].style.width = ‘400px’;
arrOutput[iOutput][‘pulldown’].style.cursor = “pointer”;
div_outer.appendChild(arrOutput[iOutput][‘pulldown’]);
mySpaceField.appendChild(div_outer);
}
});
}
後藤 耕一 さん
jQueryやDocumentインターフェースのname属性値によるDOM要素の検索はDOM要素のname属性値を用いるのみでDOM要素のnameプロパティを設定しても検索に引っかからない可能性があります。(idを除き属性値とプロパティはそれぞれ別に定義されています)
そのため、各select要素に対してnameを設定する場合setAttributeメソッドを利用してname属性値を設定する必要があると思われます。
ご回答ありがとうござます。
nameの設定方法に問題があると理解しました。
現状、select要素のnameを設定する際に「select要素名.name = “big_cat1”」としている所を
「select要素名.setAttribute(“name”, “big_cat1”) 」に変更して試してみましたが、同じ場所でエラーが発生しました。
var select1 = document.createElement(“select”); select1.setAttribute(“name”, “big_cat1”);
event[“record”][BIG_CATEGORY_NAME][“value”] = $(‘select[name=“big_cat1”]’).val();
確認の為、「alert($(‘select[name=“big_cat1”]’).val());」を記載しましたが、結果が表示されないため参照できていないものと思われます。
参照方法の問題でしょうか？
また、大変初歩的な質問で申し訳ないのですが、設定されているselect要素名を確認する方法はありますでしょうか？
よろしくお願いします。
後藤 耕一 さん
セレクタでのjQueryオブジェクトの選択がうまくいっていないのか、valメソッド自体が空の値を返すのか分からないのですが、出ているエラー自体はどうなっていますか？(開発者ツールのコンソールで確認できます)
また、セレクタでjQueryオブジェクトを作成するのがうまくいっていないようなので、kintone.events.onのコールバック外でvar $select1, $select2; とした上で、プルダウン要素の作成時に$select1 = $(select1); $select2 = $(select2); としてjQueryオブジェクトを作成し、実際に値を取る場合には$select1.val()のようにして取得する方が確実だと思います。
瀧ヶ平様
ご提示いただいた方法を試してみました。
１．kintone.events.on記載部以前にて、$select1 $select2 を宣言
２．Select要素を宣言し、nameを設定した(select1.setAttribute(“name”, “big_cat1”);)直後に
$select1 = $(select1);
$select2 = $(select2); として値を格納
３．プルダウン値取得部($(‘select[name=“big_cat1”]’).val();)を 「$select1.val();」に変更
実行したところ、２の部分で「’$’は定義されていません」とのエラーが発生しました。
jQueryオブジェクトが使用できないのでしょうか？
よろしくお願いします。
後藤 耕一 さん
そもそもjQueryのJavaScriptファイルはアプリに読み込んでいますか？
CybozuCDNにあるjQueryの最新版のURLをJavaScriptカスタマイズの一番上に読み込んでいるのであれば問題ないはずですが…
瀧ヶ平様
ご指摘ありがとうございます。
最新版のJQuery(https://js.cybozu.com/jquery/3.1.1/jquery.min.js)を読み込んだところ、「’$’は定義されていません」とのエラーはでなくなりました。%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%93%E3%81%A0%E3%81%A8%E3%81%93%E3%82%8D%E3%80%81%E3%80%8C%E2%80%99%24%E2%80%99%E3%81%AF%E5%AE%9A%E7%BE%A9%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93%E3%80%8D%E3%81%A8%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AF%E3%81%A7%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82)
続行して確認していますが、上記の３．プルダウン値取得にて「未定義または NULL 参照のプロパティ ‘val’ は取得できません」エラーが表示されます。
開発者ツールにて確認したところ、「$select1」の「value」に値が設定されていることは確認できましたので、参照するプロパティさえわかれば取得できるのではと思います。
event[“record”][BIG_CATEGORY_NAME][“value”] = $select11.val();
よろしくお願いします。
後藤 耕一 さん
$select1に正しくjQueryオブジェクトが代入されているのであれば本来$select1及び$select2が未定義になるはずはないので、正直原因が分かりませんね…
$select1.valueが存在するならばフィールドに$select1.valueを代入するだけでよいとは思いますがコードを見る限り$selectのプロパティとしてvalueが存在しているわけではなさそうなので少し怪しいです。
とりあえずコードを私の方で修正してみたのでこちらを試してみてもらえますでしょうか？
(function () {
var select1, select2;
// 新規レコード追加・編集画面になったら
kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.detail.show'], function (event) {
var appId = kintone.app.getId();
//カテゴリーマスタ・アプリの情報
var MASTER_CATEGORY_APP_NO1;
var MASTER_BIG_CATEGORY_NAME;
var MASTER_SMALL_CATEGORY_NAME;
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
var BIG_CATEGORY_NAME;
var SMALL_CATEGORY_NAME;
var BIG_CATEGORY_NAME2;
var SMALL_CATEGORY_NAME2;
//連動プルダウン設定
switch (appId) {
case 102:
//消費電力
//自販機種類-選択２
MASTER_CATEGORY_APP_NO1 = 103;
MASTER_BIG_CATEGORY_NAME = 'Char1_USetPoint';
MASTER_SMALL_CATEGORY_NAME = 'Char1_SetPoint';
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
BIG_CATEGORY_NAME = 'DD_Select1';
SMALL_CATEGORY_NAME = 'DD_Select2';
BIG_CATEGORY_NAME2 = '自販機種類';
SMALL_CATEGORY_NAME2 = '選択２';
get_Record(event, MASTER_CATEGORY_APP_NO1, MASTER_BIG_CATEGORY_NAME, MASTER_SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME, SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME2, SMALL_CATEGORY_NAME2, 1);
//分野１-分野２
MASTER_CATEGORY_APP_NO1 = 89;
MASTER_BIG_CATEGORY_NAME = 'Char1_USetPoint';
MASTER_SMALL_CATEGORY_NAME = 'Char1_SetPoint';
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
BIG_CATEGORY_NAME = 'DD_Bunya1';
SMALL_CATEGORY_NAME = 'DD_Bunya2';
BIG_CATEGORY_NAME2 = '分野１';
SMALL_CATEGORY_NAME2 = '分野２';
get_Record(event, MASTER_CATEGORY_APP_NO1, MASTER_BIG_CATEGORY_NAME, MASTER_SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME, SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME2, SMALL_CATEGORY_NAME2, 2);
break;
default:
break;
}
/*
MASTER_CATEGORY_APP_NO1 = 103;
MASTER_BIG_CATEGORY_NAME = 'Char1_USetPoint';
MASTER_SMALL_CATEGORY_NAME = 'Char1_SetPoint';
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
BIG_CATEGORY_NAME = 'DD_Select1';
SMALL_CATEGORY_NAME = 'DD_Select2';
BIG_CATEGORY_NAME2 = '自販機種類';
SMALL_CATEGORY_NAME2 = '選択２';
get_Record(event, MASTER_CATEGORY_APP_NO1, MASTER_BIG_CATEGORY_NAME, MASTER_SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME, SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME2, SMALL_CATEGORY_NAME2, 1);
MASTER_CATEGORY_APP_NO1 = 89;
MASTER_BIG_CATEGORY_NAME = 'Char1_USetPoint';
MASTER_SMALL_CATEGORY_NAME = 'Char1_SetPoint';
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
BIG_CATEGORY_NAME = 'DD_Bunya1';
SMALL_CATEGORY_NAME = 'DD_Bunya2';
BIG_CATEGORY_NAME2 = '分野１';
SMALL_CATEGORY_NAME2 = '分野２';
get_Record(event, MASTER_CATEGORY_APP_NO1, MASTER_BIG_CATEGORY_NAME, MASTER_SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME, SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME2, SMALL_CATEGORY_NAME2, 2);
*/
return event;
});
// レコード追加・編集保存前イベント
kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event) {
var appId = kintone.app.getId();
//プルダウンの値を格納するフィールド名(このJSを読み込んでいるアプリ)
var BIG_CATEGORY_NAME;
var SMALL_CATEGORY_NAME;
var BIG_CATEGORY_NAME2;
var SMALL_CATEGORY_NAME2;
//連動プルダウン設定
switch (appId) {
case 102:
//消費電力
//自販機種類-選択２
BIG_CATEGORY_NAME = 'DD_Select1';
SMALL_CATEGORY_NAME = 'DD_Select2';
// プルダウンで選択されている値を、kintoneレコードに格納する
event["record"][BIG_CATEGORY_NAME]["value"] = $(select1).val();
//↑ここでエラーが発生している模様
event["record"][SMALL_CATEGORY_NAME]["value"] = $(select2).val();
//分野１-分野２
BIG_CATEGORY_NAME = 'DD_Bunya1';
SMALL_CATEGORY_NAME = 'DD_Bunya2';
// プルダウンで選択されている値を、kintoneレコードに格納する
event["record"][BIG_CATEGORY_NAME]["value"] = $(select1).val();
event["record"][SMALL_CATEGORY_NAME]["value"] = $(select2).val();
break;
default:
break;
}
return event;
});
/**
* Kintoneと通信を行うクラス()
*/
KintoneRecordManager = (function() {
KintoneRecordManager.prototype.query = '';
KintoneRecordManager.prototype.records = [];
KintoneRecordManager.prototype.appId = null;
KintoneRecordManager.prototype.query = '';
KintoneRecordManager.prototype.limit = 100;
KintoneRecordManager.prototype.offset = 0;
function KintoneRecordManager(MASTER_CATEGORY_APP_NO1) {
this.appId = MASTER_CATEGORY_APP_NO1;
}
// すべてのレコード取得する
KintoneRecordManager.prototype.getRecords = function(callback) {
kintone.api('/k/v1/records', 'GET', {
app: this.appId,
// query: this.query + (' order by 優先度 asc limit ' + this.limit + ' offset ' + this.offset ) //order by,limit, offsetの順番じゃないとダメ！
query: this.query + (' order by Char1_UCode, Char1_Code asc limit ' + this.limit + ' offset ' + this.offset ) //order by,limit, offsetの順番じゃないとダメ！
}, (function(_this) {
return function(res) {
var len=0;
Array.prototype.push.apply(_this.records, res.records);
len = res.records.length;
_this.offset += len;
if (len < _this.limit) {
_this.ready = true;
if (callback !== null) {
callback(_this.records);
}
} else {
_this.getRecords(callback);
}
};
})(this));
};
return KintoneRecordManager;
})();
function get_Record(event, MASTER_CATEGORY_APP_NO1, MASTER_BIG_CATEGORY_NAME, MASTER_SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME, SMALL_CATEGORY_NAME, BIG_CATEGORY_NAME2, SMALL_CATEGORY_NAME2, type) {
//別kintoneアプリからの取得クラス変数
var getRecordMethod;
// 元々ある大小のテキスト入力フィールドは非表示にする(表示・操作はプルダウンだけにしたい)
kintone.app.record.setFieldShown(BIG_CATEGORY_NAME, false);
kintone.app.record.setFieldShown(SMALL_CATEGORY_NAME, false);
// 既存レコードの場合、選択済のカテゴリーの値を、変数に格納する。
var big_cat_selected1;
var small_cat_selected1;
var big_cat_selected2;
var small_cat_selected2;
// 大小のプルダウンを表示するエリアを生成
var mySpaceField;
switch (type) {
case 1:
var big_cat_selected1 = event["record"][BIG_CATEGORY_NAME]["value"];
var small_cat_selected1 = event["record"][SMALL_CATEGORY_NAME]["value"];
mySpaceField = kintone.app.record.getSpaceElement('Space1');
break;
case 2:
var big_cat_selected2 = event["record"][BIG_CATEGORY_NAME]["value"];
var small_cat_selected2 = event["record"][SMALL_CATEGORY_NAME]["value"];
mySpaceField = kintone.app.record.getSpaceElement('Space2');
break;
}
// 別アプリである「カテゴリーマスタ」のデータを入れる連想配列を初期化
var hashItems = new Array();
//別kintoneアプリからの取得クラスを生成(リロードや二回目の編集を考慮して初期化)
getRecordMethod = new KintoneRecordManager(MASTER_CATEGORY_APP_NO1);
getRecordMethod.records = [];
getRecordMethod.offset = 0;
//全てのレコードセットをグローバル変数に格納(WebAPI経由なので１秒位かかる)
getRecordMethod.getRecords(function(records) {
// 0件なら何もしない
if (records.length == 0) {
mySpaceField.innerHTML = 'マスタアプリにレコードがありません';
return;
}
// マスタアプリのデータを、ローカルの連想配列に格納
switch (type) {
case 1:
for (var i = 0; i < records.length; i++) {
var record = records[i];
hashItems[i] = {
big_cat1: record[MASTER_BIG_CATEGORY_NAME]["value"],
small_cat1: record[MASTER_SMALL_CATEGORY_NAME]["value"]
};
}
hashItems[0] = {
big_cat1: "",
small_cat1: ""
};
for (var i = 0; i < records.length; i++) {
var record = records[i];
hashItems[i + 1] = {
big_cat1: record[MASTER_BIG_CATEGORY_NAME]["value"],
small_cat1: record[MASTER_SMALL_CATEGORY_NAME]["value"]
};
}
// 新規作成なら(選択済が無ければ)、大・小カテゴリーの最初の選択肢を選択済にしておく
if(big_cat_selected1 == undefined) { big_cat_selected1 = hashItems[0]['big_cat1'];}
if(small_cat_selected1 == undefined) { small_cat_selected1 = hashItems[0]['small_cat1'];}
/*
//最初にプルダウンを、全てクリアする
for (var i=mySpaceField.childNodes.length-1; i>=0; i--) {
mySpaceField.removeChild(mySpaceField.childNodes[i]);
}
*/
//大・小カテゴリーのプルダウンを作成
select1 = document.createElement("select");
select2 = document.createElement("select");
//プルダウンオブジェクト・選択済項目・親カテゴリ・自カテゴリの定義配列
var arrCategory = new Array(
{"pulldown":select1, "selected":big_cat_selected1, "parent":'', "self":'big_cat1'},
{"pulldown":select2, "selected":small_cat_selected1, "parent":'big_cat1', "self":'small_cat1'}
);
break;
case 2:
for (var i = 0; i < records.length; i++) {
var record = records[i];
hashItems[i] = {
big_cat2: record[MASTER_BIG_CATEGORY_NAME]["value"],
small_cat2: record[MASTER_SMALL_CATEGORY_NAME]["value"]
};
}
hashItems[0] = {
big_cat2: "",
small_cat2: ""
};
for (var i = 0; i < records.length; i++) {
var record = records[i];
hashItems[i + 1] = {
big_cat2: record[MASTER_BIG_CATEGORY_NAME]["value"],
small_cat2: record[MASTER_SMALL_CATEGORY_NAME]["value"]
};
}
// 新規作成なら(選択済が無ければ)、大・小カテゴリーの最初の選択肢を選択済にしておく
if(big_cat_selected2 == undefined) { big_cat_selected2 = hashItems[0]['big_cat2'];}
if(small_cat_selected2 == undefined) { small_cat_selected2 = hashItems[0]['small_cat2'];}
/*
//最初にプルダウンを、全てクリアする
for (var i=mySpaceField.childNodes.length-1; i>=0; i--) {
mySpaceField.removeChild(mySpaceField.childNodes[i]);
}
*/
//大・小カテゴリーのプルダウンを作成
select1 = document.createElement("select");
select2 = document.createElement("select");
//プルダウンオブジェクト・選択済項目・親カテゴリ・自カテゴリの定義配列
var arrCategory = new Array(
{"pulldown":select1, "selected":big_cat_selected2, "parent":'', "self":'big_cat2'},
{"pulldown":select2, "selected":small_cat_selected2, "parent":'big_cat2', "self":'small_cat2'}
);
break;
}
var SetCnt = 0;
//大・小カテゴリーのプルダウン作成
for(var iCat=0; iCat <arrCategory.length; iCat++){
//カテゴリーマスタのレコード数だけループ(重複したフィールド値を１個にまとめる)
var first_value = "";
for ( var i in hashItems ) {
// 親カテゴリーが無い or 親カテゴリーが一致なら
if(arrCategory[iCat]['parent'] == '' || arrCategory[iCat-1]['selected'] == hashItems[i][arrCategory[iCat]['parent']]){
if(SetCnt == 0){
//先頭に空白を入れる
var option1 = document.createElement('option');
option1.setAttribute('value', '');
arrCategory[iCat]['pulldown'].appendChild(option1);
SetCnt = 1;
}
// かつ、自カテゴリの新しい値だったら、プルダウンに追加する
if(first_value != hashItems[i][arrCategory[iCat]['self']]){
var option = document.createElement('option');
option.setAttribute('value', hashItems[i][arrCategory[iCat]['self']]);
//既存レコードの選択済の値だったら、selectedにしておく
if(arrCategory[iCat]['selected'] == hashItems[i][arrCategory[iCat]['self']]){
option.setAttribute('selected', true);
}
option.innerHTML = hashItems[i][arrCategory[iCat]['self']];
arrCategory[iCat]['pulldown'].appendChild(option);
// プルダウンに追加した値を、次の比較対象とする
first_value = hashItems[i][arrCategory[iCat]['self']];
}
} else {
//小カテゴリーになったらフラグを戻す
SetCnt = 0;
}
}
}
// 大カテゴリーを変更
select1.onchange = function(event) {
var first_value_small = "";
// 小カテゴリーをクリア
for (var i=select2.childNodes.length-1; i>=0; i--) {
select2.removeChild(select2.childNodes[i]);
}
//カテゴリーマスタのレコード数だけループ
for ( var i in hashItems ) {
switch (type) {
case 1:
//新しい小カテゴリーが出てきたらプルダウンに追加する
if(this.value == hashItems[i]['big_cat1'] && first_value_small != hashItems[i]['small_cat1']){
var option2 = document.createElement('option');
option2.setAttribute('value', hashItems[i]['small_cat1']);
option2.innerHTML = hashItems[i]['small_cat1'];
select2.appendChild(option2);
}
break;
case 2:
//新しい小カテゴリーが出てきたらプルダウンに追加する
if(this.value == hashItems[i]['big_cat2'] && first_value_small != hashItems[i]['small_cat2']){
var option2 = document.createElement('option');
option2.setAttribute('value', hashItems[i]['small_cat2']);
option2.innerHTML = hashItems[i]['small_cat2'];
select2.appendChild(option2);
}
break;
}
}
};
// 画面に、大・小カテゴリーのプルダウンを表示する
mySpaceField.appendChild(select1);
mySpaceField.appendChild(select2);
// CSSを使って、見た目をkintoneっぽくする
//プルダウンオブジェクト・項目名の定義配列
var arrOutput = new Array(
{"pulldown":select1, "fieldname":BIG_CATEGORY_NAME2},
{"pulldown":select2, "fieldname":SMALL_CATEGORY_NAME2}
);
//親子関係カテゴリーのプルダウンを画面に表示する
for(var iOutput=0; iOutput <arrOutput.length; iOutput++){
// 見た目がkintoeデフォルトと同じようになるように、CSS解析してセット(崩れる可能性あり)
var div_outer = document.createElement('div');
div_outer.className = 'control-gaia control-single-select-field-gaia';
var span = document.createElement('span');
span.innerHTML = arrOutput[iOutput]['fieldname'];
span.className = 'control-label-text-gaia';
var div = document.createElement('div');
div.className = 'control-label-gaia';
div.appendChild(span);
div_outer.appendChild(div);
arrOutput[iOutput]['pulldown'].style.width = '400px';
arrOutput[iOutput]['pulldown'].style.cursor = "pointer";
div_outer.appendChild(arrOutput[iOutput]['pulldown']);
mySpaceField.appendChild(div_outer);
}
});
}
})();
瀧ヶ平様
コードの修正までしたいただき、ありがとうございます。
いただきましたコードを使用したところ、
一部に問題がありましたが当方で修正しドロップダウンの連動 および データの保存ができることを確認しました。
ご対応いただきありがとうございました。