Kintone アプリカスタマイズ
kintoneでアプリカスタマイズをしようとした際に調べてもあまり情報がなかったので、kintone アプリカスタマイズについて記事を投稿していきたいと思います。今回する内容としては…
【やりたいこと】
CSVファイルの書き込み時にファイルを任意で決める。
【通常操作だと…】
上記のようにダウンロードするファイルがアプリ名になってしまいます。これをなんとかしたい…ということでJavascriptでカスタマイズすることにしました。
【準備するもの】
わかりやすくするために、アプリのフォームは文字列１行でフィールドコードがAとBにしてみました。
【Javascriptを使って書いたコード】
cybouzu developer network で調べて見たらやり方が書いてあったので、自分なりに簡単に書き換えて記載してみました！コードが下記になります。使い方はコードの後に説明していきます。
(function() {
'use strict';
var CSVButtonEl;
kintone.events.on('app.record.index.show', function (event) {
//変数の定義
var records = event.records;
console.log(records);
//フィールドコード
var A, B = "";
//function requestで使う変数
var resp = [];
var query = "";
var app_id = kintone.app.getRelatedRecordsTargetAppId('reference');
//csvの配列
var csv = [];
//ボタンの有無をチェック
if (!CSVButtonEl) {
setBtn();
CSVButtonEl.addEventListener('click', toClick);
}
//ボタンエレメントの生成
function setBtn() {
var spaceEl = kintone.app.getHeaderMenuSpaceElement();
var text = document.createTextNode('CSVファイル出力');
CSVButtonEl = document.createElement('button');
CSVButtonEl.appendChild(text);
spaceEl.appendChild(CSVButtonEl);
}
//クリックした際の処理
function toClick() {
getMakeCsv();
downloadFile(csv);
console.log('ok');
}
function getMakeCsv() {
//現在のレコード情報を取得
csv += ['test', 'naiyou', 'hoge', '\n'];//1行目の項目名は手動で設ける必要がある
for (var i = 0; i < records.length; i++) {
A = records[i]['A']['value'];
B = records[i]['B']['value'];
//CSVファイルにkintone上記で取得したデータを記入していく
csv += A + ',' + B + ',' + '\n';
}
}
function request(app_id, query){
var appUrl = kintone.api.url('/k/v1/records') + '?app=' + app_id + '&query=' + query;
var respdata = JSON.parse(xmlHttp.responseText);
return respdata;
}
//ダウンロード関数
function downloadFile(csv) {
//ファイル名の設定
var filename = 'TEST' + /*getTimeStamp()*/ '.csv';
//Blob準備
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob = new Blob([bom, csv], {type: 'text/csv'});
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
var url = (window.URL || window.webkitURL);
var blobUrl = url.createObjectURL(blob);
var e = document.createEvent('MouseEvents');
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
a.href = blobUrl;
a.download = filename;
a.dispatchEvent(e);
}
}
//ファイル名に付与する日付の取得
function getTimeStamp() {
var d = new Date();
var YYYY = d.getFullYear();
var MM = (d.getMonth() + 1);
var DD = d.getDate();
var hh = d.getHours();
var mm = d.getMinutes();
if (MM < 10) { MM = '0' + MM; }
if (DD < 10) { DD = '0' + DD; }
if (hh < 10) { hh = '0' + hh; }
else if (mm < 10) { mm = '0' + mm; }
String();
return '' + YYYY + MM + DD + hh + mm;
}
});
})();
【上記のコードを実装してできること】
ファイル名の変更
出力したcsvの一行目の設定
使い方としては、一覧画面にCSVファイル出力というボタンが出てくると思うので押したらダウンロードされるので後はファイルを開いて中身を確認してみてください。
コメント