入力フォームで残り文字数を表示したいと思ったことはありませんか？

Power Appsでフォームを作成していて、「あと何文字入力できるか」を表示したいと思ったことはないでしょうか。XやSNSの投稿画面のように、残り文字数がリアルタイムで分かると、ユーザーにとって使いやすいフォームになりますよね。

実は、Power Appsにはデフォルトで残り文字数を表示する機能がありません。でも心配はいりません。テキストラベルコントロールと組み合わせることで、簡単に実装できるんです。

テキストラベルを使った文字数表示の実装

基本的な仕組みを作ってみましょう

まず、20文字まで入力できるテキスト入力コントロールがあるとします。ここに、残り文字数を表示するテキストラベルを追加していきます。

表示形式は「現在の文字数/最大文字数」という形にしてみましょう。例えば「5/20」のような感じですね。

実際の実装手順

では、実際にテキストラベルに式を設定していきます。

1. 最大文字数の設定
   • まず、スラッシュの後ろに最大文字数である「20」を指定します
2. 現在の文字数の取得
   • スラッシュの前には、現在入力されている文字数を表示させたいです
   • ここで便利なのがLen関数です
   • Len関数を使って、テキスト入力コントロールの文字数を取得します

こんな感じで記述できます：

$"{Len(TextInput1.Text)}/20"

これで基本的な文字数表示の実装は完了です。意外と簡単でしょう？

文字数に応じて色を変える機能を追加

さらに使いやすくする工夫

ただ文字数を表示するだけでも便利ですが、もう一歩進んで、文字数が一定以上になったら文字色を赤くする機能を追加してみましょう。これがあると、ユーザーは残り文字数が少なくなったことを視覚的に認識できます。

If関数を使った条件分岐の実装

色を変更するには、テキストラベルのColorプロパティにIf関数を使います。

ここでは、15文字を超えたら赤色に、それ以下なら黒色のままにする設定をしてみます：

If(
    Len(TextInput1.Text) > 15,
    RGBA(255,0,0,1),
    RGBA(0,0,0,1)
)

この式の意味は以下の通りです：

• Len関数で取得した文字数が15より大きければ赤色
• そうでなければ黒色

動作確認をしてみましょう

実際に動かしてみると、テキストを入力していくにつれて文字数がカウントアップされ、15文字を超えると文字色が赤に変わることが確認できるはずです。

ちょっとした工夫ですが、このような視覚的なフィードバックがあることで、ユーザーエクスペリエンスが大きく向上します。

まとめ

いかがでしたでしょうか。Power Appsには標準で残り文字数表示機能はありませんが、Len関数とIf関数を組み合わせることで、簡単に実装できることがお分かりいただけたと思います。

今回ご紹介した方法は、以下のような場面で活用できます：

• コメント入力フォーム
• 申請書の備考欄
• フィードバック入力画面

色を変える閾値や表示形式は、用途に応じて自由にカスタマイズできるので、ぜひ試してみてください。参考になれば幸いです！