技術情報ブログ
Power Platform
2021.12.22

Power Apps の添付ファイルをダウンロードすることなくブラウザ上で閲覧する方法

こんにちは。アーティサン株式会社の池内です。

Power Appsで入力フォームを作成する際、DataCardを利用すると簡単に入力項目を並べることができて便利ですね。
特に、添付ファイルのDataCardを挿入するだけでファイル添付機能をアプリに導入することができる点は良くできています。

しかし、登録した添付ファイルを Power Apps から開こうとすると、下の画像のようにファイルのダウンロードが始まります。

Power Appsキャンバスアプリ上で添付ファイルをクリックした時の動作
Power Apps キャンバスアプリ上で添付ファイルをクリックした時の動作

ファイルを開くたびにダウンロードしていては、後でファイルを削除する手間が生じるため不便です。

本記事では、添付ファイルをダウンロードすることなくブラウザ上で閲覧する方法を解説します。

 

実装方法(添付ファイルをブラウザ上で閲覧)

以下の手順で機能を実装します。

次項より順を追って説明します。

 

添付ファイルの DataCard 直下にギャラリーを配置する

まず、添付ファイル一覧を作成したい画面(本記事では DetailScreen1 を選択)を開き、
ツールバーから挿入ギャラリーを選択します。
ギャラリーが、 DetailScreen1 直下に配置されました。

続いてこのギャラリーを 添付ファイル_DataCard2 内に移動させます。
方法としてはギャラリーを切り取り、ツリービューにある 添付ファイル_DataCard2
三点リーダをクリック貼り付けを行います。
(もし 添付ファイル_DataCard2 がない場合、フォームのフィールドの編集から追加してください。)

Power Apps_Gallary1の移動前
Gallary1の移動前(Gallary1がDataForm1と同じレイヤーに配置されている)
Power Apps_Gallary1の移動後
Gallary1の移動後(Gallary1が添付ファイル_DataCard2直下に配置された)

ギャラリーを挿入できたら、ギャラリーの表示を調整しましょう。
SubTitle パーツと右側の NextArrow パーツは削除します。

その後、ギャラリーの項目を添付ファイルにするために、Items プロパティにThisItem.添付ファイルを代入してください。
最後に、ラベルのtext プロパティにThisItem.DisplayNameを代入すると、添付ファイルの名前が表示されます。

Power Apps_添付ファイルの DataCard 直下に作成したギャラリー
作成したギャラリー

 

ギャラリーのOnSelect プロパティに Office Online を呼び出す数式を埋め込む

続いて、ギャラリーをクリックしたとき、ブラウザ上で添付ファイルを開く仕組みを実装します。

ギャラリーのOnSelectプロパティに以下の数式を代入してください。

Launch(ThisItem.AbsoluteUri & "?web=1")

Launch関数は、Webページを立ち上げるための関数です。

ThisItem.AbsoluteUriは添付ファイルのURIです。
ここにURLパラメータとして?web=1を追記することで、添付ファイルをOffice Onlineで開くように指定します。

ただし、今の状態でギャラリーをクリックしてもOnSelectが実行されません。
これは、フォーム内の DataCard は、 FormModeView の場合OnSelect が動作しない仕様だからです。

今回の場合、DetaiForm1 はディスプレイフォームを用いているため、FomeMode を View から変更することができません。

そこで、添付ファイル_DataCard2 DisplayModeEdit に変更することで、OnSelectを動作させるよう修正します。

Power Apps_DataCard プロパティを修正
DataCard プロパティを修正

 

拡張子に応じたアイコンを表示する

これまでの操作で目的は達成できましたが、見た目をより良くするためにもう一工夫します。
ファイルの種類をひと目で把握できるように、拡張子に応じたアイコンを表示させましょう。

まず、 Power Apps にアイコン用の画像を登録します。左端のメディアをクリックし、アップロードから画像を登録してください。

Power Apps_アイコン画像をアップロードすることで、その画像をPower Apps内に配置できるようになる
画像をアップロードすることで、その画像をPower Apps内に配置できるようになる

その後、ギャラリーの画像を選択し、 Image プロパティに以下の数式を代入します。

Switch(
    Last(Split(ThisItem.DisplayName, "." )).Result,
    "xlsx", Excel,
    "docx", Word,
    "pptx", PowerPoint,
    "pdf",PDF
)

別途アイコンを用意し、数式に追記することで、他の拡張子に対応することも可能です。

これにて完成です。添付ファイルをクリックするとOffice Onlineが起動し、ブラウザ上で中身を閲覧できるようになりました。

Power Apps_Chromeにて Office Online が起動
Chromeにて Office Online が起動

 

あとがき

本記事では、Power Apps の添付ファイルをダウンロードすることなくブラウザ上で閲覧する方法をご紹介しました。

フォームやギャラリーなどを含む様々なコントロールを組み合わせて機能を実現することは、Power Apps の開発の醍醐味の1つです。
ご紹介した内容を再現するだけでなく、それを応用して自分に必要な機能の実装に繋げていただければ幸いです。

また、Officeファイルがダウンロードされる仕様は Power Apps だけでなく、SharePoint など他のサービスでも発生することがあります。?web=1の追記は随所で使えますので、こちらも参考にしてください。

最後までお読みいただき、ありがとうございました。

 

 

 

 

弊社ではPower Platform(Power AppsやPower Automateなど)を用いてお客様の業務を自動化するご支援を数多く承っております。

業務の中で、「普段手動でやっている業務を自動化できないか」というような疑問がある場合には、お気軽にアーティサン株式会社までお問い合わせください。

Azure SQL DatabaseやPower AppsとSharePointなどの開発担当:池内佑哉

池内佑哉

IT2年生です。趣味は紅茶です。

シェアする
記事カテゴリ
最新記事
2022.08.03

【22年8月更新】Power Automate 初心者 ~ 中級者 向けロードマップ

2022.08.01

Excel の最新バージョン(2206(ビルド 15330.20264))で VBA が動かなくなる問題(オートメーションエラーです。エラーを特定できません)が発生しています。

2022.07.20

Power Automate 設計・構築時のTips集

人気記事ランキング
1
2020.10.02

世界に広がる Power Apps「モデル駆動型アプリ」のココがスゴイ!【第1回】

2
2021.07.14

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第2回】フロー作成でエラー発生!

3
2021.06.23

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第1回】4つのシーンごとに手法を比較、その最適解とは?

4
2021.09.03

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第8回】トリガーの条件の指定方法

5
2021.08.11

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第5回】ExcelファイルIDを動的取得

モデル駆動型アプリPower AppsSaaSMaaSPower PlatformSharePointExcelPower AutomateC#attributevalidationローコードAngularAccessInfoPathMatTableAngular Materialデータ構造SortByColumns関数TypeScriptHTMLEF CoreマイグレーションFramework CoreAttribute directivesO/Rマッパーazure sql databaseCase式HTTP RequestCSSxUnit.Net Core 3.1VSCode.Net Core Test ExplorerDataverse for Teamsitem関数Google MapsMarker ClustererRANK()関数Dynamics 365 SalesMicrosoft Translatorマーカークラスタリングライブラリtailwindcssマルチテナントmulti tenant乗降客カウンタードロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブDynamics 365入門初心者中級者キャンバスアプリDatePickerDropdownviewビューアクセス制限ノーコードapproval承認リマインドSetForAllUpdateContextロードマップ技術ItDXノウハウ情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイルmultiple attachment filesmailEmail承認フローtags: [SharePointimportフォームformエクスポートexportインポート]インポートカスタマイズcomponent[Power AppsダイアログコンポーネントdialogTips新機能変数検索security groupMicrosoft 365グループセキュリティグループMicrosoft 365 group一覧取得送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restore
PageTop
ページトップに戻る