チャレンジした事は認めてください。
できそうな気がしたんです。
いや、正確には表示はできたのですが・・・。
とりあえず試行錯誤した内容をまとめます。
カスタマイズの準備
kintoneにHandsontableを導入する手順については
cybozu様が運営しているcybozu developer networkで詳しく説明されていたのですが、
添付ファイルを表示する方法が記載されていないようでしたのでメモします。
導入手順については、下記が参考になりそうです。
基本的に上記の解説ページで記載されているアプリの構成とします。
「添付ファイル」というフィールド（フィールドコードも同じ）だけ追加します。
こんな感じでしょうか。（上記ページでは「ユーザー数」も使用しているので追加しました。）
レコードを作成します。今回使用する添付ファイルも忘れずに。
（今回はわかりやすく画像にしました。）
カスタマイズビューを確認すると、Handsontableは機能していますが、
添付ファイルは表示されない状況。
ここからカスタマイズをはじめます。
「小計」の右に「添付ファイル」のフィールドが表示されるイメージです。
コード
添付ファイルのダウンロード部分
例の如くcybozu developer networkの知恵をお借ります。
XMLHttpRequestを使用して添付ファイルをダウンロードする方法がサンプルとして
公開されています。
それを参考に、関数化してこんな感じにしました。
const getAttachedFile = function(fileKey) {
return new kintone.Promise(function(resolve, reject) {
var url = '/k/v1/file.json?fileKey=' + fileKey ;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
// success
var blob = new Blob([xhr.response]);
var url = window.URL || window.webkitURL;
var blobUrl = url.createObjectURL(blob);
console.log(blobUrl);
resolve(blobUrl);
} else {
// error
console.log(xhr.responseText);
reject(xhr.responseText);
}
};
xhr.send();
});
}
Handsontableのセルに画像をレンダリングする部分
公式のドキュメントにも画像をレンダリングしているサンプルがありました。
これを参考に、こうします。
今回はサンプルなので、添付ファイルが1つしか添付されない想定になってます。
const renderingImage = function coverRenderer (instance, td, row, col, prop, value, cellProperties) {
return getAttachedFile([value[0]['fileKey']]).then(function(url) {
var img = document.createElement('IMG');
img.src = url;
img.width="193";
img.height="130";
Handsontable.dom.addEvent(img, 'mousedown', function (e){
// 画像部分のクリックイベントをキャンセル
e.preventDefault();
});
Handsontable.dom.empty(td);
td.appendChild(img);
return td;
})
};
で、↑のレンダリングしてくれる関数を呼ぶようにcolumnsプロパティに設定する。
（ハイライト行）
columns: [
{data: "レコード番号.value"},
{data: "会社名.value"},
{data: "先方担当者名.value"},
{data: "見込み時期.value"},
{data: "確度.value"},
{data: "製品名.value"},
{data: "単価.value"},
{data: "ユーザー数.value"},
{data: "小計.value"},
{data: "添付ファイル.value", renderer: renderingImage}
]
実行。表示されるけど何かおかしい。
添付ファイルは表示されました。でも何かがおかしい。
Handsontableの1行の高さがkintone側のレコード表示エリアに収まっていない。
2レコード目を作っても同じ。
原因とか
ブレークして確認したところ、画像のレンダリング前はレコード表示エリアに収まっています。
画像レンダリング後にwtHiderクラスのheightが更新されていないっぽいんだよなー。
（ヘッダ行 + 2レコード分の高さは400px程度だが、113pxになっている）
似たようなissueがあげられていましたが、この事象については解決には至らず。
（この質問者の方は最新版を適用して解決したっぽい？）
おわりに
とりあえず添付ファイルをダウンロードしてHandsontableにレンダリングはできる。
でも高さが更新されず、ちょっと不恰好になる。
という感じでしょうか。
Handsontable自体はメソッドやイベントが豊富なので、何かしら解決策は有りそうな気がしています。
謎が謎を呼ぶこの事象ですが、解決したら追記か別記事で記載します。
