検索窓の追加

お世話になっております。

アプリの一覧に検索窓を使用しています。

こちらの記事を参照し、2つの検索窓を設置することはできました。

現在2つで運用していますが、4つに増やしたいと思っております。

javaはほとんどわからないのですが、

現在の構文をみてネットで調べたりしてなんとなくてですが下記のようにしてみました。

しかし検索窓が表示されません。

4つ設置というのは難しいでしょうか。

どなたなかご助言いただけないでしょうか。

–下記構文–

// 設定値
const FIELD_CODE1 = “フィールドコード1”;
const FIELD_CODE1_NAME = “検索名1”;
const AND_OR = “and”; // 必ず小文字
const FIELD_CODE2 = “フィールドコード2”;
const FIELD_CODE2_NAME = “検索名2”;
const AND_OR = “and”; // 必ず小文字
const FIELD_CODE3 = “フィールドコード3”;
const FIELD_CODE3_NAME = “検索名3”;
const AND_OR = “and”; // 必ず小文字
const FIELD_CODE4 = “フィールドコード4”;
const FIELD_CODE4_NAME = “検索名4”;

// 一覧表示のタイミングで実行
(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引数に、直前の検索キーワードがあったら格納しておく
}

// 検索キーワードその3
var search_word3 = document.createElement(‘input’);
search_word3.onkeypress = function(e) {
if (e.keyCode && e.keyCode == 13) {
keyword_search();
}
}
if(result[FIELD_CODE3] != undefined){
search_word3.value = result[FIELD_CODE3]; // GET引数に、直前の検索キーワードがあったら格納しておく
}

// 検索キーワードその4
var search_word4 = document.createElement(‘input’);
search_word4.onkeypress = function(e) {
if (e.keyCode && e.keyCode == 13) {
keyword_search();
}
}
if(result[FIELD_CODE4] != undefined){
search_word4.value = result[FIELD_CODE4]; // 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 keyword2 = search_word3.value;
var keyword2 = search_word4.value;
var str_query = ‘?query=’+ FIELD_CODE1 +’ like “’ + keyword1 + '” ’

  • AND_OR +’ ‘+ FIELD_CODE2 +’ like “’ + keyword2 + '” ’
  • AND_OR +’ ‘+ FIELD_CODE3 +’ like “’ + keyword3 + '” ’
  • AND_OR +’ ‘+ FIELD_CODE4 +’ like “’ + keyword4 + '”';

if(keyword1 == “” && keyword2 == “” && keyword3 == “” && keyword4 == “”){
str_query = “”;
}else if(keyword1 != “” && keyword2 == “” && keyword3 == “” && keyword4 == “”){
str_query = ‘?query=’+ FIELD_CODE1 +’ like “’ + keyword1 + '”’
}else if(keyword1 == “” && keyword2 != “” && keyword3 == “” && keyword4 == “”){
str_query = ‘?query=’+ FIELD_CODE2 +’ like “’ + keyword2 + '”’
}else if(keyword1 == “” && keyword2 == “” && keyword3 != “” && keyword4 == “”){
str_query = ‘?query=’+ FIELD_CODE3 +’ like “’ + keyword3 + '”’
}else if(keyword1 == “” && keyword2 == “” && keyword3 == “” && keyword4 != “”){
str_query = ‘?query=’+ FIELD_CODE4 +’ like “’ + keyword4 + '”’
}

// 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(’ ‘+ AND_OR +’ ‘));
label.appendChild(document.createTextNode(FIELD_CODE3_NAME));
label.appendChild(search_word3);
label.appendChild(document.createTextNode(’ ‘+ AND_OR +’ ‘));
label.appendChild(document.createTextNode(FIELD_CODE4_NAME));
label.appendChild(search_word4);
label.appendChild(document.createTextNode(’ '));
label.appendChild(search_button);
kintone.app.getHeaderMenuSpaceElement().appendChild(label);

return event;
});

})();

こちらの記事の方法でデバッグをしてみると原因がわかります。

https://developer.cybozu.io/hc/ja/articles/207613916

 

コード冒頭の「AND_OR」という定数が、重複して宣言されているために実行時にエラーになっています。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const

 

こちらをそれぞれ、

AND_OR1

AND_OR2

AND_OR3

のように異なる定数名にし、対応するコードも変更、また、

// キーワード検索の関数
function keyword_search(){
var keyword1 = search_word1.value;
var keyword2 = search_word2.value;
var keyword2 = search_word3.value;
var keyword2 = search_word4.value;

を、

// キーワード検索の関数
function keyword_search(){
var keyword1 = search_word1.value;
var keyword2 = search_word2.value;
var keyword3 = search_word3.value;
var keyword4 = search_word4.value;

と変更したところ、動作しました。

 

なお、

var parameters = query.split( AND_OR );

のところですが、

今回はすべてのクエリをandでつないでいるので

AND_OR1

としてしまえばいいですが、

orも利用する場合は、ロジックを変更する必要がありそうです。

大西様

ご教示ありがとうございます。

ご教示いただいた方法で試したところ、表示までは無事出来るようになりました。

しかし今度は検索の方でエラーが出てしまいました。

2つの検索窓の時は「検索名1」で検索したあと「検索名2」に入れるとさらに絞れるような検索ができたのですが、

今回4つの場合は「検索名1」で検索したあと「検索名2」~「検索名4」のところに文字を入れて検索すると

下記エラー内容が表示されました。

上記でご指摘いただいた

var parameters = query.split( AND_OR );

の部分を変更するような形になるのでしょうか。

初歩的なことなのかもしれませんが、再度ご助言いただければ幸いです。

【kintoneアプリでのエラー内容】

レコードを読み込めません。
クエリの指定が不正です。
(GAIA_IL08 x503B9cbCRJ68lNKul7G)

【デバックで動かした時のエラー】

index.js:985 POST ※ 520 (520)

(※には長いURLが記載されてました)

いいえ。その部分は関係ありません。

上記のコードのうち、

 

var str_query = ‘?query=’+ FIELD_CODE1 +’ like “’ + keyword1 + '” ’

  • AND_OR +’ ‘+ FIELD_CODE2 +’ like “’ + keyword2 + '” ’
  • AND_OR +’ ‘+ FIELD_CODE3 +’ like “’ + keyword3 + '” ’
  • AND_OR +’ ‘+ FIELD_CODE4 +’ like “’ + keyword4 + '”';

if(keyword1 == “” && keyword2 == “” && keyword3 == “” && keyword4 == “”){
str_query = “”;
}else if(keyword1 != “” && keyword2 == “” && keyword3 == “” && keyword4 == “”){
str_query = ‘?query=’+ FIELD_CODE1 +’ like “’ + keyword1 + '”’
}else if(keyword1 == “” && keyword2 != “” && keyword3 == “” && keyword4 == “”){
str_query = ‘?query=’+ FIELD_CODE2 +’ like “’ + keyword2 + '”’
}else if(keyword1 == “” && keyword2 == “” && keyword3 != “” && keyword4 == “”){
str_query = ‘?query=’+ FIELD_CODE3 +’ like “’ + keyword3 + '”’
}else if(keyword1 == “” && keyword2 == “” && keyword3 == “” && keyword4 != “”){
str_query = ‘?query=’+ FIELD_CODE4 +’ like “’ + keyword4 + '”’
}

 

の部分ですが、ロジックが4検索ボックス全ての組み合わせに対応していないので、

2つ〜3つ入力した状態で検索をかけるとクエリのエラー(likeで空白文字を指定している)になります。

 

全ての組み合わせに対して正しくクエリ文字列を作成できるよう、アルゴリズムを考えてみてください。

(例えば、検索ボックスのvalueを順に見て、値の入っている時だけ配列に格納し、その配列の長さに応じてAND_OR変数に入っている値でつないだ文字列を生成する。等)