Power AppsのText input コントロールで「表示形式」を制御する - 桁区切り

Power Appsでは気軽に編集フォームを作成し、データソースの閲覧、レコードの修正、追加が可能です。
しかし、Text input コントロール「テキストボックス」入力しているとき、ユーザーが見えている情報を、ユーザーが見やすいように設定するには、少しアレンジが必要なようです。

ここでは備忘録として、その情報を残しておきます。

はじめに

この記事で、取り扱うText input コントロールとは、俗にいう「テキストボックス」を指します。
Power Appsのアップデートは凄いスピードで進んでいくため、
このテクニックも不要になる日が来るかもしれません。
2022.10.10段階ではこのテクニックが必要になるのではないかと思い、記事にさせていただきました。

👆の赤線のコントロールが対象です。

達成したい制御

Excelのような「表示形式」の変更

参考画像

エクセルであれば、セルの書式設定によって、数字の表記を柔軟に変更することができます。
「4000」という数字のデータが

• 4,000
• 4.00E+03
• ¥ 4,000.00
• 1910/12/13

と言った表現が可能です。リッチでモダンなPower Appsですので、「Excelならできるのに・・・」みたいなことは避けたい。

Power Appsにおける表示形式

Text input コントロールに、入力したデータはテキストデータそのものです。
入力したデータを編集するためには「Text関数」を使い、テキストデータを変えるステップが必要です

Text input コントロールには、入力後にOnChangeで関数を動かすことができます。
その機能を活用してみます。

入力したテキストの表示形式を修正するイベント - OnChange

OnChangeイベントを活用しましょう。

• OnChangeイベント
  ユーザーが (スライダーを調整するなどして) コントロールの値を変更したときに実行するアクション

入力された内容が変更された後、入力されたデータが変更されるということですね。
気をつけなければならないことは、Text Inputコントロールのテキストデータを直接変更しています。

Edit Formを含め、データソースや他媒体とのデータ連携は「表示形式が反映されたテキスト」として連携されることになるので、Formを例に挙げると、CardコントロールのUpdateプロパティの内容に注意する必要があります。

• Update属性の設定によってデータソースへ送られる情報のデータ型が決まります。

---

実際の方法

実際に入力したテキストを関数を使用して変更するためには

1. Set関数（またはUpdateContext関数）で入力したテキストを、変数に格納する
2. OnChangeプロパティで、Text関数を使用し、変数に格納されたテキストを変換する必要がある
3. TextInputのDefaultプロパティを変数にする

Text input コントロールの補足！

• 主要なプロパティ
  • Default – ユーザーが変更する前のコントロールの初期値
  • Text – コントロールに表示されるテキスト、またはユーザーがコントロールに入力するテキスト

テキストを変更して反映するプロパティがDefault

イメージとしてはTextプロパティを変える印象を受けますが（私は）、TextプロパティはPowerApps Studioで、触れることはできません。

• 表示されるのは初期値であるDefaultプロパティ
• 入力した結果であるテキストはTextプロパティ

今回の説明における設定に関して

テキストの情報を格納する変数は

• グローバル変数 - Set関数
• コンテキスト関数 - UpdateContext関数

の二択ですが、Power Appsの使い方である

1. BrowserScreenのギャラリーからデータを選択する
2. 既存のデータであれば、情報を見て編集する

and

1. レコードを追加する

といった使い方を想定したときに、画面をまたぐため、グローバル関数で今回は再現してみます。

 - それぞれ画面が転移するボタン - OnSelectにSet関数を追加
 - 変数名 - gblTextInput
 - 表示形式は「桁区切り」(#,##0)
 - 参照するギャラリーの名前 - galHousehold
 - Update属性で参照するText Inputの名前 - 

• 命名規則の資料参考
  https://memo.tyoshida.me/wp-content/uploads/2021/06/4bbaa6955f6a1caa85a9653c13d61d72.pdf

  • 編集の場合
    
  Button Control - Edit

  Set(gblTextInput,Text(galHousehold.Selected.AMOUNT,"#,##0"));
  EditForm(EditForm1);
  Navigate(EditScreen1, ScreenTransition.None)
  

  • 追加の場合
    
  Button Control - New

  Set(gblTextInput,Text(0,"#,##0"));
  NewForm(EditForm1);
  Navigate(EditScreen1, ScreenTransition.None)
  

• データソースへの反映 - Updateプロパティ

桁区切りのテキストをデータソースに数値として反映する場合は、値が数値として評価される必要があります。
「Value関数」で数値に変更しましょう。

[再掲]

crdConvTest - Updateプロパティ

crdConvTest

変数で動的に情報が変わるように、コントロールの情報を編集する

• Text InputのDefaultプロパティを変数に
  画像

Default

gblTextInput

先程の「gblTextInput」ですね。

これで設定が整っているので入力した後に、桁区切り表示形式で表示されるようになりました。

追記

慣れればラクですが、Microsoft様ですので、スグにPower Apps自体に機能が加わりそうですね。
やっている事自体、とても無駄を感じますので。応急処置としてこの対処は、ご認識いただければ幸いです。

このテーマは「#PowerApps で家計簿アプリを作ろう！ よわよわイカエンジニアあきのゆるゆる勉強会」のイベントにて、発表させていただきました。

登壇機会をいただけて感謝です。Power Apps初学者も参加型学習という形で、学びを深められますので、興味のある方はぜひご参加ください。

資料はGitHubにも格納しましたが、Qiitaのこの記事が一番まとめられています。

私はPower Platformの学びや、業務改善について、Twitterやnoteで発信しておりますMicrosoft信者です。仮装をしています。

ぜひFollowしていただけると嬉しいです！お読みくださり、ありがとうございました！！

Viva Power Apps!! Viva Power Platform!! Viva Microsoft!!