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

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

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

# はじめに
https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-text-input

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/199c8616-b630-026f-2e95-d243b554a40f.png)
👆の赤線のコントロールが対象です。

# 達成したい制御
## Excelのような「表示形式」の変更

参考画像

エクセルであれば、セルの書式設定によって、数字の表記を柔軟に変更することができます。
「4000」という数字のデータが
 - 4,000
 - 4.00E+03
 -  ¥ 4,000.00 
 -  1910/12/13

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

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

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-text

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

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

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/properties-core

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/be927429-25f4-ec56-da17-9470201a8d89.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/7c5141f4-e0fe-1ccf-de60-85846d4dfb29.png)
 - Update属性の設定によってデータソースへ送られる情報の**データ型**が決まります。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-card

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

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

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

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

#### 今回の説明における設定に関して
テキストの情報を格納する変数は
 - グローバル変数 - Set関数
 - コンテキスト関数 - UpdateContext関数

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

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

and


1. レコードを追加する

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

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

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


     - 編集の場合
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/4c3e3ad1-4bbe-2745-7629-35d861c6de73.png)
    ```Power Apps:Button Control - Edit
    Set(gblTextInput,Text(galHousehold.Selected.AMOUNT,"#,##0"));
    EditForm(EditForm1);
    Navigate(EditScreen1, ScreenTransition.None)
    ```
     - 追加の場合
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/3b54ccca-17ac-883f-d57e-ab9aa0da7805.png)

    ```Power Apps:Button Control - New
    Set(gblTextInput,Text(0,"#,##0"));
    NewForm(EditForm1);
    Navigate(EditScreen1, ScreenTransition.None)
    ```
- データソースへの反映 - Updateプロパティ
:::note warn
桁区切りのテキストをデータソースに**数値として**反映する場合は、値が数値として評価される必要があります。
「Value関数」で数値に変更しましょう。
:::

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-value

[再掲]
```Power Apps:crdConvTest - Updateプロパティ
crdConvTest
```

# 変数で動的に情報が変わるように、コントロールの情報を編集する
 - Text InputのDefaultプロパティを変数に
画像
```Power Apps:Default
gblTextInput
```
先程の「gblTextInput」ですね。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/fe0b9fbd-bcc3-c846-354b-41247c4913d2.png)

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

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

https://akiika-yuruyuru.connpass.com/event/262557/

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

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

https://github.com/DEmodoriGatsuO/events/tree/main/squid_fever/October10_2022

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

https://twitter.com/DemodoriGatsuo

https://note.com/bonito_vba_gas/


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

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