お世話になっております。
こちらを参考にテーブルを対象にした検索窓を設置しようと思い、コードを作成しましたが詳細画面のコンソールにてエラーが出ておりうまく反映されておりません。
(やりたいこと)
サブテーブルを検索対象にした検索窓を詳細画面に設置したい
(エラー)
78行目にて for (var i =node_space.childNodes.length-1; i>=0; i--) { にて Cannot read properties of null (reading 'childNodes')
また、エラー箇所にブレークポイントを設置し更新したところ 1行上の77行目にて var node_space = kintone.app.getHeaderMenuSpaceElement(); のnod_spaceがnullとなっておりました。
(使用コード)
テーブルのフィールドコードは個人情報のため空白とさせていただきます。
//設定値
const SUBTABLE_CODE = '';
const SUBTABLE_CODE2 = '';
const SUBTABLE_CODE3 = '';
const SUBTABLE_CODE4 = '';
const SUBTABLE_CODE5 = '';
const SUBTABLE_CODE6 = '';
const SUBTABLE_CODE7 = ’';
const SUBTABLE_CODE8 = '';
const SUBTABLE_CODE9 = '';
const SUBTABLE_CODE10 = '';
const SUBTABLE_CODE11 = '';
const SUBTABLE_CODE12 = '';
const SUBTABLE_CODE13 = '';
const SUBTABLE_CODE14 = '';
const SUBTABLE_CODE15 = '';
const SUBTABLE_CODE16 = '';
const SUBTABLE_CODE17 = '';
const SUBTABLE_CODE18 = '';
const SUBTABLE_CODE19 = '';
const SUBTABLE_CODE20 = '';
const SUBTABLE_CODE21 = '';
const AND_OR = 'or';
(function () {
'use strict';
kintone.events.on('app.record.detail.show', function (event) {
//レコード一覧表示のイベントハンドラー
//GET引数に格納された直前の検索キーワードを取得して再表示
var result = {};
var query = window.location.search.substring(7);
//フィールドコード名と検索キーワードに分割する
for(var i = 0;i < query.length;i++){
var element = query[i].split('like');
var param_subtable_code = encodeURIComponent(element[0]);
var param_search_word = encodeURIComponent(element[1]);
//空白スペースを取り除いて、配列に格納
result[param_subtable_code.replace(/^\s+|\s+$/g, "")] = param_search_word.replace(/^[\s|\"]+|[\s|\"]+$/g, "");
}
//検索キーワード
var search_word = document.createElement('input');
search_word.type = 'text';
//検索ボタン
var search_button = document.createElement('input');
search_button.type = 'submit';
search_button.value = 'search';
search_button.onclick = function () {
keyword_search();
};
//キーワード検索の関数
function keyword_search(){
var keyword = search_word.value;
// var str_query = '?query='+ FIELD_CODE +' like "' + keyword;
//ここがクエリ
var str_query = '?query='+ SUBTABLE_CODE +'like' + keyword + ' ' + AND_OR +' '+ SUBTABLE_CODE2 +' like' +keyword + '' + AND_OR +' '+ SUBTABLE_CODE3 +' like' + keyword + '' + AND_OR +' '+ SUBTABLE_CODE4 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE5 +' like' + keyword + ''+ AND_OR +' '
+SUBTABLE_CODE6 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE7 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE8 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE9 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE10 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE11 +' like' + keyword + ''+ AND_OR +' '
+SUBTABLE_CODE12 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE13 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE14 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE15 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE16 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE17 +' like' + keyword + ''+ AND_OR +' '
+SUBTABLE_CODE18 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE19 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE20 +' like' + keyword + ''+ AND_OR +' '+SUBTABLE_CODE21 +' like' + keyword + ''+ AND_OR +' ';
if(keyword === ""){ //inかlikeで取得? 調べて動作確認
str_query = "";
}else if(keyword !== ""){
// str_query = '?query='+ SUBTABLE_CODE +' like ' + keyword + '"'; //コメントアウト
}
}
//重複を避けるため要素をあらかじめクリアしておく
var node_space = kintone.app.getHeaderMenuSpaceElement();
for (var i =node_space.childNodes.length-1; i>=0; i--) { //childNodes にてエラー
node_space.removeChild(node_space.childNodes[i]);
}
var label = document.createElement('label');//定義されていないから表示されない?
label.appendChild(document.createTextNode('物件検索'));
label.appendChild(document.createTextNode(' '));
label.appendChild(search_word);
label.appendChild(document.createTextNode(' '));
label.appendChild(search_button);
kintone.app.getHeaderMenuSpaceElement().appendChild(label);
return event;
});
})();
エラー箇所は下から13行目になります。
長文となってしまっておりますが、ご教授して頂けますと幸いです。
5件のコメント
でレコード詳細画面
レコード一覧情報取得 – cybozu developer network
https://developer.cybozu.io/hc/ja/articles/201942004-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E6%83%85%E5%A0%B1%E5%8F%96%E5%BE%97
返り値
メニュー(追加・一覧・絞り込み・グラフ)の右側の空白部分の要素を返します。
利用できない画面では null が返ります。
とありました。
kintone.app.getHeaderMenuSpaceElement();
が使えるのは一覧画面だけだと思っていたので、一覧画面で試していました。
なにも spaceに追加しない状態で、 kintone.app.getHeaderMenuSpaceElement();のchildNodes.lengthを取得しても0が帰ってくるだけでnullにはなりませんでした。
そこでおかしいと考え、'app.record.detail.show'でkintone.app.getHeaderMenuSpaceElement()を呼び出しているのを発見しました。
harada様
お世話になっております。
動作の確認をしていただき、ありがとうございます。
>'app.record.detail.show'でkintone.app.getHeaderMenuSpaceElement()を呼び出しているのを発見しました。
こちらを重点的に修正を行っていけばよろしいのでしょうか。
kintone.app.getHeaderMenuSpaceElement()を引き続き使うなら
一覧画面での前提としてJavaScriptを
app.record.index.show
に変更しないと動かないと思われます。
harada様
お世話になっております。
app.record.index.show
に変更したところ正常に動いていることを確認できました。
検索窓を詳細画面にて実装したいと考えているので他のコードを検討しようと思います。
ご説明頂きありがとうございました。