PowerApps│すぐできるラベルコントロールの使い方と活用事例

こんにちは、あんこ先生です。

ラベルコントロール、文字だけ入れて使っていませんか？

もちろん、主たる機能は画面にデータを表示することなので間違ってはいません。

しかし、基本的なものだけでなく、便利な使い方があったら知りたくなりますよね。

そこで、この記事では、ラベルコントロールの使い方と主要プロパティを解説します。

さらに、すぐ使える活用事例をコード付きで紹介します。

実際にコードをコピペして、動作を確認してみましょう！

ラベルコントロールについて

ラベルコントロールとは│Label

画面上にテキスト、数値、日付、または通貨などのデータを表示するボックスです。

機能は単純明快、入力した内容や数式の結果をそのまま表示させます。

つまり、データ表示に特化したコントロールです。

ラベルコントロールの設置方法

挿入リボンから下記アイコンを選べばラベルコントロールが追加できます。

テキストプロパティの使い方│主要プロパティ

ラベルコントロールの主要プロパティはTextプロパティのみです。

機能として次の３点があります。

入力した文字の表示

• テキスト型は、二重引用符で囲むことでそのまま表示します。
• 数値の場合は二重引用符で囲まなくてもそのまま表示します。

数値を二重引用符で囲むとテキスト型として扱われるよ！
それでも数値だけならテキスト型のまま計算できるよ！

変数の値を表示

• 変数名を直接書き込めば認識します。
• テーブル型やレコード型は表示できません。

テーブル型やレコード型のデータを表示させるには、LookUp関数などで単一のフィールドを指定する必要があるよ！

数式の結果表示

• 関数の結果を表示します。
• Round（100/98,0）のように数式の結果も表示します。

テキスト型と数値を計算させると、エラーにはならずテキスト型を無視した結果が表示されるよ。

その他プロパティの使い方

※色やサイズ変更など他コントロールと共通したプロパティの説明は省いています。

行の高さ│LineHeight

• 行間のことです。数値を増やせば広がり、減らせば狭くなります。

高さの自動調整│AutoHeight

• オンにすると文字列の長さに応じて高さが変わります。

利用環境によってはデザインが崩れるため、使わない方がよいです。

オーバーフロー│Overflow

• オンにすると高さに収まりきらない部分をスクロールできるようになります。
• そもそもこうならないよう事前に幅や高さを調整すべきです。

ラベルコントロールの活用事例とサンプルコード

ブール型変数の値でフォントや背景の色を変える

• 入力もれや誤りなど、注意を惹きたいときに便利です。

ブール型変数の値でコントロールの表示有無を変える

• こちらも入力もれや誤りなど、注意を惹きたいときに便利です。
• フォームコントロールの注意文はレイアウトが崩れるのでこちらを活用したいですね。

文字数に応じてフォントサイズを変更する

• 文字数の差が大きい項目でオーバーフローを回避できます。

入力内容を判定した結果を表示する

• いわゆるエディットバリデーションチェックです。

失敗例から学ぶ│ラベルコントロール

別コントロールの上に被せてしまった

• ラベルコントロールの幅が無駄に大きく、テキスト入力コントロールの上に重なってしまったケースです。
• この場合、アプリでテキスト入力コントロールを押しても反応しません。
• なぜなら、押しているのは上にかぶさっているラベルコントロールだからです。
• 幅や高さはむやみに大きくしないようにしましょう！

テキスト入力コントロールに計算結果の表示のみさせたい場合、この仕様を逆手にとって、わざと被せて入力できなくすることが可能です。

まとめ

要点をまとめると次の３点です。

• ラベルコントロールは、入力した文字、変数の値、数式の結果を表示できる。
• 他プロパティと組み合わせることで、色や表示を制御できる。
• オーバーフローや配置には気を付けよう。

これであなたもラベルコントロールマスターです。

アイデアを活かして素敵なアプリを作成しましょう！

関連記事PowerApps│図解でわかる！コントロールごとの色設定

2022.04.15

関連記事PowerApps│本当に使う最低限抑えておくべきコントロール８選

2022.02.16

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ)