フォームブリッジにkviewerルックアップを設置し、入力した値が重複しているかどうかをダイアログボックスで表示できるようにしたいのですが、どのように設定すればよいかが分かりません。
勉強中の身のため、お知恵をお借りいただければと思います。
kviewerルックアップで検索をかけたときに、kintoneのマスタアプリに登録済のレコードとkviewerルックアップの照合を行い、以下のように処理したいと思っています。
重複している場合→ダイアログボックスで「登録できません」と表示
重複していない場合→ルックアップに入力した内容がそのままフォームブリッジの文字列フォームに反映される
JavaScriptでのカスタマイズが必要だと認識しておりますが、サンプルコードをいただけると大変助かります。
よろしくお願いいたします。
kuwaさん
こんにちは。
先に前提条件を確認したいのですが
kViewerルックアップした際に検索結果が1件も無ければ、マスタアプリには無いと判断するという認識で合っていますか？
また、既に書きかけのコードがあれば、差し支えない範囲で掲示ください。
koichi様
こんにちは。書き込みありがとうございます。
お世話になります。
＞kViewerルックアップした際に検索結果が1件も無ければ、マスタアプリには無いと判断するという認識で合っていますか？
ご認識の通りです。
無いと判断した場合は、ルックアップに入力した内容がそのままフォームブリッジの文字列フォームに反映されるようにしたいです。
コードについては恐縮ですがJavascriptどころかプログラミング全般素人のため、
非常に訳の分からないことになってるかと思います…。
検索したい項目はユーザ名で、kViewerルックアップのフィールドコードは「ユーザlookup」です。
(function() {
"use strict";
fb.events.kviewer.records.fetch.push = [function (state) {
if(record['ユーザlookup']['value'] == "") {
alert('登録可能');
} else {
alert('登録不可');
return state;
}
}];
});
ご教示いただけますと幸いです。よろしくお願いいたします。
コードありがとうございます。
まず、イベントの記述について
pushを使う場合は (); で括ります。 pushを使わない場合は = []; で括ります。
同じイベントを複数使っていなければ、基本的には = []; で良いと思います（公式のJavaScriptカスタマイズの通り）。
fb.events.kviewer.records.fetch.push(function(state) {
});
または
fb.events.kviewer.records.fetch = [function(state) {
}];
次に値の格納について、以下のような記述となります。頭に state が付きます。
state.record.フィールド名.value = '';
続いて、ルックアップした結果の件数取得について
こちらは標準で用意された関数がありませんので、基本的に取得することができません。
非推奨の方法にはなりますが、以下の通りです。
ルックアップ取得した際にHTML要素を取得して、行数を判定する方法です。
行数が1行以上であれば登録不可→アラートを表示
行数が0行であれば登録可能→文字列フィールドに格納
ルックアップダイアログが生成されて、検索結果の行が反映されるまで若干のタイムラグがあります。
そのため、setTimeoutを使用して、指定ミリ秒後に実行するようにしています。
fb.events.kviewer.records.fetch = [function(state) {
// ルックアップダイアログの検索結果（行）の反映にタイムラグがあるため1秒後に実行
setTimeout(function() {
// ルックアップダイアログの行数
const tr = document.querySelectorAll('.el-dialog__body tbody tr');
alert('ルックアップ検索結果行数：' + tr.length);
// 行数で条件分岐
if (tr.length > 0) {
alert('登録できません');
} else {
alert('登録可能');
state.record.文字列フィールド.value = state.record.ユーザlookup.value;
}
// ルックアップダイアログを閉じる
const closeButton = document.getElementsByClassName('el-dialog__close el-icon el-icon-close')[0];
closeButton.click();
}, 1000);
return state;
}];
勉強中とのことで、見たことない記述があるかもしれませんが
Web検索していただければ使い方の事例もありますので、ぜひ習得いただければと思います。
ご不明点ありましたらコメントください。
koichi様
お世話になっております。
ご返信ありがとうございます。
いただいたコードを参考に勉強させていただきます！
ご教示いただいた内容を基にフォームブリッジに反映してみたのですが、メッセージダイアログが表示されませんでした。
マスタに登録済のデータを入力した場合→ルックアップダイアログが一瞬表示され入力フォームに入力内容が残りました。
マスタに登録がないデータを入力した場合→ルックアップダイアログが表示されたままになりました。（表示件数は0）
検索を駆使してコードの内容については少し理解できたのですが、どこを修正して良いかが分からずご教示いただけますと幸いです。
どうぞよろしくお願いいたします。
上記コードの動きとしては、以下のようになるはずなのですが。
＜マスタに登録済みデータがあるとき（検索がヒットしたとき）＞
アラート「ルックアップ検索結果行数：○件」 →OKを押す
アラート「登録できません」 →OKを押す
検索ダイアログが閉じる
＜マスタに登録済みデータがない（検索結果が0件）＞
アラート「ルックアップ検索結果行数：○件」 →OKを押す
アラート「登録可能」 →OKを押す
検索ダイアログが閉じる
文字列フィールドにルックアップ検索文字列が自動入力される
以下記述はテストとして表示しているだけですので、削っていただいて問題ありません。
alert('ルックアップ検索結果行数：'+ tr.length);
koichi様
色々と調べていく中で見つけた、
こちらでkoichi様が回答していた内容を参考に少し変更して作成してみましたが、やはりうまくいきませんでした。
（前述の通りの動きと変わらずです。）
(function() {
"use strict";
fb.events.kviewer.records.fetch = [function(state) {
// ルックアップダイアログの検索結果（行）の反映にタイムラグがあるため1秒後に実行
setTimeout(function() {
// ルックアップダイアログの行数
const el = document.getElementsByClassName('el-dialog__body');
const tr = el.querySelectorAll('tbody tr');
// 行数で条件分岐
if (tr.length > 0) {
alert('登録できません');
} else {
alert('登録可能');
state.record.fbユーザ名.value = state.record.ユーザlookup.value;
}
// ルックアップダイアログを閉じる
const closeButton = document.getElementsByClassName('el-dialog__close el-icon el-icon-close')[0];
closeButton.click();
}, 1000);
return state;
}];
});
同時進行で別の方法がないか調べてみます。
色々とご丁寧にご教示いただきましてありがとうございました。
kuwaさんの記述とする場合
document.getElementsByClassNameで取得したデータは配列形式のため
以下のように配列番号を指定する必要があります。
const tr = el[0].querySelectorAll('tbody tr');
私の環境では上記に変えて動きましたが、いかがでしょうか。
koichi様
おかげ様で思った通りの動作ができました！
非常に初歩的な部分ですが、最終行に「()」を付け足すのを忘れていたのが原因でした…。
これを機にカスタマイズ、javascriptについて勉強していきたいと思います。
色々とご教示いただきまして、ありがとうございました。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。