キャンバスアプリのコントロール数を抑えたい

Power Appsは簡単にアプリケーションが作成できる魅力的なサービスです。
サクっとできてしまうため、アイディアが出ればでるほど、機能をモリモリにしてしまうこともしばしば。

しかしながら、コントロール数が多くなってしまうことは、様々な意味で課題があります。
メンテナンスが非常に大変になることももちろんですが、コントロール数には制限があったり、1つのアプリに500を超えるコントロールを追加するような状態は、望ましい状態ではありません。

コントロール数が増えていくにつれて、Power Appsのパフォーマンスも低下し、UXにも影響がでます。可能であれば、最小限のパーツに揃えて構築していくほうが望ましいでしょう。

HTMLテキストを活用する

個人的に良く遭遇するシーンが、表形式のコントロールの追加です。
表データってニーズが高いんですよね。（これ以上は言わない）

テーブルの表現は、Power Appsのコントロールに存在しています。

しかし、クラシックコントロールのデータテーブルは、コンテナーへ格納しづらかったり、モダンコントロールは、プレビュー機能であることから、なかなか実装に踏み切りづらいときもあります。

使えるなら使いたいのですが、本当に悩みます。

作者の個人的なアプリ作成では、モダンコントロールのテーブル一択です。
デザインも洗練され、機能も魅力的。

モダンコントロールのテーブルが如何に素敵なコントロールか、そちらは下記の記事を紹介させていただきます🐟

ギャラリーで表を描画する🧐

垂直ギャラリーに、テキストラベルを整頓してテーブルらしく描画することもできます。
この手法は、テーブルの列に応じて、テキストラベルが必要で、あまりスタイリッシュとは言い難いでしょう。

前述で書いたような、コントロール数がかさむアンチパターンと思っています。

たった4列でもコントロール数が10個と多い・・・💦

作るのも正直手間です。

HTML テキストコントロールを使う

ここで登場するコントロールが、HTML テキストコントロールです。

HTML 文字列で一つのコントロールから表を描画することができます。
文字列をどう作っていくか、そのアプローチが肝になるので、

Power Automateを経由して作成する
Power Appsの中で作成する

上記の二パターンを考えてみました。

Power Automateのデータ操作から文字列を取得する

私のブログで登場する架空の従業員リスト(SharePoint Lists)を使って検証します。

この中から、UserId（タイトル列）、user、department,postを使って、テーブルの元データを作成します。

列名・内部名のひどさには、目をつむっていただけると幸いです🙇

Items

ForAll(
    Users, // 元のデータソースの名前
    {
        Name: user.DisplayName, // ユーザー列からDisplayNameのみ抽出
        Title: タイトル,
        Department: department, // 選択肢列から値のみ抽出
        Post: post.Value
    }
)

このデータをJSON 関数でPower Automateに渡して、データ操作アクションを経由します。

JSON の解析とJSON 関数のコンボは、もはや御用達ですね。

Power AppsからJSON文字列を受け取り

JSON の解析とJSON 関数を実行

Schema

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "Department": {
                "type": [
                    "string",
                    "null"
                ]
            },
            "Name": {
                "type": [
                    "string",
                    "null"
                ]
            },
            "Post": {
                "type": [
                    "string",
                    "null"
                ]
            },
            "Title": {
                "type": [
                    "string",
                    "null"
                ]
            }
        },
        "required": [
            "Department",
            "Name",
            "Post",
            "Title"
        ]
    }
}

null対策を忘れずに！

body('Parse_JSON')をもとに、HTMLテーブルを作成。
列を明示的に指定します。

コードビュー

{
  "type": "Table",
  "inputs": {
    "from": "@body('Parse_JSON')",
    "format": "HTML",
    "columns": [
      {
        "header": "タイトル",
        "value": "@item()['Title']"
      },
      {
        "header": "Name",
        "value": "@item()['Name']"
      },
      {
        "header": "Department",
        "value": "@item()['Department']"
      },
      {
        "header": "Post",
        "value": "@item()['Post']"
      }
    ]
  },
  "runAfter": {
    "Parse_JSON": [
      "Succeeded"
    ]
  },
  "metadata": {
    "operationMetadataId": "90accf8f-b3e8-4d8d-8098-4f1a76f39810"
  }
}

結果をbody('Create_HTML_table')としてPower Appsに戻します。

Power Appsではボタンコントロールに下記を仕込みます。

OnSelect

UpdateContext(
    {
        Response: GetHTML.Run(
            JSON(
                ForAll(
                    Users,
                    {
                        Name: user.DisplayName,
                        Title: タイトル,
                        Department: department,
                        Post: post.Value
                    }
                )
            )
        ).response
    }
)

上記の式でResponseにHTMLが反映されます。

HTML テキストコントロールのHtmlTextはResponseです。
罫線がないですが、表現はされます。Power Automate上でサクっと作れるのは嬉しいところ。

<table border='1'>で罫線を表示することはできますが、どこで処理するかは悩みどころ。

Substitute 関数で下記のようにタグを書き換えると、罫線の追加はできます。

HtmlText

Substitute(Response,"<table>","<table border='1' cellpadding='10' cellspacing='0'>")

Power Appsの関数で工夫する

そもそもこれはPower Automateが必要な動作なのか・・・！！
文字列の加工なので、Power Fxの範疇で出来そうです。

テーブルデータをコレクションに格納する
コンテキスト変数にヘッダーとボディを格納する
HTML テキストコントロールに設定する

上記のアプローチを試みてみます。

ヘッダーとボディの作成

// 1. テーブル データをコレクションに格納する
ClearCollect(
    colHTML,
    ForAll(
        Users,
        {
            Name: user.DisplayName,
            Title: タイトル,
            Department: department,
            Post: post.Value
        }
    )
);

// コンテキスト変数にヘッダーとボディを格納する
UpdateContext(
    {
        Header: "<tr><th>Title</th><th>Name</th><th>Department</th><th>Post</th></tr>",
        Body: Concat(
        colHTML,
            $"<tr><td>{Name}</td><td>{Title}</td><td>{Department}</td><td>{Post}</td></tr>"
        )
    }
);

$（文字列補間）は最近ブログで紹介させていただきました！
式がスッキリして良いですね！

Concat 関数と組み合わせて、必要な部分にデータを挿入しています。

HTML テキストコントロールに下記を挿入すると、Power Automateで作成できた同じ表データが作成できます！

HTMLText

$"<table border='1' cellpadding='10' cellspacing='0'>{Header}{Body}</table>"

また$（文字列補間）が登場しましたね！Concat 関数との組み合わせでバリューを発揮しそうな雰囲気がまだまだありそうです！

おわりに

自分のこだわりだったり、ユーザーの要望を反映していくと、コントロール数はどうしても増えてしまう傾向にあります。
また作ることも非常に手間だったりと、ネガティブな影響が大きいです。

HTMLとなるとノーコード・ローコードから離れそうな印象もありますが、活用することで、コントロール数をかなり抑えられる恩恵もあります。

ほかにもTipsがありますので、今後のブログにもご期待ください！