kintone 検索窓の作成

Question

###前提・実現したいこと
kintoneのアプリをJavaScriptで、編集しています。
アプリの一覧画面にて、複数項目をandの条件で検索させる
検索窓を作成しています。
具体的には、「お客様氏名」と「お客様住所」の一部から、
お客様からの問合せ内容を検索させたいという内容です。

エラーメッセージとしては
「未定義または NULL 参照のプロパティ 'length' は取得できません」
と表示されます。

###該当のソースコード

const FIELD_CODE1 = "お客さま氏名";
const FIELD_CODE1_NAME = "お客さま氏名";
const AND_OR = "and";  // 必ず小文字
const FIELD_CODE2 = "お客さま住所";
const FIELD_CODE2_NAME = "お客さま住所";

// 一覧表示のタイミングで実行
(function () {
  "use strict";
  kintone.events.on("app.record.index.show", function (event) {
    // GET引数に格納された直前の検索キーワードを取得して再表示する
    var result = {};    
    var query = window.location.search.substring( 7 );  // URL固定部分(?query=)は無視

    // クエリ検索条件の区切り記号 (and/or) で分割
    var parameters = query.split( AND_OR );

    // フィールドコード名と検索キーワードに分割する
    for( var i = 0; i < parameters.length; i++ ){
        var element = parameters[ i ].split( 'like' );
        var paramName = decodeURIComponent( element[0] );
        var paramValue = decodeURIComponent( element[1] );
        
        // スペースと""をtrimして、文字列だけにしてから、配列に格納
        result[ paramName.replace(/^\s+|\s+$/g, "") ] = paramValue.replace(/^[\s|\"]+|[\s|\"]+$/g, "");
    }    

    // 検索キーワードその１
    var search_word1 = document.createElement('input');
    search_word1.onkeypress = function(e) {
        if (e.keyCode && e.keyCode == 13) {
           keyword_search();
        }
    }
    if(result[ FIELD_CODE1 ] != undefined){
        search_word1.value  = result[ FIELD_CODE1 ];   // GET引数に、直前の検索キーワードがあったら格納しておく
    }
    
    // 検索キーワードその２
    var search_word2 = document.createElement('input');
    search_word2.onkeypress = function(e) {
        if (e.keyCode && e.keyCode == 13) {
           keyword_search();
        }
    }
    if(result[ FIELD_CODE2 ] != undefined){
        search_word2.value  = result[ FIELD_CODE2 ];   // GET引数に、直前の検索キーワードがあったら格納しておく
    }
    
    // 検索ボタン
    var search_button = document.createElement('button');
    search_button.innerHTML = '検索';
    search_button.onclick = function () {
        keyword_search();
    };
    
    // キーワード検索の関数
    function keyword_search(){
      var keyword1 = search_word1.value;
      var keyword2 = search_word2.value;
      var str_query = '?query='+ FIELD_CODE1 +' like "' + keyword1 + '" '
					+ AND_OR +' '+ FIELD_CODE2 +' like "' + keyword2 + '"';
      
      if(keyword1 == "" && keyword2 == ""){
        str_query = "";
      }else if(keyword1 != "" && keyword2 == ""){
        str_query = '?query='+ FIELD_CODE1 +' like "' + keyword1 + '"'
      }else if(keyword1 == "" && keyword2 != ""){
        str_query = '?query='+ FIELD_CODE2 +' like "' + keyword2 + '"'
      }
      
      // GET変数を使って、検索結果へジャンプ！
      document.location = location.origin + location.pathname + str_query
    }

    // キーワード入力部品を、kintoneヘッダ部分に埋め込む(重複を避けるため、最初に要素をクリアしておく)
    var aNode = kintone.app.getHeaderMenuSpaceElement()
    for (var i =aNode.childNodes.length-1; i>=0; i--) {
        aNode.removeChild(aNode.childNodes[i]);
    }
    var label = document.createElement('label');
    label.appendChild(document.createTextNode(FIELD_CODE1_NAME));
    label.appendChild(search_word1);
    label.appendChild(document.createTextNode(' '+ AND_OR +' '));
    label.appendChild(document.createTextNode(FIELD_CODE2_NAME));
    label.appendChild(search_word2);    
    label.appendChild(document.createTextNode('  '));    
    label.appendChild(search_button);     
    kintone.app.getHeaderMenuSpaceElement().appendChild(label);

    return event;
  });

})();

###試したこと
どこをどうすればよいか、何が原因かもさっぱりわかりません。
###補足情報(言語/FW/ツール等のバージョンなど)
これを実行すると、検索自体は動くのですが、ある一部の一覧画面にて検索窓が表示されません。
全ての一覧画面で表示されるようにしたいです。
プログラミング全くの初心者で、内容もほとんどを転用しているほどです。
わかりやすく改善点を指南いただけると助かります。
よろしくお願い致します。

Comments

[Lhankor_Mhy]

考えられるのは、kintone.app.getHeaderMenuSpaceElement()が何も返さないページがある、ということです。「ある一部の一覧画面にて検索窓が表示されません」とありますが、そのページは他のページと構成が違うなどの原因が考えられます。

[matsuhira]

素早い回答ありがとうございます。　末尾の「kintone.app.getHeaderMenuSpaceElement()」の部分が必要ないということでしょうか？　１０の一覧画面のうち、３つで表示されません。素人目には構成が違う部分が見受けられません。このプログラムが反応しないような一覧の条件というのはございますでしょうか？

Answer 1

大変申し訳ございません。
他にも組んでいた別のjsを修正したところ、改善されました。
問題のjsにて、一覧画面のある要素を取得出来なかった時の処理が抜けていたようで、
今回検索窓が表示されなかった３つの一覧はその要素を表示していなかったものでした。
ご協力ありがとうございました。
お時間頂きまして、誠に申し訳ありませんでした。

Answer 2

    for (var i =aNode.childNodes.length-1; i>=0; i--) {
        aNode.removeChild(aNode.childNodes[i]);
    }

↓

    if (aNode.childNodes){
        for (var i =aNode.childNodes.length-1; i>=0; i--) {
            aNode.removeChild(aNode.childNodes[i]);
        }
    }

という変更をするとどうなりますか？

Comments

[matsuhira]

回答ありがとうございます。
ご提示頂いた内容に変更し実行したところ、これまで同様、３つの一覧で
表示されない状況です。

[Lhankor_Mhy]

エラーも同様に出ますか？

[Lhankor_Mhy]

あ、そっか。間違えた。訂正します。

[matsuhira]

よろしくお願い致します。

[Lhankor_Mhy]

あ、訂正済みです。

[matsuhira]

訂正ありがとうございます。
訂正後の物をお加えたところ
これまで同様のエラーとともに、表示されない状況です。。

[Lhankor_Mhy]

なるほど、じゃあ、エラー部分と表示部分は別ということですね。検索窓を表示しているコードはどの部分なのかわかりますか？

[Lhankor_Mhy]

https://cybozudev.zendesk.com/hc/ja/articles/201952870-%E7%AC%AC3%E5%9B%9E-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E3%81%AB%E3%82%82%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%97%E3%82%88%E3%81%86-
https://cybozudev.zendesk.com/hc/ja/articles/201952870-%E7%AC%AC3%E5%9B%9E-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E3%81%AB%E3%82%82%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%97%E3%82%88%E3%81%86-

[Lhankor_Mhy]

上記の解説を見るとレコード一覧とレコード詳細ではヘッダへのアイテム追加方法が違うようなんですが、そういうことですか？

[matsuhira]

返答ありがとうございます。
はい。レコード一覧のヘッダ部分への追加が、kintone.app.getHeaderMenuSpaceElement()
ということかと思います。

[Lhankor_Mhy]

そうだとすると、レコード一覧とレコード詳細のコードは別々に書くべきなような気がするのですが、これは一緒に書くのが適切なのでしょうか。kintoneについてはよく存じないのですが、いかがですか。

[matsuhira]

返答ありがとうございます。
今回必要なのはレコード一覧画面での検索窓なので、一つのレコード内を表示するレコード詳細画面の、レコード詳細のコードは今回は必要ないのかな…？と想像します。。
ちなみに、レコード詳細画面にての空白要素取得は、kintone.app.record.getHeaderMenuSpaceElement()　となっています。
わかりにくい説明で申し訳ありません。