Power Appsにて、ギャラリー内に画像を表示するのにハマったので残しておきます。
やりたかったこと
- Power Appsのキャンバスアプリに配置したGalleryにて、データごとに画像を表示したい
- このギャラリーのデータソースは、CDS(Common Data Service)に作成した以下のようなエンティティ
| id | product_name |
| 1 | 牛乳 |
| 2 | 肉 |
| 3 | 野菜 |
| 4 | 卵 |
（Common Data Serviceは、名称が「Dataflex Pro」に変更されたようです。）
- 画像ファイルは、「メディア」タブよりアップロード済み
上の例で言えば、牛乳のデータであれば牛乳の画像（milk.jpg）、肉のデータであれば肉の画像（meat.jpg）を表示したい
- データが増えた際に、コードの修正は最小限としたい
例えば、ギャラリー内の画像コントロールのImageプロパティに、以下のように記述することを考えます。
Switch(ThisItem.product_name, "牛乳", milk, "肉", meat, "野菜", vegetables, "卵", eggs)データの内容に応じて、表示する画像を切り替えるやり方です。
これでもやりたいことは実現できるのですが、製品データが増えた場合、分岐処理を追加する対応が必要になります。
これはできればやりたくない。。
ギャラリー内の画像をデータによって切り替える方法
1. 製品データに、画像パスを含める
| id | product_name | img_path |
| 1 | 牛乳 | appres://resources/milk |
| 2 | 肉 | appres://resources/meat |
| 3 | 野菜 | appres://resources/vegetables |
| 4 | 卵 | appres://resources/eggs |
メディアタブにてアップロードしたファイルへのパスは、以下の記述で指定できます。
appres://resources/ファイル名注意点として、ファイルの拡張子は含めないことです。拡張子を含めてしまうとパスがうまく認識されませんでした。
2. ギャラリー内の画像コントロールのImageプロパティを以下に設定する
ThisItem.img_path以上で、リストが正しく表示されました。
3. ダミー画面に画像を追加する
これまでの対応で、デバッグモードではうまく表示されるのですが、公開したアプリを起動すると画像が表示されません。
調査したところ、こちらに同じ事象を質問している投稿を見つけました。
I faced the same issue and the only solution seems to creat that dummy screen and load all the images there.
https://powerusers.microsoft.com/t5/Building-Power-Apps/Image-resource-not-loading-with-app/td-p/90734
ダミー画面を追加して全イメージをロードする方法しかない、とのこと。
半信半疑でしたが、新規画面を追加してそこに全部の画像を追加したところ、本番アプリでも画像が表示されるようになりました！
まだ理屈は理解できてないですが、とりあえずできたのでよしとします。
コメント