やること「手書きキャンバスをスペースに表示する」などでサインをした時、併せて「サイン済み」チェックボックスなど、他のフィールドも更新できたら、一覧画面で一目で確認できるのに！ということ、ありませんか？
この記事では次のように、そのような同時更新を実現するカスタマイズをご紹介します。
また、やること「手書きキャンバスをスペースに表示する」のシンプルなカスタマイズについては、次の記事をご確認ください。
手書きキャンバスを使ってサインを添付ファイルフィールドに保存する
アプリの設定
使用するアプリのフォームには次のような設定を行います。
※フィールド名とフィールドコードは同じものを設定しています
カスタマイズについて
このカスタマイズについては、1つ気を付けるポイントがあります。それはやること「手書きキャンバスをスペースに表示する」などの「保存先添付ファイルフィールド」のパラメータ設定についてです。
「保存先添付ファイルフィールド」を設定した時はうまく動作しない
「保存先添付ファイルフィールド」の設定項目を設定した場合は、詳細画面ではパレットに「保存」ボタンが追加され、ユーザーが「保存」ボタンを押すと、現在表示中のレコードの「保存先添付ファイルフィールド」に手書き画像が保存されます。
また保存後、すぐにページがリロードされるという仕様となります。
リロードが発生してしまう事から、もし「保存先添付ファイルフィールド」を設定した場合は、このアクションの後続のカスタマイズにて処理を行う事が出来ず、結果として他のフィールドに値をセットすることができません。
「保存先添付ファイルフィールド」を設定しなければうまくいく
逆に「手書きキャンバスをスペースに表示する」の「保存先添付ファイルフィールド」パラメータは設定せず、やること「手書きキャンバスを画像として保存する」で手書きキャンバスに書いた画像を保存し、その後やること「レコードを更新する（キーの値をフィールドで指定）」で保存した画像を添付ファイルフィールドにセットし、この時併せて「サイン済み」というフラグを立てるといったカスタマイズであれば、サイン画像を反映するのと同時に値を設定する事ができます。
また、「手書きキャンバスをスペースに表示する」の「保存先添付ファイルフィールド」パラメータを設定しない場合は、やること「手書きキャンバスをスペースに表示する」では「保存」ボタンは表示されません。
このため、やること「ボタンをスペースに配置する」でボタンを配置します。
カスタマイズ例
具体的なカスタマイズは次のようになります。
ボタンを作成する
やること「ボタンをスペースに配置する」、条件「詳細画面を表示した時」でボタンを作ります。
「やること」のパラメータは
場所：button(スペースの要素IDを指定)
ラベル：保存ボタン
上下位置合わせ：指定なし
とします。
手書きキャンパスをスペースに表示して保存する
やること「手書きキャンバスをスペースに表示する」、条件「他のアクションの実行が完了した時」で手書きキャンバスをスペースに表示します。
「やること」のパラメータは
場所：space(スペースの要素IDを指定)
背景画像：<選択されていません>
ペンの色：黒
ペンの太さ(ピクセル)：5
パレット：パレットを表示する
保存先添付ファイルフィールド：<選択されていません>
保存ファイル名：<入力されていません>
とします。
また、やること「手書きキャンバスを画像として保存する」、条件「ボタンを押した時」で手書きキャンバスを画像として保存します。
「やること」のパラメータは
手書きキャンバス：１
保存ファイル名：承認サイン
とします。
保存した画像を画面に表示されているレコードにセットする
やること「レコードを更新する（キーの値をフィールドで指定）」、条件「他のアクションの実行が完了した時」で保存した画像を画面に表示されているレコードにセットします。
「やること」のパラメータは
更新先アプリ：Aアプリ
キーとなる更新先のフィールド：レコード番号
キーの値となるこのアプリのフィールド：レコード番号
マッピング：
フラグ=”サイン済み”
添付ファイル=$2
とします。
画面をリロード
やること「画面をリロードする」、条件「他のアクションの実行が完了した時」で詳細画面をリロードし、画像が添付ファイルにセットされ、フラグフィールドに「サイン済み」とセットしていることを確認します。
全体のカスタマイズ
全体のカスタマイズは次のようになります。
実際のカスタマイズ動作例
詳細画面を開くと下記のような表示となり、
やること「ボタンをスペースに配置する」で配置したボタンを押すと、
上記のように添付ファイルフィールドにサインが画像としてセットされ、「フラグ」フィールドに「サイン済み」とセットすることが可能です。
おわりに
この記事では、やること「手書きキャンバスをスペースに表示する」などでサインをした時、併せて「サイン済み」チェックボックスなど、他のフィールドも併せて更新する方法をお伝えしました。
ぜひ、あなたのkintoneアプリに思うようなカスタマイズを入れて、kintoneアプリをより使いやすくしてみてください！
ご不明な点がございましたら、チャットでお問い合わせください。
Customineドキュメントやサポートページも、ぜひご活用ください。