【PowerApps】SharePointへのファイルアップロード

API
はじめに

今回はSharePointへのファイルアップロードを実装してみます

Blob Storageへは接続だけ設定すればよいんですが、
SharePointやOneDriveはフローを使わないといけないみたいなので
(接続だけでもアップロードできなくはないんですが、保存先が固定されてしまうので)
こちらで紹介したいと思います。

YouTubeのShane Youngさんの動画を参考にしました。

添付ファイル

ファイルのインポートの専用ウィジェットは存在しないのですが
画像のインポートはあるのでとりあえず使ってみる

画像の追加を選択
インポート画面からファイルを選択できればいいのですが、

やはり残念ながら、画像ファイルしか選択できませんでした
一応拡張子の選択は変えられるのですが、ちょっとナンセンスですので
別の方法を試しましょう

Attachmentウィジェット

こんな風にすべてのファイルからデータを選択したいですね

まずは”編集フォーム”を呼び出しましょう

次に編集フォームのデータソースをSharePointのデータに設定します
接続は使わないなぜ?と思われるかもしれませんが、とりあえず何も考えず進めてみてください

結果がこちら!
添付ファイルという項目ができていますね
こちらが使えそうです、それ以外は必要ないので添付ファイルの部品だけ抽出しましょう

抽出の際、ロックを解除してあげましょう

抽出は簡単DataCardValueをコピーペーストで外に出してあげるだけです
あとはエラーマークが出るので、消してあげればOKです

ファイルを添付からインポートが可能になります

しかし、重大な問題が1点
抽出した添付ファイル部品はOnSelectがないんですね
これの何が問題かというと、

ボタンを押したときにファイルのインポートができる

という機能を考えるとします
この場合、ボタンを押したときにSelectを使ってインポート機能を呼び出す必要があるので
必然的にインポート機能はOnSelectがなければなりません

残念ながら、OnSelectはないので工夫する必要があります。

添付ファイルの扱い

まずは部品名をAttachに変えます

実装の前にまずはAttachmentの中身を見てみます
続いてギャラリーを追加して、データソースをAttach.Attachmentに設定しましょう

ではファイルをインポートしてみます

Attach.Attachmentの中身はコレクションで確認してもよいのですが
nameとValueだけで構成されています

ファイルが画像の場合、画像ウィジェットにThisItem.Valueを設定すると
画像が表示されます
つまりファイルの中身はValueということになりますね

このようにインポートしたファイルデータは
Attach.Attachmentから簡単に取り出すことができます
続いてこの取り出したデータをSharePointにアップロードする処理を見ていきます

SharePointアップロード

早速フローを組んでみましょう

①PowerAppsトリガー
②JSONの解析
③SharePointコネクタのファイルの作成を追加します

で設定します
直でデータを渡してもよいのですが、”(ダブルクォーテーション)の除去が必要なようです
JSONデータにして渡すとそのような考慮は必要ないのでこちらを推奨します

↓複数取り込みたい場合はこちらを参照
https://www.spguides.com/powerapps-upload-file-to-sharepoint-document-library/

あとはファイル名には動的な値を設定。
ファイルコンテンツにdataUriToBinar()という特殊な関数を使って、こちらも動的な値を設定してあげましょう
[動的なコンテンツの追加]→[式]で以下の式を入力します

dataUriToBinary(body(‘JSON_の解析’)?[‘data’])

これは画面で加工したDataUriという型のデータをバイナリに置き換えるのに必要な処理です
詳しくは調べてみてください

これでフローは完成です。

続いて、画面に戻ります
作成したフローを呼び出してあげます

フローの呼び出しで最も注意する必要があるのは
呼び出す前に、OnSelect、OnChangeなどがある場合は呼び出したフローに書き換わってしまうことです

フローの呼び出し、参照のやり直しなどは
変更されても問題のないラベルやテキストなどにフォーカスを当てておくとよいです

ではOnAddFileの処理を書いていきます

// Attachment OnAddFile
// アップロードしたデータを取得
UpdateContext({varImportFile:Last(Gallery1.AllItems)});
// Jsonに加工
UpdateContext({varSendData:
    // フローに渡すDataUriを作成
    JSON(
        {
            title:varImportFile.Name,
            data:varImportFile.Image1.Image
        },JSONFormat.IncludeBinaryData
        )
});
// フローにDataUriを渡す
Upload_SharePoint.Run(varSendData);
Notify("アップロードが完了しました。", NotificationType.Information, 4000)

かなりすっきりしていますがこれだけでOKです
ではアップロードしてみましょう

アップロードができました!

応用

以下のものにTransparentを設定して色を透明にしてみてください

・ItemHoverFill
・ItemHoverColor
・ItemFill
・ItemColor
・ItemFill
・Color
・BorderColor
・HoverColor
・Fill

HoverFillだけ好きな色に設定しましょう
おすすめはボタンの上をホバーしたときに割と自然なRGBA(0, 0, 0, 0.2)ですね

あとは

①ボタンを配置
②Attachの位置を調整
Reset(Attach);をOnAddFileの処理に追加

を行います。結果がこちら

最後ぐだりました、、
自然にボタンを押す動作でファイルのインポート、アップロードができていますね

下のギャラリーがアップロード後消えているのは
Reset(Attach);の処理です
これを実施することでAttachにファイルが際限なく増え続けるのを防ぐと同時に
ファイル添付のクリックの位置を固定する役割もこなしています

まとめ

PowerAppsは工夫次第で化ける!かも。

]]>

コメント

タイトルとURLをコピーしました