12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PowerAppsのリストアプリで添付ファイルの画像を表示する方法

Last updated at Posted at 2018-12-11

#作るもの
今回はSharePoint Onlineのカスタムリストを前提としたPowerAppsのリストアプリおよび、カスタムリストのカスタムフォームにおいて、添付ファイルの画像を表示する方法を紹介します。
これまではリストに添付ファイルの画像URL用列を用意し、そこにMicrosoft Flowを利用してURLを入れるという方法がよくつかわれていたと思いますが、今回の方法では、Flowを経由することなく、単純なギャラリーの応用で表示が可能です。

出発地点はこのような、タイトルと添付ファイルだけのカスタムリストにします。
customlist1.PNG
これを基にして、画像を表示させたサンプルは以下のとおりです。

result.png

方法はすべて共通ですが、それぞれ見ていきます。

#フォームでの画像表示
まずはPowerAppsでSharePointリストのフォームをカスタマイズします。
方法は単純で、フォームに空のギャラリーコントロールを1つ追加してください。その際のアイテムを以下のように設定します。(2019/03/20修正)

Gallery1.Items
DataCardValueN.Attachments (日本語サイトだと最後は 添付ファイル です)

image.png

※Nは利用しているフォームによって異なります。Attachments_DataCardの中を見てみてください。

また、ギャラリーコントロールには、メディア>画像を追加し、その画像のImageプロパティを以下のように指定します。

Image.Image
ThisItem.Value

image.png

以上で完了です。

#リストに表示させる方法
リストアプリにあるギャラリー(行)の中にも、これらの画像を表示することができます。リストアイテムの一覧の各行に、添付ファイルの画像サムネイルを表示させるイメージです。
これにもギャラリーを利用します。

ギャラリーを選択した状態で、ギャラリーを追加してください。
その際のItemsは以下を設定します。

Gallery2.Items
ThisItem.Attachments (日本語サイトだと最後は 添付ファイル です)

ここでは、親のギャラリーの各アイテムの添付ファイル群を、子ギャラリーのアイテムに設定しています。
ListApp2.PNG

リストのEdit formに表示する際には、SharePointリストのフォームと同様の手続きで表示可能です。
[追記]
上の画面でいうと、EditScreen, DetailScreenのほうに追加したギャラリーのItemsには、

BrowseGallery1.Selected.Attachments (日本語サイトだと最後は 添付ファイル です)

を設定することで表示可能です。
listdetail.PNG

以上、簡単ですが便利なリストのカスタマイズ方法でした!このように、アイテムの中で複数の子アイテムがあるような場合には、フォームやギャラリーにさらにギャラリーを追加することでうまく表示させてあげることができます。

12
10
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?