背景・実現したいこと
（前提）kintoneUtilityは現在非推奨であることを認識している上でのご相談になります。
こちらのリンクを基に、添付ファイルの拡大機能を詳細画面表示時に実装しています。
画像を表示するのは詳細画面の一番下にimages領域を追加してそこに表示しています。
https://qiita.com/asami_/items/e96207b0c856f9de7837
こちらで実装していたところ、詳細画面の画面リフレッシュや一覧画面から詳細画面への遷移だと、
問題なく画像が表示されviewerjsも起動しています。
ですが、こちらが追加画面保存、編集画面保存後の詳細画面表示の場合、
画像はimagesに表示されるのですがviewerjsが動きません。
こちら解消する方法はございませんでしょうか。
追加画面保存、編集画面保存後の詳細画面表示でも、画像が表示されviewerjsによる画像拡大縮小機能が動いてほしいです。
エラー情報 （開発者ツールのコンソール）
１点気になるのが、以下エラーが表示されています。参考にしたリンクのままではうまく動かないのではと推測までできているのですが、動くようにするにはどのようにすべきかが不明です。
「kintone.events.onによるapp.record.detail.showの登録は、同期的に行ってください。非同期に登録すると、イベントハンドラーが実行されない場合があります。」
利用したソースコード
jQuery.noConflict();
(function ($) {
'use strict';
// 画像ファイルのHTML生成
function createUrl(fileInfo) {
var fileKeyVal = fileInfo.fileKey;
var fileNameVal = fileInfo.fileName;
return kintoneUtility.rest.downloadFile({
fileKey: fileKeyVal,
isGuest: true
}).then(function (res) {
var blobUrl = window.URL.createObjectURL(res);
var div = document.createElement('div');
var ul = document.createElement('ul');
var addHtml;
ul.setAttribute('id', 'images');
div.appendChild(ul);
document.body.appendChild(div);
addHtml = '<li class="imageList"><img class="imageClass" src="' + blobUrl + '" alt="' + fileNameVal + '"></li>';
$('#images').append(addHtml);
}).catch(function (err) {
console.log('err', err);
});
}
// レコード詳細表示イベント
kintone.events.on('app.record.detail.show', function (event) {
var values = event.record.画像ファイル.value;
var fileInfoList = [];
$('#images').empty();
values.forEach(function (value) {
var fileKey;
var fileName;
// 画像以外はスキップ
var type = value.contentType;
if (!type.startsWith('image')) {
return;
}
fileKey = value.fileKey;
fileName = value.name;
fileInfoList.push({
'fileKey': fileKey,
'fileName': fileName
});
});
Promise.all(fileInfoList.map(function (fileInfo) {
return createUrl(fileInfo);
})).then(function () {
// Viewer.jsを呼び出す
var viewer = new Viewer(document.getElementById('images'));
});
});
})(jQuery);