SE の雑記

SQL Server の情報をメインに Microsoft 製品の勉強内容を日々投稿

PowerApps で 1 アクションで複数のデータソースにデータの登録を行ってみる

leave a comment

RDBMS を使用したアプリケーションを構築する場合、

  • 基本データについては、テーブルに登録
  • 画像のような BLOB データについては、外部のデータストアに登録

というような登録方法をすることがあるのではないでしょうか。

PowerApps でもボタンをクリックするという 1 アクションで、データと画像を異なるデータソースに登録することが可能です。

本投稿では、この方法についてみてきたいと思います。

今回の構成ですが、

  • 基本データについては、SQL Server に登録
  • 画像については、BLOB ストレージ登録

というような構成にしてみます。

SQL Server のテーブル構成については次のような構成としています。

DROP TABLE IF EXISTS ImageDataTable
GO
CREATE TABLE ImageDataTable
(
	id bigint IDENTITY(1,1),
	file_name nvarchar(255),
	file_path nvarchar(500),
	file_id nvarchar(500),
	user_name nvarchar(255),
	create_date datetime2 DEFAULT(GETDATE()),
	CONSTRAINT PK_IDT PRIMARY KEY CLUSTERED (id) WITH(DATA_COMPRESSION=PAGE),
	INDEX NCIX_IDT_user_name (user_name) WITH (DATA_COMPRESSION=PAGE)
)

 

テーブルの構成は次のようになります。

id 主キー
file_name ファイル名
file_path Azure ストレージのパス (/<コンテナー>/ファイル名)
file_id Azure ストレージ上のファイルの ID
user_name データを登録したユーザー名
create_date データ登録日

 

ユーザーが明示的に入力するのは、「ファイル名」だけで、残りの項目については、内部管理用の情報となります。

実際の画像データにてついては、BLOB ストレージに直接保存を行います。

Azure BLOB ストレージについては、事前にファイルアップロード先のコンテナーは用意しておく必要がありますので、コンテナーについては、作成済みです。

今回は「upload」というコンテナーの配下にファイルを格納していきます。

image

それでは、データを登録するアクションを作っていきます。

今回は二つのデータソースに対して登録を行いますので、単純なフォームサブミットはできないと思いますので、フォームは使わず、

  • 「テキスト入力」(TextInput1)
  • 「画像の追加」(AddMediaWithImage1)
  • 「ボタン」(Button1)の

3 種類を追加したキャンバスを作っています。

(画像の追加についてはカメラにすることもできます)

image

データソースには、次のように、SQL Server と BLOB ストレージを追加しておきます。

(BLOB ストレージではなく、OneDrive を使用するという方法もあるかと思いますが)

image

ボタンで実行するアクションを設定してみます。

ちょっと長いですが、ボタンの「OnSelect」に次のような数式を設定します。

(BlobAccount: "<BLOB アカウント名>" については、適切な BLOB アカウント名に修正してください)

UpdateContext(
    {
        BlobAccount: "<BLOB アカウント名>",
        BlobContainer: "upload",
        BlobPrefix: Text(
            Now(),
            "[$-ja-JP]yyyymmddhhmmss"
        )
    }
);
UpdateContext(
    {
        FileName: Concatenate(
            BlobPrefix,
            "_",
            TextInput1.Text
        )
    }
);
AzureBlobStorage.CreateFile(
    BlobContainer,
    FileName,
    UploadedImage1.Image
);
UpdateContext(
    {
        UploadID: First(
            Search(
                AzureBlobStorage.ListFolderV2("upload").value,
                FileName,
                "Name"
            )
        ).Id,
        UploadPath: First(
            Search(
                AzureBlobStorage.ListFolderV2("upload").value,
                FileName,
                "Name"
            )
        ).Path
    }
);
Patch(
    '[dbo].[ImageDataTable]',
    Defaults('[dbo].[ImageDataTable]'),
    {
        file_name: FileName,
        file_path: UploadPath,
        file_id: UploadID,
        user_name: User().Email
    }
)

少し長めの記述ですが、実施している内容は次のようなものです。

  1. UpdateContext 関数を使用し、アップロード時に使用する設定をコンテキスト変数として設定

    (以降の数式で使いまわす可能性があるため)
  2. UpdateContext 関数を使用し、ファイル名のコンテキスト変数を設定

    (1. のコンテキスト変数の設定内では、同一のレコード内の変数が使用できないため、別数式として指定)
  3. BLOB ストレージにファイルをアップロード
  4. UploadContext 関数を使用し、アップロードしたファイルの、ID / パスの情報を取得

    (ID は画像のコントロールで、プライベートのコンテナー内のBLOB のファイルを表示する際に必要となります)
  5. Patch 関数を使用し、SQL Server にデータを登録

これで、ボタンをクリックした際に、BLOB ストレージにファイルのアップロードが行われ、SQL Server にもデータの登録を行うことができるアプリケーションの土台が完成です。

BLOB にアップロードする際にフォルダー名を指定して設定を行いたかったのですが、仮想的なフォルダー名の利用を実施すると、BLOB ストレージのコネクターから、うまくパスの情報が取得できていなかったようなので、ファイル名のプレフィックスとして、日付を指定するようにしています。

あとは、次の画像のように表示ができる、ギャラリーを作っておきます。

今回は「イメージ、タイトル、サブタイトル」のレイアウトを使用しており、データソースには、ベース情報が入っている SQL Server のテーブルを指定しています。

image

ポイントとなるのは、イメージの部分の Item 設定でしょうか。

SQL Server のレコードとしては、画像データは持っていませんので、画像自体は、BLOB ストレージから取得する必要があります。

そのため、イメージ部分の Image プロパティには、

AzureBlobStorage.GetFileContent(ThisItem.file_id)

を設定しています。

BLOB ストレージとの連携については、Upload files from PowerApps using the Azure Blob Storage connector で解説がされているのですが、この中に次のような記載があります。

Click on the first image in the gallery and set it to – AzureBlobStorage.GetFileContent(ThisItem.Id) or  "https://YourStorageAccountName.blob.core.windows.net" & ThisItem.Path **

** Change YourStorageAccountName to your actual store account name if you used that option.  This option is only if you set your blob storage to public access.  If your blob storage container is locked down (which is the default and recommended) then you can use the GetFileContent method.

該当ファイルの URL を指定することで、イメージを表示することもできるのですが、その場合 BLOB はパブリックアクセスに設定している必要があります。

プライベートアクセスをする場合は、該当のファイルの ID を指定する必要があるため、SQL Server にデータを登録する際に、少し手間をかけて、ファイル ID の取得等を実施していました。

これで、以下のようなアプリケーションが完了です。

  • 「テキストボックス」にファイル名を入力
  • 「画像の変更」でアップロードするファイルを選択
  • 「ボタン」をクリックすることで、ファイルのアップロードとレコードの登録が行われる
  • アップロードした内容がギャラリーに表示される

 

image

数式を複数記載することで、いろいろとできるものですね。

Written by masayuki.ozawa

8月 11th, 2018 at 1:52 pm

Leave a Reply

*