カスタマイズビューでレコード毎に添付ファイルを表示

kintone カスタマイズ
1

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

タイトルの件について、カスタマイズビューでkintoneのデフォルトの一覧ビューのようにレコード一覧をリストで表示をさせたいと考えています。

現在下記のようなコードで表示をしていますが、添付ファイルが1つしか表示されていません。

これを各レコードごとに添付ファイルを1つづつ表示させることは出来ますでしょうか？

お手数でございますが、ご確認お願い致します。

js

(function () {
    kintone.events.on('app.record.index.show', function (event) {
        if (event.viewName != 'カスタマイズビュー') return;
        
        var products = new Array();
        for (var i = 0; i < event.records.length; i++) {
            var record = event.records[i];
            console.log(record);
            $("#area").loadTemplate($("#template"),
            {
              t01: record['文字列1行'].value,
              t02: record['添付ファイル'].value,
            },{append:true});
        }
        
        var AppMain_ID = kintone.app.getId();
        var recId = 1;
        
        kintone.api('/k/v1/record', 'GET', {app: AppMain_ID, id: recId}, function(resp){
            var record = resp.record;
            var fileKey = record['添付ファイル']['value'][0]['fileKey']
            filedownload(fileKey);
            });
        });
    
        function filedownload(filekey){
            var apiurl = '/k/v1/file.json?fileKey=' + filekey;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', apiurl, true);
            xhr.setRequestHeader('X-Requested-With' , 'XMLHttpRequest');
            xhr.responseType = "blob";
            var blob = xhr.responseType;
        
            xhr.onload = function() {
                var blob = xhr.response;
                var url = window.URL || window.webkitURL;
                var image = url.createObjectURL(blob);
            
                $('<a><img src="' + image + '" width="100%" height="100%" /></a>').appendTo("#file");
                };
            xhr.send();
        }
    
        function escapeHtml(str) {
            str = str.replace(/&/g, '&amp;');
            str = str.replace(/</g, '&lt;');
            str = str.replace(/>/g, '&gt;');
            str = str.replace(/"/g, '&quot;');
            str = str.replace(/'/g, '&#39;');
            return str;
        };
})();

html

<script type="text/html" id="template">
<tr>
<td class="t01" data-content="t01"></td>
<td class="t02" id="file"></td>
</tr></tbody>
</script>
<div class="container">
<table class="table-bordered"><tr>
<th class="t01">タイトル</th>
<th class="t02">画像</th>
</tr><tbody id="area"></table>
</div></div>

 

2

Nao様

お世話になっております。
サイボウズスタートアップスの江田と申します。

下記のようなコードで実装してみてはいかがでしょうか。

javascript
(function () {
“use strict”;
kintone.events.on(‘app.record.index.show’, function (event) {
if (event.viewName != ‘カスタマイズビュー’) return;
var AppMain_ID = kintone.app.getId();
for (var i = 0; i < event.records.length; i++) {
var record = event.records[i];
$(“#area”).loadTemplate($(“#template”),
{
t01: record[‘文字列1行’].value,
t02: ‘<span id="file_’ + record.$id.value + ‘"></span>’,
},{append:true});
kintone.api(‘/k/v1/record’, ‘GET’, {app: AppMain_ID, id: record.$id.value}, function(resp){
var record = resp.record;
var fileKey = record[‘添付ファイル’][‘value’][0][‘fileKey’];
filedownload(fileKey, record.$id.value);
});
}
});
function filedownload(filekey, id){
var apiurl = ‘/k/v1/file.json?fileKey=’ + filekey;
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, apiurl, true);
xhr.setRequestHeader(‘X-Requested-With’ , ‘XMLHttpRequest’);
xhr.responseType = “blob”;
var blob = xhr.responseType;
xhr.onload = function() {
var blob = xhr.response;
var url = window.URL || window.webkitURL;
var image = url.createObjectURL(blob);
$(‘#file_’ + id).replaceWith(‘<a><img src="’ + image + ‘" width=“100%” height=“100%” /></a>’);
};
xhr.send();
}
})();

html
<script type=“text/html” id=“template”>
<tr>
<td class=“t01” data-content=“t01”></td>
<td class=“t02” data-content=“t02”></td>
</tr>
</script>
<div class=“container”>
<table class=“table-bordered”>
<tr>
<th class=“t01”>タイトル</th>
<th class=“t02”>画像</th>
</tr>
<tbody id=“area”></tbody>
</table>
</div>

3

江田篤史様
ご返信ありがとうございます。
ご教授いただいた通り設定をしましたら、実装ができました。
本当にありがとうございます。
今後ともよろしくお願いいたします。

4

初歩的な質問で申し訳ないです。

上記を参考にしたところ、

$(“#area”).loadTemplate($(“#template”),

部分でエラーになってしまいます。

TypeError: $(…).loadTemplate is not a function

ライブラリか何か足りないのでしょうか？

よろしくお願いします。