こんにちは、あんこ先生です。
テキスト入力コントロール、初期設定のまま使っていませんか?
はい、わたしがそのひとりです。
これではダメだと調べてみると、たくさん便利な使い方がありました。
例えば、行間を調整したり、外枠の角を丸めたりできます。
そこで、この記事では、テキスト入力コントロールの使い方と主要プロパティを解説します。
さらに、すぐ使える活用事例をコード付きで紹介します。
実際にコードをコピペして、動作を確認してみましょう!
Contents
テキスト入力コントロールについて
![テキスト入力コントロール](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-49.png?resize=728%2C366&ssl=1)
テキスト入力コントロールとは│TextInput
ユーザーが任意のテキストや数値を入力できるボックスです。
機能はユーザーにデータを入力させる、データを表示させる、のふたつです。
つまり、ユーザーにデータを入力させることに特化したコントロールです。
テキスト入力コントロールの設置方法
挿入リボンから下記アイコンを選べばテキスト入力コントロールが追加できます。
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-56.png?resize=118%2C118&ssl=1)
主要プロパティの使い方│テキスト入力
テキスト入力コントロールの主要プロパティは、次の2点です。
- ユーザーが変更する前の初期値を設定するDefaultプロパティ
- コントロールに表示またはユーザーが入力した結果(戻り値)のTextプロパティ
機能として次の3点があります。
設定または入力した文字の表示
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-57.png?resize=440%2C285&ssl=1)
- テキスト型は、二重引用符で囲むことでそのまま表示します。
- 数値の場合は二重引用符で囲まなくてもそのまま表示します。
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/b71d433ab01023f27d6f2222306daaf7.png?resize=100%2C100&ssl=1)
数値を二重引用符で囲むとテキスト型として扱われるよ!
変数の値を表示
Defaultプロパティ
変数名 //サンプルは_OnOffっていうブール型の変数だよ
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-61.png?resize=431%2C193&ssl=1)
- 変数名を直接書き込めば認識します。
- テーブル型やレコード型は表示できません。
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/b71d433ab01023f27d6f2222306daaf7.png?resize=100%2C100&ssl=1)
テーブル型やレコード型のデータを表示させるには、LookUp関数などで単一のフィールドを指定する必要があるよ!
数式の結果表示
Defaultプロパティ
If(_OnOff,”おはよう”,”おやすみ”) //変数_OnOffがTrueなので”おはよう”を表示
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-70.png?resize=430%2C198&ssl=1)
- 関数の結果を表示します。
- Round(100/98,0)のように数式の結果も表示します。
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/b71d433ab01023f27d6f2222306daaf7.png?resize=100%2C100&ssl=1)
テキスト型と数値を計算させると、エラーにはならずテキスト型を無視した結果が表示されるよ。
戻り値
テキスト入力コントロールの戻り値はTextプロパティです。
Label.Textプロパティ
TextInputxx.Text //ラベルコントロールに表示する場合
Patch関数
Patch(detasauce,LookUp(detasauce,ID=xxx),
{Name:TextInputxx.Text}) //データソースに書き込む場合
その他プロパティの使い方
※色やサイズ変更など他コントロールと共通したプロパティの説明は省いています。
行の高さ│LineHeight
![テキスト入力コントロール](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-72.png?resize=383%2C320&ssl=1)
- 行間のことです。数値を増やせば広がり、減らせば狭くなります。
最大の長さ│MaxLength
![テキスト入力コントロール](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-71.png?resize=425%2C159&ssl=1)
- 設定した数以上の文字を入力できなくします。
- 電話番号など固定長のデータ入力に適しています。
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/f4c4eafa013b0ce3d576b80834f1a5c5.png?resize=100%2C100&ssl=1)
クリアすると無制限、0だと何も入力できません。
クリアボタン│Clear
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-73.png?resize=366%2C165&ssl=1)
- オンにすると右側に×印が付き、それを押すと入力内容がクリアされます。
- 入力内容のクリアなので初期値には戻りません。
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/f4c4eafa013b0ce3d576b80834f1a5c5.png?resize=100%2C100&ssl=1)
モバイル環境だと押しにくいです。初期値に戻したい場合も含め、次のReset関数を使った方がよいです。
初期値に戻す│Reset
TextInputxx.Resetプロパティ
True //FalseのままだとReset関数が機能しません
Iconxx.OnSelectプロパティ
Reset(TextInputxx) //()で囲んだコントロールを初期値に戻します
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-75.png?resize=440%2C170&ssl=1)
- Reset関数で入力した内容を初期値に戻します。
- あらかじめ、ResetプロパティをTrueにしておく必要があります。
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/e592291b4f6575c24b9ed17a1f2884ae.png?resize=100%2C100&ssl=1)
クリアボタンと比べ、非常に押しやすいです。
初期値を空にしておけば、機能は同じになります。
境界半径│RadiusTopLeft
![テキスト入力コントロール](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-74.png?resize=445%2C157&ssl=1)
- 入力した数値分、角が丸くなります。高さと同じ値で画像のようになります。
- 機能は変わりませんが、かわいくなります。
モード│Mode
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-76.png?resize=330%2C460&ssl=1)
- 改行できない単一行、改行できる複数行、入力した値が隠されるパスワードの3つがあります。
- 用途に合わせて設定しましょう。
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/b71d433ab01023f27d6f2222306daaf7.png?resize=100%2C100&ssl=1)
複数行を選択してもリストのデータ型が1行テキストの場合は単一行として更新されます。
改行したところは改行コードが入ります。
テキスト入力コントロールの活用事例とサンプルコード
アイコンを押すたびに数値を増減させる
TextInputxx.Defaultプロパティ
_Value //数値変数
IconPlus.OnSelectプロパティ
Set(_Value,_Value+1) //押すたびに1ずつ増える
IconMinus.OnSelectプロパティ
If(_Value>0,Set(_Value,_Value-1)) //押すたびに1ずつ減る、0より下にはならない
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-77.png?resize=358%2C187&ssl=1)
- 数量を入力する際に便利です。
- +10切替チェックボックスなど作ると大きな数字でも入力が楽です。
- 上限・下限がある場合はIf関数などで制御します。
簡易電子押印を作成する
Defaultプロパティ
Office365ユーザー.MyProfileV2().surname //下の名前ならgivenName
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-79.png?resize=398%2C194&ssl=1)
- 境界半径を幅や高さより大きくすると丸くなります。
- 電子押印の代わりに使えます。
入力内容を判定した結果を表示する
Label.Textプロパティ
If(IsNumeric(TextInput01.Text) || IsBlank(TextInput01.Text),
“”,”数値以外が入力されています”)
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/02/image-68.png?resize=728%2C131&ssl=1)
- いわゆるエディットバリデーションチェックです。
- ラベルコントロールで表現しています。
失敗例から学ぶ│テキスト入力
いまのところありません。
テキスト入力コントロールのまとめ
要点をまとめると次の3点です。
- テキスト入力コントロールは、ユーザーに入力を促せる。
- クリアボタンより、Reset関数の方が押しやすい。
- 電子印鑑は便利だね。
これであなたもテキスト入力コントロールマスターです。
アイデアを活かして素敵なアプリを作成しましょう!
Defaultプロパティ
“テキスト入力コントロール”