画像と署名を Power Apps から Power Automate に転送する

この投稿では、Power Apps から Microsoft Power Automate プラットフォームに画像と署名を転送する方法を学習します。Power Apps には画像を編集して SharePoint にアップロードするための既定の方法がないため、これを行うのは少し困難です。

ここで取り上げる例は、私が以前に使用したことのある経費アプリです。基本的に、これは SharePoint リストに添付されるギャラリーです。

このギャラリーで何かを選択すると、基本的に右側のこのフォームが更新されます。

次に、右側のフォームに移動して編集します。

SharePoint リストに移動し、Signatureという名前の画像列を追加します。

Power Apps に移動して、その画像列をこのフォームに追加してみましょう。そこで、[フィールドの編集]をクリックしてから[フィールドの追加]をクリックし、ドロップダウン フィールドから[署名]を選択します。

追加はできますが、画像のアップロードなどはできないことがわかります。たとえば、 [編集]をクリックすると、署名の画像を更新する以外のすべてを編集できます。これを iPad で行う場合、この記録を提出する前に実際に画面を使用して入力または署名を行うことができれば良いのですが、残念ながらそれは許可されていません。

目次

• 画像のアップロードと署名の作成
• Microsoft Power Automate プラットフォーム フローの作成
• Power App を Microsoft Power Automate プラットフォームに接続する
• Microsoft Power Automate プラットフォームでの引数の定義
• 画像ごとに変数を作成する
• URIコードをバイナリコードに変換する
• 結論

画像のアップロードと署名の作成

Power Apps にはその機能はありませんが、Power Automate が助けとなって助けてくれます。そこで、その方法を紹介します。

まず、ユーザーが実際に画像を送信して署名を描く方法が必要です。+ 記号をクリックすると新しい経費レポートが追加され、チェック マークをクリックするとこのポップアップ ボックスが表示されます。

戻っても何も起こりません。ただし、 「送信」をクリックすると、経費報告書が作成されます。ユーザーが画像をアップロードして署名を描く機能を追加します。それでは、[メディア]に移動し、[画像の追加]に移動しましょう。このコントロールを使用すると、基本的に写真を追加できます。

次に、「入力」、「ペン入力」の順にクリックします。これにより、署名を描くことができます。

これを行うためのスペースを増やすために、このモデルを少し大きくしましょう。

次に、私たちが何をしているのかをみんなに示すために、以下にいくつかのラベルを追加します。

左側のラベルには「領収書をアップロードする」と表示され、右側には「署名してください」と表示されます。

Microsoft Power Automate プラットフォーム フローの作成

次に行う必要があるのは、基本的に領収書コントロールと署名コントロールのアップロードを取得し、それらを SharePoint の経費、領収書、および署名のドキュメント ライブラリにアップロードするPower Automate フローを作成することです。繰り返しますが、Power Apps でこれを直接行う方法はなく、Power Automate を使用する必要があります。

[新しいフロー]をクリックし、[インスタント クラウド フロー]を選択しましょう。

このフローをトリガーする方法としてPower Appsを選択し、このUploadStuff を呼び出して、[作成]をクリックします。

SharePoint コネクタに移動し、[ファイルの作成]を選択します。

サイト アドレスとフォルダー パス (この場合は /expensereceiptsandsignature と呼ばれます) が必要です。

ファイルの名前については、おそらく経費領収書の名前と署名を経費領収書の実際のタイトルの名前と同じにする必要があります。Power Apps にファイル名とファイルの内容を尋ねます。

次に、 [新しいステップ]をクリックして、同じことをもう一度実行します。これは、実際の経費領収書の写真用の作成ファイルが1 つ必要であり、アップロードされる署名用のファイルがもう 1 つ必要であるためです。ファイル コンテンツのみが異なります。これは Power Apps 内で要求する必要があります。

これで、ようやくワークフローが作成できました。

Power App を Microsoft Power Automate プラットフォームに接続する

最後に行う必要があるのは、Power Apps を Power Automate に接続することです。したがって、新しい経費を追加してチェック マークを選択すると、このモデルが再び取得されます。

送信ボタンをクリックすると、このモデルが行うことはフォームを送信し、可視性を false に戻すことだけです。

メイン画面に戻って、このフローをアクティブにする必要があります。ただし、最初に、 fxバーにあるものをコピーし、クリップボードに保存されるように切り取ります。次に、 [アクション]に移動し、[Power Automate]をクリックして、[UploadStuff ] を選択します。これも先ほど作成したPower Automate ワークフローです。これにより、ワークフローが Power Apps にインポートされます。

Microsoft Power Automate プラットフォームでの引数の定義

Power Automate 内で指定した一連の引数を定義する必要があります。指定する必要がある最初の引数は、呼び出す実際のファイル名です。この場合、これは、DataCardValue1 に保存されている、送信する経費報告書のタイトルと同じになります。

アップロードする領収書の実際の画像も必要であり、以前に使用した他のすべてのコマンドを貼り付けます。

さて、ここからが物事がややこしいところですが、「トリッキー」というのは、残念ながら非常にトリッキーという意味です。これを送信すると、 UploadedImage1.ImageとPen.Input2.Image がワークフローを通過し、ファイル コンテンツが作成されることになります。

ただし、UploadedImage1.Image は実際には画像自体を参照しているわけではないことに注意してください。これは、画像のアップロード先を知るために Microsoft が作成したパスを指します。つまり、実際の画像コードそのものではありません。これは Microsoft だけがアクセスできるランダムなパスです。画像は保存されますが、理解できないランダムなテキスト ファイルになります。

したがって、次のコードを使用していくつかの調整を行う必要があります。

画像ごとに変数を作成する

最初に行う必要があるのは、画像ごとに変数を作成することです。アップロードされた画像の JSON 表現と等しいvarImage1という変数を作成します。JSON にはバイナリ データも含めたいと考えています。

次に、 varImage1に保存されているこの関数の出力を取得し、 varImageTrimmedという別の変数を作成します。これは基本的にvarImage1を取得し、 Mid 関数を使用してその端を切り取ります。

アップロードされた画像を取得して、それを URI に変換します。URI は、実際の画像を表すテキスト形式で保存されるコードです。次に、それを取得して、そのテキストの最初の 2 文字と最後の 2 文字を削除します。これらは必要のない形式識別子であるためです。

次に、署名に対して同じプロセスを実行し、画像をPenInput2に置き換えて、それをvarSig1と呼びます。

URIコードをバイナリコードに変換する

Power Automate はイメージへのランダムな経路ではないことはすでに述べました。代わりに、これは画像自体の URI コードであり、基本的にはその画像のテキスト表現です。そのテキスト画像をただ渡すことはできないため、受け取ったコードを SharePoint が読み取れるバイナリ コードに変換する必要があります。

すべてのファイルはバイナリ コードであるため、 Expressionに移動し、URI をバイナリに変換する関数を使用する必要があります。この式をこのアクションのファイル コンテンツ要素に挿入し、[保存]をクリックします。

私たちがやるべきことの 1 つは、ファイルに同じ名前が付けられていないことを確認することです。最初のファイルを画像にし、2 番目のファイルを署名にします。したがって、最初のファイルを _receipt.jpg で編集し、2 番目のファイルを _signature.jpg で編集できます。

うまくいくかどうか試してみましょう。まずは、400ドルの新しいiPadの新しい経費報告書から始めます。

チェックマークをクリックすると、写真と署名を追加できます。

領収書をアップロードして署名を追加できます。

次に、 「送信」をクリックします。確認するには、経費提出 SharePoint リストに移動して、その項目が作成されているかどうかを確認してみましょう。

さらに、[経費の領収書と署名] に移動すると、新しい iPad の領収書と新しい iPad の署名が表示されます。どちらも、先ほど作成した経費レポートのタイトルに対応しています。

これらは実際の画像であり、実際に見ることができますが、昔ながらの方法で行う場合、これらは単なるテキスト ファイルになります。

結論

これがどれほど強力であるかを少し考えてみましょう。ユーザーが写真や署名を撮って、それらを Microsoft Power Automate プラットフォームのワークフローに組み込むためのアプリケーションを作成する方法ができました。この場合、ドキュメント ライブラリにファイルを保存するためにそれらを使用しています。今日学んだ重要なことは、画像と署名に関連するデータを Power Apps から Power Automate に移動する方法です。

この特定のチュートリアルで取り上げたコンテンツを気に入っていただけた場合は、LuckyTemplates TV チャンネルに登録することを忘れないでください。私自身やさまざまなコンテンツ作成者からの膨大な量のコンテンツが常に公開されており、その全員が LuckyTemplates と Power Platform の使用方法を改善することに専念しています。

ヘンリー