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




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

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

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

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

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

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

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

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

ラベルコントロール

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

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

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

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


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

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

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

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

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


入力した文字の表示

Textプロパティ
“ラベルコントロール”

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

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


変数の値を表示

Textプロパティ
変数名 //サンプルは_OnOffっていうブール型の変数だよ

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

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


数式の結果表示

Textプロパティ
If(_OnOff,”おはよう”,”おやすみ”) //変数_OnOffがTrueなので”おはよう”を表示

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

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

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

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


行の高さ│LineHeight

ラベルコントロール
  • 行間のことです。数値を増やせば広がり、減らせば狭くなります。


高さの自動調整│AutoHeight

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

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

オーバーフロー│Overflow

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

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


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

Colorプロパティ
If(_OnOff,RGBA(255,255,255, 1),RGBA(0, 0, 0, 1)) //白と赤

Fillプロパティ
If(_OnOff,RGBA(255, 0, 0, 1),RGBA(255,255,255, 1)) //赤と白

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


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

Visibleプロパティ
_OnOff //Trueなら表示、Falseなら非表示

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


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

Sizeプロパティ
Switch(Round(Len(Self.Text)/10,1),1,12,2,10,3,8) //10文字ごとに2pt下げる

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


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

Textプロパティ
If(IsNumeric(TextInput01.Text) || IsBlank(TextInput01.Text),
“”,”数値以外が入力されています”)

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

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


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

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

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

まとめ

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

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


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

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

アイキャッチ
アイキャッチ-コントロール

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

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

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

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

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

よろしくお願いします。

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



コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。