小ネタ:SharePoint のカスタムリスト(など)で Power Apps アプリのアイコンを表示する

Power Apps のアイコンは以下の要素で構成されています:

  • アイコン本体(画像)
  • 背景色

標準で選択できるアイコンは背景が透過されており、背景色との組合せが選べますが、その結果上記をニコイチで表現しないとアイコンは再現できないということになります(カスタムの透過画像を利用する場合も同様)。
そこで、アプリの情報を適当なデータソース(ここではSharePointのカスタムリスト)に持ってきた際にどうやって表示すべきか試してみました。

1. SharePoint でカスタムリストを作成する

こんな感じに作ります。

  • アプリのアイコン(画像) ★ここの書式設定をカスタマイズします★
  • アプリ名(タイトル:1行テキスト)
  • 説明(複数行テキスト)
  • Webリンク(ハイパーリンク)
  • 所有者(ユーザー)
  • 作成日(日付と時刻:標準)
  • 更新日(日付と時刻:標準)
  • アイコンの背景色(1行テキスト)
  • appIconURI(ハイパーリンク)

2. Power Automate でカスタムリストにアプリ情報を追加する

Power Apps as Admin コネクタを使います。こんな感じにフローを作りました。
※アイコンのURLは項目名をみて「Icon URI」かな?と思って追加したら Apply for each が二重になってしまい、ちゃんとJsonをみてみると、どうやらこれはコネクタのアイコンのようです…

3. SharePointの「列の書式設定」でアイコンを表現する

上述の「アプリのアイコン」列の書式設定は、こんな感じにjsonを書きます:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "[$appIconURI]"
      },
      "style": {
        "height": "40px",
        "width": "40px",
        "border-radius": "10%",
        "border-color": "gray",
        "background-color": "[$_x30a2__x30a4__x30b3__x30f3__x30]"
      }
    }
  ]
}

background-color のところがわかりにくいですが、これは「アイコンの背景色」の内部列名です(日本語で列を作成するとこのような内部名となります)。
※内部列名を確認したい場合は「リストの設定 > 対象の列」 を選択すると、URIに内部列名が「&Field=」の形式でついてきます。

jsonが書けたら、さっそくプレビューしてみましょう。

うまくいきましたね!

まとめ

  • Power Apps のアイコン情報は「画像のURI」と「背景色」で構成されている
  • 紛らわしい「Icon URI」はコネクタのアイコンなので注意
  • SharePointの「列の書式設定」はかなり自由度が高い

気づけば2020年ですね…
今年もなにかお役に立てるような Power Platform に関する投稿をしていきますので、何卒よろしくお願いいたします。