Posted at

kintone関連レコード一覧をユーザライクに

More than 1 year has passed since last update.

初めまして、ライトウェルでkintone勉強中のうえるです。


概要

突然ですが、kintoneに関連レコード一覧ってありますよね、

image.png

こういうやつ

細かい説明は↓

https://jp.cybozu.help/ja/k/user/whats_relatedrecords

便利機能ではありますが、若干使いづらい部分もあると思います。

・一度に表示できるレコード数の制限(30レコードまで)

・ソートはアプリの設定でしか変更できない(ユーザがソートできない)

・検索機能がない

...etc

もう少しユーザライクにしたい!!

ということでjQueryのdataTablesをつかってテーブルを作ってみました!!


アプリの用意




テーブル元データアプリ



image.png

アプリID:703

フィールド名
フィールドの種類
フィールドコード

場所
文字列(1行)
場所A

時間
時刻
時間A

その他
文字列(1行)
その他A

適当にレコードを作成しておきます。

image.png





テーブル作ってみたアプリ



image.png

アプリID:704

フィールド名
フィールドの種類
フィールドコード

場所
文字列(1行)
場所

時間
時刻
時間

その他
文字列(1行)
その他

-
テーブル
Table

絞込用場所
文字列(1行)
絞込用場所


JavaScriptでカスタマイズ

URLで指定するJavaScriptは2つ

image.png

https://js.cybozu.com/jquery/3.2.1/jquery.min.js

https://js.cybozu.com/datatables/v1.10.16/js/jquery.dataTables.min.js

手作りしたJavaScriptは1つ

DataTables.js


手作りしたJavaScript

テーブルの幅を指定

$(kintone.app.record.getFieldElement("Table")).css({

width: "1000px"
});

変数を指定

        //「Table」をデータテーブルに

var tbl = $(kintone.app.record.getFieldElement("Table")).dataTable({
//dataTableを日本語に
language: {
"url": "//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Japanese.json"
},
//初期状態では並び替えをしない
order: [],
//横幅はオートで
AutoWidth: true,
ColumnDef : [
//1列目をHTMLにする
{ targets: 0, type: "html" }
],
//検索機能を有効化
searching: true
});
//テーブルクリアを無効化
tbl.fnClearTable(false);
//絞り込み用フィールドにある値を変数Placeに代入
var Place = e["record"]["絞込用場所"]["value"]
//引用元のアプリID
var appId = 703;
var params = {
app: appId,
/*引用元のアプリ フィールドコード「場所A」の値と、
先程代入した「Place」の値が等しいレコードを探すクエリ文
制限は500レコード(kintoneの制限MAX)*/

query: '場所A ="' + Place + '"order by $id desc limit 500',
//レスポンスに含めるフィールドを指定
fields: ["$id","場所A", "時間A","その他A"]
};

繰り返し文

        kintone.api('/k/v1/records', 'GET', params).then(function(resp) {

/*変数「r」にレスポンスで返ってきたものを代入、
レスポンスがなくなるまで繰り返し*/

for(var r of resp.records) {
//テーブルに値を入れる
tbl.fnAddData([
/*アプリIDとレコードのID(r["$id"].value)
からリンクを作成、画像は無理やりkintoneからもってくる*/

//0列目にr番目のリンクを入れる
"<a href=\"/k/"+ appId +"/show#record="+ r["$id"].value +"\"><img src=\"https://static.cybozu.com/contents/k/image/argo/component/recordlist/record-detail.png\"><title=\"レコードの詳細を表示する\"></a>",
//rに入っている「場所A」フィールドの値を1列目に入れる
r["場所A"].value,
//rに入っている「時間A」フィールドの値を2列目に入れる
r["時間A"].value,
//rに入っている「その他A」フィールドの値を3列目に入れる
r["その他A"].value
],
//再描画させない
false);
}
//for文が終わったときに再描画させる
tbl.fnAdjustColumnSizing();
});

完成物


DataTables.js

jQuery.noConflict();

(function($) {
"use strict";
//実行タイミングはレコード詳細画面を開いた時
kintone.events.on("app.record.detail.show", function(e) {

// 初期表示から広げる場合は、横幅を指定する
$(kintone.app.record.getFieldElement("Table")).css({
width: "1000px"
});
//「Table」をデータテーブルに
var tbl = $(kintone.app.record.getFieldElement("Table")).dataTable({
//dataTableを日本語に
language: {
"url": "//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Japanese.json"
},
//初期状態では並び替えをしない
order: [],
//横幅はオートで
AutoWidth: true,

ColumnDef : [
//1列目をHTMLにする
{ targets: 0, type: "html" }
],
//検索機能を有効化
searching: true
});
//テーブルクリアを無効化
tbl.fnClearTable(false);
//絞り込み用フィールドにある値を変数Placeに代入
var Place = e["record"]["絞込用場所"]["value"]

console.log(Place);
console.log(tbl);
//引用元のアプリID
var appId = 703;

var params = {
app: appId,
/*引用元のアプリ フィールドコード「場所A」の値と、
先程代入した「Place」の値が等しいレコードを探すクエリ文
制限は500レコード(kintoneの制限MAX)*/

query: '場所A ="' + Place + '"order by $id desc limit 500',
//レスポンスに含めるフィールドを指定
fields: ["$id","場所A", "時間A","その他A"]
};
//引用元のアプリからレコードをGET!
kintone.api('/k/v1/records', 'GET', params).then(function(resp) {
/*変数「r」にレスポンスで返ってきたのもを代入、
レスポンスがなくなるまで繰り返し*/

for(var r of resp.records) {
//テーブルに値を入れる
tbl.fnAddData([
/*アプリIDとレコードのIDからリンクを作成、
画像は無理やりkintoneからもってくる*/

"<a href=\"/k/"+ appId +"/show#record="+ r["$id"].value +"\"><img src=\"https://static.cybozu.com/contents/k/image/argo/component/recordlist/record-detail.png\"><title=\"レコードの詳細を表示する\"></a>",
r["場所A"].value,
r["時間A"].value,
r["その他A"].value

],
//再描画させない
false);
}
//for文が終わったときに再描画させる
tbl.fnAdjustColumnSizing();
});
});
})(jQuery);



実際の動作

Table.gif