PowerApps│すぐできるテキスト入力コントロールの使い方と活用事例

アイキャッチ




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

テキスト入力コントロール、初期設定のまま使っていませんか?

はい、わたしがそのひとりです。

これではダメだと調べてみると、たくさん便利な使い方がありました。

例えば、行間を調整したり、外枠の角を丸めたりできます。

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

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

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

テキスト入力コントロールについて

テキスト入力コントロール

テキスト入力コントロールとは│TextInput

ユーザーが任意のテキストや数値を入力できるボックスです。

機能はユーザーにデータを入力させる、データを表示させる、のふたつです。

つまり、ユーザーにデータを入力させることに特化したコントロールです。


テキスト入力コントロールの設置方法

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

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

テキスト入力コントロールの主要プロパティは、次の2点です。

  1. ユーザーが変更する前の初期値を設定するDefaultプロパティ
  2. コントロールに表示またはユーザーが入力した結果(戻り値)のTextプロパティ

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

設定または入力した文字の表示

Defaultプロパティ
“テキスト入力コントロール”

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

数値を二重引用符で囲むとテキスト型として扱われるよ!


変数の値を表示

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

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

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


数式の結果表示

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

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

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


戻り値

テキスト入力コントロールの戻り値はTextプロパティです。

Label.Textプロパティ
TextInputxx.Text //ラベルコントロールに表示する場合


Patch関数
Patch(detasauce,LookUp(detasauce,ID=xxx),
{Name:TextInputxx.Text}) //データソースに書き込む場合

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

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


行の高さ│LineHeight

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


最大の長さ│MaxLength

テキスト入力コントロール
  • 設定した数以上の文字を入力できなくします。
  • 電話番号など固定長のデータ入力に適しています。

クリアすると無制限、0だと何も入力できません。

クリアボタン│Clear

  • オンにすると右側に×印が付き、それを押すと入力内容がクリアされます。
  • 入力内容のクリアなので初期値には戻りません。

モバイル環境だと押しにくいです。初期値に戻したい場合も含め、次のReset関数を使った方がよいです。


初期値に戻す│Reset

TextInputxx.Resetプロパティ
True //FalseのままだとReset関数が機能しません

Iconxx.OnSelectプロパティ
Reset(TextInputxx) //()で囲んだコントロールを初期値に戻します

  • Reset関数で入力した内容を初期値に戻します。
  • あらかじめ、ResetプロパティTrueにしておく必要があります。

クリアボタンと比べ、非常に押しやすいです。
初期値を空にしておけば、機能は同じになります。

境界半径│RadiusTopLeft

テキスト入力コントロール
  • 入力した数値分、角が丸くなります。高さと同じ値で画像のようになります。
  • 機能は変わりませんが、かわいくなります。


モード│Mode

  • 改行できない単一行、改行できる複数行、入力した値が隠されるパスワードの3つがあります。
  • 用途に合わせて設定しましょう。

複数行を選択してもリストのデータ型が1行テキストの場合は単一行として更新されます。
改行したところは改行コードが入ります。

テキスト入力コントロールの活用事例とサンプルコード


アイコンを押すたびに数値を増減させる

TextInputxx.Defaultプロパティ
_Value //数値変数

IconPlus.OnSelectプロパティ
Set(_Value,_Value+1) //押すたびに1ずつ増える

IconMinus.OnSelectプロパティ
If(_Value>0,Set(_Value,_Value-1)) //押すたびに1ずつ減る、0より下にはならない

  • 数量を入力する際に便利です。
  • +10切替チェックボックスなど作ると大きな数字でも入力が楽です。
  • 上限・下限がある場合はIf関数などで制御します。


簡易電子押印を作成する

Defaultプロパティ
Office365ユーザー.MyProfileV2().surname //下の名前ならgivenName

  • 境界半径を幅や高さより大きくすると丸くなります。
  • 電子押印の代わりに使えます。


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

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

  • いわゆるエディットバリデーションチェックです。
  • ラベルコントロールで表現しています。

失敗例から学ぶ│テキスト入力

いまのところありません。

テキスト入力コントロールのまとめ

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

  • テキスト入力コントロールは、ユーザーに入力を促せる。
  • クリアボタンより、Reset関数の方が押しやすい。
  • 電子印鑑は便利だね。


これであなたもテキスト入力コントロールマスターです。

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


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

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

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

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

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

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

よろしくお願いします。

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



コメントを残す

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

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