【フォームブリッジ】手書き画像を添付ファイルへ保管

kintone カスタマイズ
1

背景・実現したいこと

大まかな流れとしては以下です。１と３は問題ありません。また２の手書き機能に関してはWEBサイトを参考に実装はできました。ただ、「画像ダンロード」ボタンを押したら、添付ファイルフィールドへ画像として添付する処理が分かりません。

  1.  非kintoneユーザーに対してフォームブリッジで作業確認書のWEBフォームを準備
  2. 最後に手書きフォームで署名を登録し画像ファイルとして保管
  3. プリントクリエイターでPDF帳票出力して顧客へ提出

利用したソースコード

(function() {
"use strict";

$(document).ready(function() {
 $("#canvas").jSignature({
  width: 600,
  height: 300,
  "background-color": "#ffffee",
 });
 $("#clear").click(function() {
  $("#canvas").jSignature("reset");
  $("img").remove();
 });
 $("#download-image").click(function() {
  var i = new Image();
  i.src = $("#canvas").jSignature("getData");
  $(i).appendTo($("#image"));
 });
});

fb.events.form.mounted = [function(state){
 fb.getElementByCode('label').innerHTML +=
 '<div id="canvas"></div>'+
 '<button id="clear">Clear</button>'+
 '<button id="download-image">Download</button>'+
 '<div id="image"></div>';
 return state;
}];

})();

フォームブリッジ上に以下を配置しています。

フィールドコード label というラベル

フィールドコード file という添付ファイル

2

Shigaさん

こんにちは。

 

添付ファイルには追加できないと思います。

ちなみにkintoneの場合も編集画面時に添付ファイルフィールドにJavaScriptで追加することができません。

 

そのため、レコードが保存された後に、APIでPUT更新するしかないかと思います。

kViewerをお使いでしたら、FormBridgeとkViewerを連携させ

フォーム回答後、kViewerで当レコードを開き、そこで署名し、kintoneレコードにAPIでPUT

再度kViewerで開き直し、PDF出力

このような流れだと可能かと思います。

3

koichiさん

ご回答、提案頂きありがとうございます！

レコード保存後にAPIでPUT更新・・・ファイルのアップロードという記事があったので、この辺りも参考にしてもう少し頑張ってみます！プリントクリエイターでの帳票出力もあるので、ペーパーレスでの運用まであと少しです！