kintone:フィールドタイプごとのエレメントの出しわけ(getFieldElement)

サンプル(JavaScript)の利用方法について

サンプル(JavaScript)の利用方法について

ファイル

cstap_lib_get_field_element.js

ソースコード

[code language=”javascript”]/**
* タイプ：ライブラリー
*
* 説明
* フィールドタイプごとのエレメントの出しわけを行います
* 主に一覧画面でのカスタマイズビューでの利用を想定しています
*
* 使い方
* getFieldElement(record['レコード番号'])
*
* URL
* http://toyokumo-blog.kintoneapp.com/wp-content/uploads/2014/05/cstap_lib_get_field_element.js
*
* @author Yuichi Ochiai <ochiai@cstap.com>
*/

/* フィールドタイプごとのデータの出しわけ */
var getFieldElement = function(column) {
var type = column['type'];
var element = document.createElement('div');

switch (type) {
case 'SINGLE_LINE_TEXT':
case 'MULTI_LINE_TEXT':
case 'RADIO_BUTTON':
case 'DROP_DOWN':
case 'STATUS':
case 'NUMBER':
case 'CALC':
case 'RECORD_NUMBER':
element.innerHTML = column['value'];
break;

case 'LINK':
var link = column['value'];
element.innerHTML = '<a target="_blank" href="' + link + '">' + link + '</a>';
break;

case 'CHECK_BOX':
case 'MULTI_SELECT':
element.innerHTML = column['value'].join('<br />');
break;

case 'CREATOR':
case 'MODIFIER':
element.innerHTML = userLink(column['value']);
break;

case 'USER_SELECT':
var values = column['value'];
var users = [];
for (var i = 0, l = values.length; i < l; i++) {
users[i] = userLink(values[i]);
}
element.innerHTML = users.join('<br />');
break;

case 'DATE':
var value = new Date(column['value']);
element.innerHTML = value.toLocaleDateString();
break;

case 'TIME':
var value = new Date(column['value']);
element.innerHTML = value.toLocaleTimeString();
break;

case 'DATETIME':
case 'CREATED_TIME':
case 'UPDATED_TIME':
var value = new Date(column['value']);
element.innerHTML = value.toLocaleString();
break;

case 'FILE':
var values = column['value'];
for (var i = 0, l = values.length; i < l; i++) {
element.appendChild(fileLink(values[i]));
}
break;

case 'SUBTABLE':
var records = column['value'];
var t = document.createElement('table');
var thead = document.createElement('thead');

for (var i = 0, l = records.length; i < l; i++) {
var record = records[i]['value'];
var row = t.insertRow(i);
for (var k in record)
if (record.hasOwnProperty(k)) {
if (i === 0) {
var th = document.createElement('th');
th.innerHTML = '<th>' + k + '</th>';
thead.appendChild(th);
}
var cell = row.insertCell(row.cells.length);
cell.appendChild(getFieldElement(record[k]));
}
}
t.appendChild(thead);
element.appendChild(t);
break;
}

return element;
};

/* ユーザーへのリンク */
var userLink = function(user) {
var code = user['code'];
var name = user['name'];
return '<a target="_blank" href="/k/#/people/user/' + code + '">' + name + '</a>';
};

/* ファイルのダウンロードリンク */
var fileLink = function(file) {
var fname = file['name'];
var fileKey = file['fileKey'];
var url = '/k/v1/file.json?fileKey=' + fileKey;
var ele = document.createElement('div');
var a = document.createElement('a');
a.href = "#";
a.innerHTML = fname;
a.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader("Accept-Charset", "x-user-defined");

xhr.onreadystatechange = function(event) {
if ((xhr.readyState === 4) && (xhr.status === 200)) {
var blob = new Blob([xhr.response], {type: 'application/octet-stream'});
var burl = window.URL || window.webkitURL;
var blobUrl = burl.createObjectURL(blob);
var alink = document.createElement("a");
alink.href = blobUrl;
alink.download = fname;
alink.click();
return true;
}
};
xhr.send();
};
ele.appendChild(a);

return ele;
};
[/code]