kintone 検索窓の作成

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,146

matsuhira

score 6

前提・実現したいこと

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, "");
    }    

    // 検索キーワードその1
    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引数に、直前の検索キーワードがあったら格納しておく
    }

    // 検索キーワードその2
    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/ツール等のバージョンなど)

これを実行すると、検索自体は動くのですが、ある一部の一覧画面にて検索窓が表示されません。
全ての一覧画面で表示されるようにしたいです。
プログラミング全くの初心者で、内容もほとんどを転用しているほどです。
わかりやすく改善点を指南いただけると助かります。
よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2016/10/19 09:58

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

    キャンセル

  • matsuhira

    2016/10/19 10:09

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

    キャンセル

回答 2

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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]);
        }
    }


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/19 18:28

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

    キャンセル

  • 2016/10/19 20:49

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

    キャンセル

  • 2016/10/20 08:40

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる