キントーンってデフォルトの検索がやりづらいので、JavaScriptで検索機能を追加しないといけないのですが、ネットに落ちているJavaScriptがどれもいまいち。
なので作ってみました。
ブラウザにこのJSだけを単独で入れても動くので、ブラウザでためしてみて、動いたらキントーンに入れます。
Javascript
-------------------------------------
(function() {
'use strict';
//変数
var FIELD_CODE = "検索フィールド名";
var search_word;
var search_button;
//ユーティリティー
function println(src)
{
alert(src);
}
function strlength(src)
{
var ret = 0;
if (src == null || src == "")return ret;
ret = src.length;
return ret;
}
function isKintone()
{
if (typeof(kintone) == "object")return true;
return false;
}
function createKintonEvent(name,func)
{
if (isKintone() == true) {
kintone.events.on(name, func);
return;
}
func();
}
function ignString(str)
{
//使用禁止文字を除去
var ign = "\"\x5c&?";
for (var i = 0; i < strlength(ign); i++) {
var c = ign.substr(i, 1);
while (true) {
var idx = str.indexOf(c);
if (idx == -1)break;
str = str.substr(0, idx) + str.substr(idx + 1);
}
}
return str;
};
function preareQueryString(str)
{
//検索表示用のquery文字列を作成
var ret = "";
if (str==null || str=="") return "";
ret = FIELD_CODE;
ret += " like \"";
ret += str;
ret +="\"";
str = encodeURIComponent(ret);
ret = "?query=";
ret += str;
return ret;
}
//イベント
function keyword_search(str)
{
//検索ワードからクエリーへの変換
var keyword = ignString(str);
var str_query = preareQueryString(keyword);
return str_query;
}
function onAppRecordIndexShow(event)
{
//検索部分のエレメントを作成
search_word = document.createElement("input");
search_word.type = 'text';
search_word.placeholder = '名前 カナ 電話番号';
search_button = document.createElement('input');
search_button.type = 'submit';
search_button.value = '検 索';
search_button.onclick = function() {
//検索ボタンをクリックされた処理
var str_query = "";
str_query=keyword_search(search_word.value);
if (str_query != "") {
if (isKintone() == true){
document.location = location.origin + location.pathname + str_query;
}else {
println(str_query);
}
}
};
var label = document.createElement('label');
label.appendChild(document.createTextNode(' '));
label.appendChild(search_word);
label.appendChild(document.createTextNode(' '));
label.appendChild(search_button);
if (isKintone()) {
//レコード一覧のヘッダー部分に登録
let node_space = kintone.app.getHeaderMenuSpaceElement();
for (let i = node_space.childNodes.length - 1; i >= 0; i--) {
node_space.removeChild(node_space.childNodes[i]);
}
kintone.app.getHeaderMenuSpaceElement().appendChild(label);
}else {
//キントーン以外で実行される場合
document.getElementsByTagName('body')[0].appendChild(label);
}
return event;
}
//イベント登録
createKintonEvent("app.record.index.show", onAppRecordIndexShow);
})();
-------------------------------------
css
-------------------------------------
.gaia-argoui-app-index-toolbar .kintone-app-headermenu-space label {
border: 1px solid #3498db;
border-radius: 0.5em;
padding: 1em;
color: #3498db;
}
.gaia-argoui-app-index-toolbar .kintone-app-headermenu-space label input[type=text] {
width:10em;
}
.gaia-argoui-app-index-toolbar .gaia-argoui-app-viewtoggle,
.gaia-argoui-app-index-toolbar .gaia-argoui-app-filterbutton,
.gaia-argoui-app-index-toolbar .gaia-argoui-app-subtotalbutton {
margin-bottom:1em;
}
.gaia-argoui-app-index-toolbar .gaia-argoui-app-subtotalbutton {
margin-right:1em;
}
-------------------------------------
