[画面] ペン入力コントロールで「手書き署名」を実装する

署名データの保存先

Power Appsのペン入力で書かれた情報は、画像データとして保存できます。
画像データはBase64形式のURLで取り扱うため、SharePointリストやDataverseにテキストとして保存します。

1. SharePointリストで「署名サンプルリスト」を用意します。
2. 列の追加 > 複数行テキスト > 名前を「署名データ」として保存します。
3. すべてのアイテム > 現在のビューの編集から「タイトル」のチェックを外し、「ID」にチェックを入れて表示します。

アプリの準備

1. アプリの新規作成から、Header、Main、Footerの構成を持ったテンプレートを使用します。
2. HeaderContainerにテキストラベルを追加し、ディスプレイ > テキストを「署名＆オフライン対応報告アプリ」、WidthをParent.Width / 3にします。

ペン入力コントロールの追加

1. MainConatainerに「ペン入力」を追加します。
2. 詳細設定 > フォントサイズを5、色はペンの色を黒色、塗りつぶしを白色、罫線を「実線」、WidthをParent.Width、HeightをParent.Heightにします。

署名データの保存

1. 左メニュー > データ > データの追加 > コネクタ > SharePointを選択します。
2. SharePointサイトに接続、一覧の選択で作成したリストを選択し、接続します。
3. FooterContainerにボタンを追加し、ディスプレイ > テキストを「保存」にします。
4. 詳細設定 > OnSelectに下記の式を入力します。

Patch(
    '署名サンプルリスト',
    Defaults('署名サンプルリスト'),
    {
        署名データ: PenInput1.Image
    }
);
Reset(PenInput1);
Notify("保存しました", NotificationType.Success)

動作確認

アプリのプレビューからアプリを実行し、ペン入力に入力します。

保存を実行後、SharePointリストではIDが採番され、署名データが保存されます。

ただし、ここで保存される署名データ（appres://）は、アプリ内のローカル参照のため、この段階で画像として使うことはできません。
画像として扱う場合は、JSON関数でBase64形式に変換する必要があります。
画像の取り扱いは、ステップ4で説明しています。