キャンバス アプリのコントロール数を抑えたい
Power Apps
は簡単にアプリケーションが作成できる魅力的なサービスです。
サクっとできてしまうため、アイディアが出ればでるほど、機能をモリモリにしてしまうこともしばしば。
しかしながら、コントロール数が多くなってしまうことは、様々な意味で課題があります。
メンテナンスが非常に大変になることももちろんですが、コントロール数には制限があったり、1つのアプリに500を超えるコントロールを追加するような状態は、望ましい状態ではありません。
コントロール数が増えていくにつれて、Power Appsのパフォーマンスも低下し、UXにも影響がでます。可能であれば、最小限のパーツに揃えて構築していくほうが望ましいでしょう。
HTMLテキストを活用する
個人的に良く遭遇するシーンが、表形式
のコントロールの追加です。
表データってニーズが高いんですよね。(これ以上は言わない)
テーブルの表現は、Power Appsのコントロールに存在しています。
しかし、クラシック コントロールのデータ テーブルは、コンテナーへ格納しづらかったり、モダン コントロールは、プレビュー機能であることから、なかなか実装に踏み切りづらいときもあります。
使えるなら使いたいのですが、本当に悩みます。
作者の個人的なアプリ作成では、モダン コントロールのテーブル一択です。
デザインも洗練され、機能も魅力的。
モダン コントロールのテーブルが如何に素敵なコントロールか、そちらは下記の記事を紹介させていただきます🐟
ギャラリーで表を描画する🧐
垂直ギャラリー
に、テキスト ラベル
を整頓してテーブルらしく描画することもできます。
この手法は、テーブルの列に応じて、テキスト ラベル
が必要で、あまりスタイリッシュとは言い難いでしょう。
前述で書いたような、コントロール数がかさむアンチパターンと思っています。
たった4列でもコントロール数が10個と多い・・・💦
作るのも正直手間です。
HTML テキスト コントロールを使う
ここで登場するコントロールが、HTML テキスト コントロールです。
HTML 文字列で一つのコントロールから表を描画することができます。
文字列をどう作っていくか、そのアプローチが肝になるので、
上記の二パターンを考えてみました。
Power Automateのデータ操作から文字列を取得する
私のブログで登場する架空の従業員リスト(SharePoint Lists)を使って検証します。
この中から、UserId(タイトル列)
、user
、department
,post
を使って、テーブルの元データを作成します。
列名・内部名のひどさには、目をつむっていただけると幸いです🙇
ForAll(
Users, // 元のデータソースの名前
{
Name: user.DisplayName, // ユーザー列からDisplayNameのみ抽出
Title: タイトル,
Department: department, // 選択肢列から値のみ抽出
Post: post.Value
}
)
このデータをJSON 関数でPower Automateに渡して、データ操作アクションを経由します。
JSON の解析とJSON 関数のコンボは、もはや御用達ですね。
Power AppsからJSON文字列を受け取り
{
"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
ではボタン コントロール
に下記を仕込みます。
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 関数で下記のようにタグを書き換えると、罫線の追加はできます。
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で作成できた同じ表データが作成できます!
$"<table border='1' cellpadding='10' cellspacing='0'>{Header}{Body}</table>"
また$(文字列補間)が登場しましたね!Concat 関数との組み合わせでバリューを発揮しそうな雰囲気がまだまだありそうです!
おわりに
自分のこだわりだったり、ユーザーの要望を反映していくと、コントロール数はどうしても増えてしまう傾向にあります。
また作ることも非常に手間だったりと、ネガティブな影響が大きいです。
HTML
となるとノーコード・ローコードから離れそうな印象もありますが、活用することで、コントロール数をかなり抑えられる恩恵もあります。
ほかにもTips
がありますので、今後のブログにもご期待ください!