技術情報ブログ
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年生です。趣味は紅茶です。

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

Power Apps:キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針(1)

2023.02.22

今さら聞けないPower Automate:フローの種類とその違い(2)

2023.02.08

今さら聞けないPower Automate:フローの種類とその違い(1)

2023.01.25

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

2022.08.18

【2023年1月更新】Power Apps の実践的なノウハウ まとめ

2021.06.23

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

2
2021.07.14

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

3
2021.09.03

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

4
2020.10.02

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

5
2022.02.16

SharePointのビューに擬似的なアクセス制限をかける方法(1)

--------------------------------------------------->
モデル駆動型アプリPower AppsPower 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マルチテナントドロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術ItDX情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layout
PageTop
ページトップに戻る