技術情報ブログ
Power Platform
2021.12.22

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

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の追記は随所で使えますので、こちらも参考にしてください。

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

 

 

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

池内佑哉

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

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

非エンジニア【(元)自治体職員】がローコード開発をして気が付いたこと コーディング規約とPower Platformプレミアムサンプルアプリ集

2024.05.01

Power Apps・Power Automateの勉強方法(2)

2024.04.17

Power Apps・Power Automateの勉強方法(1)

2024.04.03

非エンジニア【(元)自治体職員】が半年間ローコード開発をしてみたら

2024.03.27

Power Automateのベストプラクティス・アンチパターン(5)【Apply to each×コンカレンシー×変数の設定はNG】

モデル駆動型アプリ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レスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownviewビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術It情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layoutデータ行の制限引き継ぎ退職所有者を変更異動LoopMicrosoftdesignJSONデザインtemplateテンプレート運用選択肢列参照列ChatGPTOpenAIオープンAIチャットGPTgalleryギャラリースクロールコンテナショートカットキーshortcut keyconcat関数文字制限フロー実行開発環境環境本番環境ライセンス環境構築手順pipelineCI/CDパイプラインDevOpsMicrosoft 365簡易在庫管理時間外通知ファイルフィルター クエリドキュメント ライブラリfilter querysortソートmultiple item複数項目シェアポイント便利機能カレンダーCalendarTeamsローコード開発非エンジニア体験談勉強内製化
PageTop
ページトップに戻る