1. yamad365

    Posted

    yamad365
Changes in title
+SPOカスタムリストの添付ファイルを Power Apps で一覧化する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,75 @@
+SharePoint Online(以降、SPO)でポータルサイトなど作ったりしますよね?
+カスタムリストで情報の収集や発信したりしますよね?
+SPO のホームページに、そのリストを View 指定で配置したりしますよね?
+
+そんな時に、チョイチョイ要望もらうコトを Power Apps でアレする回です。
+
+# 説明用 SPO サイトのホーム
+こんな感じです。今回はリストの配置が論点なので、その他は割愛!
+![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/ca9bf46e-e784-bd82-dd83-ffb148ac5472.png)
+このページを見た方、こんな事言われた経験ありませんか?
+または「これってできないのだろうか?」と思ったことありませんか?
+
+**「添付ファイルを一覧で表示できないの?」**
+
+下記のようにクリップマークになっている箇所を、添付ファイルされているファイル名を一覧で表示したいってコトですね。
+![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/e8225b8e-5d82-21b7-182b-a99cff6799da.png)
+デフォルトだとできないんですよね、残念。
+
+# Power Apps で解決してみる
+SPO で頑張らずに、Power Apps でアプリ作って解決する方法もあるかな、と当方は思ったのです。解決案を2つ思いついたので忘れないように記事にしておく次第なのです。
+
+## Gallery in Gallery
+1つ目の案は、ギャラリーコントロールの入れ子です。
+![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/b6d0aa36-66c3-0238-7f3a-a7230e38c0fa.png)
+上イメージの場合、Gallery1 を追加した後で、その1行目を編集モードにした状態でギャラリーコントロールをさらに追加すれば OK です。入れ子になった Gallery2 の Items プロパティはラベルコントロール等で「ThisItem.添付ファイル」を表示してやれば完了です。
+ダウンロード等のアクションが必要な場合は Launch 関数などで実装してください。
+
+[Power Apps の Launch および Param 関数](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-param?WT.mc_id=BA-MVP-5004053#launch)
+
+素直にギャラリーコントロールの入れ子なので分かりやすいかな、と思います。
+ちなみに、1年ほど前はギャラリーコントロールの入れ子をする時はコピペを駆使する必要があった記憶があるんですが、記事を投稿するために試したら挿入メニューバーからヌルっと追加できました。知らないところで進化は進んでいるんですね。
+
+## Gallery in Attachments
+2つ目の案はフォームコントロールのディスプレイフォームから”『添付ファイルコントロール』を移植する”方法です。
+![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/65b57ae0-ff15-6809-113f-884ec7887798.png)
+ちなみに『添付ファイルコントロール』は記事投稿時点では挿入メニューバーからは追加できません。少々トリッキー(?)な手段を用います。
+
+### 『添付ファイルコントロール』移植方法
+トリッキーと言っても、難しい手順ではありません。
+
+1. 新しい Screen を追加する
+2. 追加した Screen へ「ディスプレイ」フォームコントロールを追加する
+3. [添付ファイル]が表示されるようにフォームコントロールを設定する
+3. Gallery1 等で選択されているアイテムを表示するよう設定する(ここは割愛可能)
+4. 表示された内容から『添付ファイルコントロール』のみをコピーする
+5. 追加したい Gallery コントロールへペースト
+6. 色々とエラーになるので修正する+[Items]プロパティへ”ThisItem.添付ファイル”を指定
+
+以上、終了です。エラーは状況によって多少変わる箇所があると思いますので詳細は割愛いたします。是非チャレンジしてお試しください。参考までに、コピーしているイメージをつけておきます。
+![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/8f75a526-8bb4-3f69-e3df-cfd089b70732.png)
+この添付ファイルを操作できるコントロールは、表示のみでなく編集モードでも活躍できるのですが、その話題はまた今度にします。
+
+### 動作イメージ
+『添付ファイルコントロール』移植のメリットは、添付ファイルのダウンロードや表示のアクションを自作しなくても済む点です。
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> Gallery in Attachments <a href="https://t.co/jGU8NGnf3G">pic.twitter.com/jGU8NGnf3G</a></p>&mdash; やま (Yama) (@yamad365) <a href="https://twitter.com/yamad365/status/1363795605571604480?ref_src=twsrc%5Etfw">February 22, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+『添付ファイルコントロール』のItemsプロパティ配下にある[Value]プロパティを変更することで、ダウンロードと表示を切り替えることが可能です。
+
+・Value の場合はダウンロード(動画前半)
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/93ee49df-1c19-e82c-7b43-83953f7fd573.png)
+
+・AbsoluteUri の場合は直接表示(動画後半)になるはず
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/a1353f9f-14b3-3a17-c66e-8ce10d3e0255.png)
+表示のアクションはブラウザーによって動作が異なる可能性が高いです。また、空白のタブが表示されてしまうのは現状の仕様ぽいですね。ちょっとカッコ悪いですが割り切るポイントだと思ってます。
+
+# まとめ
+- ギャラリーコントロールは入れ子にできる
+- 『添付ファイルコントロール』はメニューバーにない
+ - フォームコントロールからパクッてくればOK!
+
+このような Power Apps を SPO へ埋め込めば、冒頭の「添付ファイルの一覧表示したい」という目的を達成することが可能です。また、アプリで提供可能なのでモバイル端末からもシームレスに利用できる点はメリットかな?と個人的に考えております。
+
+それでは、皆さま。素晴らしい Power Platform Life を!
+