こんにちは、あんこ先生です。
テキスト入力コントロール、初期設定のまま使っていませんか？
はい、わたしがそのひとりです。
これではダメだと調べてみると、たくさん便利な使い方がありました。
例えば、行間を調整したり、外枠の角を丸めたりできます。
そこで、この記事では、テキスト入力コントロールの使い方と主要プロパティを解説します。
さらに、すぐ使える活用事例をコード付きで紹介します。
実際にコードをコピペして、動作を確認してみましょう！
Contents
テキスト入力コントロールについて
テキスト入力コントロールとは│TextInput
ユーザーが任意のテキストや数値を入力できるボックスです。
機能はユーザーにデータを入力させる、データを表示させる、のふたつです。
つまり、ユーザーにデータを入力させることに特化したコントロールです。
テキスト入力コントロールの設置方法
挿入リボンから下記アイコンを選べばテキスト入力コントロールが追加できます。
主要プロパティの使い方│テキスト入力
テキスト入力コントロールの主要プロパティは、次の２点です。
- ユーザーが変更する前の初期値を設定するDefaultプロパティ
- コントロールに表示またはユーザーが入力した結果（戻り値）のTextプロパティ
機能として次の３点があります。
設定または入力した文字の表示
- テキスト型は、二重引用符で囲むことでそのまま表示します。
- 数値の場合は二重引用符で囲まなくてもそのまま表示します。
数値を二重引用符で囲むとテキスト型として扱われるよ！
変数の値を表示
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
- 設定した数以上の文字を入力できなくします。
- 電話番号など固定長のデータ入力に適しています。
クリアすると無制限、０だと何も入力できません。
クリアボタン│Clear
- オンにすると右側に×印が付き、それを押すと入力内容がクリアされます。
- 入力内容のクリアなので初期値には戻りません。
モバイル環境だと押しにくいです。初期値に戻したい場合も含め、次のReset関数を使った方がよいです。
初期値に戻す│Reset
TextInputxx.Resetプロパティ
True //FalseのままだとReset関数が機能しません
Iconxx.OnSelectプロパティ
Reset(TextInputxx) //()で囲んだコントロールを初期値に戻します
- Reset関数で入力した内容を初期値に戻します。
- あらかじめ、ResetプロパティをTrueにしておく必要があります。
クリアボタンと比べ、非常に押しやすいです。
初期値を空にしておけば、機能は同じになります。
境界半径│RadiusTopLeft
- 入力した数値分、角が丸くなります。高さと同じ値で画像のようになります。
- 機能は変わりませんが、かわいくなります。
モード│Mode
- 改行できない単一行、改行できる複数行、入力した値が隠されるパスワードの３つがあります。
- 用途に合わせて設定しましょう。
複数行を選択してもリストのデータ型が１行テキストの場合は単一行として更新されます。
改行したところは改行コードが入ります。
テキスト入力コントロールの活用事例とサンプルコード
アイコンを押すたびに数値を増減させる
TextInputxx.Defaultプロパティ
_Value //数値変数
IconPlus.OnSelectプロパティ
Set(_Value,_Value+1) //押すたびに1ずつ増える
IconMinus.OnSelectプロパティ
If(_Value>0,Set(_Value,_Value-1)) //押すたびに1ずつ減る、０より下にはならない
- 数量を入力する際に便利です。
- +10切替チェックボックスなど作ると大きな数字でも入力が楽です。
- 上限・下限がある場合はIf関数などで制御します。
簡易電子押印を作成する
Defaultプロパティ
Office365ユーザー.MyProfileV2().surname //下の名前ならgivenName
- 境界半径を幅や高さより大きくすると丸くなります。
- 電子押印の代わりに使えます。
入力内容を判定した結果を表示する
Label.Textプロパティ
If(IsNumeric(TextInput01.Text) || IsBlank(TextInput01.Text),
“”,”数値以外が入力されています”)
- いわゆるエディットバリデーションチェックです。
- ラベルコントロールで表現しています。
失敗例から学ぶ│テキスト入力
いまのところありません。
テキスト入力コントロールのまとめ
要点をまとめると次の３点です。
- テキスト入力コントロールは、ユーザーに入力を促せる。
- クリアボタンより、Reset関数の方が押しやすい。
- 電子印鑑は便利だね。
これであなたもテキスト入力コントロールマスターです。
アイデアを活かして素敵なアプリを作成しましょう！
ご支援よろしくおねがいします
この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。
下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。
受取人のメールアドレスは amazon@anko7793.com までお願いします。
メッセージもいただけるとたいへん喜びます。
よろしくお願いします。
Defaultプロパティ
“テキスト入力コントロール”