Power Apps モダン コントロール 一般提供(GA)！コントロールの置き換え方法のTips!!

# はじめに
`Power Apps`の[モダン コントロールがついに一般提供(GA)](https://www.microsoft.com/en-us/power-platform/blog/power-apps/ga-announcement-6-additional-modern-controls-in-canvas/)されました。

https://www.microsoft.com/en-us/power-platform/blog/power-apps/ga-announcement-6-additional-modern-controls-in-canvas/

今回の対象は入力系のコントロール、表にすると下記が挙げられます。

| #  | 表示名   | 内部名            | レイアウト       | クラシックとのギャップ                           |
|----|--------------|-----------------|--------------|--------------------------------|
| 1  | テキスト       | TextCanvas      | Text        | OnSelectイベントが対象外に         |
| 2  | テキスト入力    | TextInputCanvas | 入力         | ValidationState などプロパティの変更 |
| 3  | 日付の選択     | DatePickerCanvas| 日付の選択   | 神アプデ！入力体験が向上！       |
| 4  | コンボボックス  | ComboboxCanvas  | 項目の検索   | ValidationState などプロパティの変更 |
| 5  | 数値入力      | NumberInput     | 入力         | ValidationState などプロパティの変更 |
| 6  | フォーム      | Form            | 割愛         | 編集・ビューが統一される       |

個人的にはいつでも今すぐに使いたい！！と心から本当に思っていたので嬉しい限りです。
特に **日付の選択 DatePickerCanvas**は本当に待っていましたよ！ほんっとに。

デザインの次元が違うので嬉しい限りです。
 >> ■ モダン
 >> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/f8f97e0f-f354-424a-b578-3c2b554c4dac.png)
 >> ■ クラシック
 >> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/5d265234-186f-4853-bed7-862b832b79ee.png)
 >> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/a60d31e1-89f2-479b-8887-684f9b52b5aa.png)
 > クラシック コントロールとモダン コントロールの比較 （日付の選択📅）

 > ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/fcb98479-651d-494e-aec9-676bb2ddb06b.png)
 > クラシック コントロールとモダン コントロールの比較 （フォーム）

# クラシック コントロールからモダン コントロールへの移行
さあでは`クラシック コントロール`のものを、これから`モダン コントロール`に置き換えていこう！とすると非常に手間がかかってしまいます。

ノーコード/ローコードのメリットがかえって邪魔をしてしまい、モダン コントロールを配置して置き換えたいコントロールとプロパティをそろえるという大きな手間が発生してしまいます。

そんな時に使えるテクニックが[コードの貼り付け](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/code-view?source=recommendations)です。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/code-view?source=recommendations

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/45f15a17-98a6-4529-87a7-ae8a29503ca0.png)

コントロールを右クリックすると[コードを表示 `プレビュー`]という選択肢が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/3a672102-025e-4c31-8dc7-1b638f633390.png)

クラシックのテキスト ラベルのコードはこちら

```yaml:クラシック
- Label1:
    Control: Label@2.5.1
    Properties:
      X: =40
      Y: =40
```

質素ですね。
これに対してモダン コントロールはどうなっているかというと

```yaml:モダン コントロール
- TextCanvas:
    Control: Text@0.0.50
    Properties:
      X: =362
      Y: =44
```

`Properties`に記載されていない項目は、貼り付け時に既定値が設定されます。
ガッツリ項目を設定すると

<details><summary>長いので省略</summary>

```yaml: モダンのテキストラベル
- TextCanvas1:
    Control: Text@0.0.50
    Properties:
      Align: ="Center"
      AutoHeight: =true
      BorderColor: =RGBA(180, 214, 250, 1)
      BorderRadius: =0.5
      BorderRadiusBottomLeft: =0.5
      BorderRadiusBottomRight: =0.5
      BorderRadiusTopLeft: =0.5
      BorderRadiusTopRight: =0.5
      BorderStyle: =BorderStyle.Dashed
      BorderThickness: =0.5
      ContentLanguage: ="ja-jp"
      DisplayMode: =DisplayMode.View
      Fill: =Color.Transparent
      Font: =App.Theme.Font
      FontColor: =Color.Black
      FontItalic: =true
      FontStrikethrough: =true
      FontUnderline: =true
      Height: =54
      PaddingBottom: =12
      PaddingLeft: =12
      PaddingRight: =12
      PaddingTop: =12
      Size: =16
      Text: ="TextValue"
      VerticalAlign: =VerticalAlign.Middle
      Visible: =TextInputCanvas1.Visible
      Weight: ='TextCanvas.Weight'.Semibold
      Width: =128
      Wrap: =false
      X: =500
      Y: =20
```

</details>

プロパティのうちの`Label@2.5.1`、`Text@0.0.50`が、コントロールそのものを定義していることがわかります。
ここで、クラシック コントロールの`Label@2.5.1`を`Text@0.0.50`に置き換えて貼り付けるとどうなるでしょうか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/43b28790-4e97-432c-bc48-c51310d08687.png)

なんかそれらしくいきましたね。
この調子で入力系のコントロールをやってみましょう。

クラシックの`日付の選択`をモダンに変えてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/e25cd47e-f10d-4e2c-9eeb-b0b6a9aeb3f6.png)

モダンは日付の初期値が空白になっているため、今回はそちらに合わせてみようと思います。

```yaml:クラシック 日付の選択
- DatePicker1:
    Control: Classic/DatePicker@2.6.0
    Properties:
      DefaultDate: =
      X: =40
      Y: =184
```

```yaml:モダン 日付の選択
- DatePickerCanvas1:
    Control: DatePicker@0.0.42
    Properties:
      X: =402
      Y: =184
```

さて、`クラシック`から`モダン`への変更ということで、`Classic/DatePicker@2.6.0`を`DatePicker@0.0.42`に変えて貼り付けてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/c1bb2f89-bad8-4cec-ab80-43ed2d13e4eb.png)

答えは上手くいきません。
エラーの詳細を見ると丁寧に詳細が書いています。
```
詳細:
(4,7) : error PA2108 : Unknown property 'DefaultDate' for control type 'DatePicker@0.0.42'.

Note:
The YAML Code schema has changed. You can paste valid Early Preview code, but only the Source Code schema will be supported moving forward. To learn more: https://go.microsoft.com/fwlink/?linkid=2299600

エラー コード: 3000


セッション ID: e73d166b-590c-4091-a1c4-992cba6fd71d
```
**モダン コントロールのもつプロパティがクラシック コントロールと異なっていることからですね。**

今回のケースでは`DefaultDate`がモダン コントロールにありません。
該当するプロパティ名は`SelectedDate`です、

コードを下記のように変えて貼り付けてみます。
```
- DatePicker1:
    Control: DatePicker@0.0.42
    Properties:
      SelectedDate: =
      X: =40
      Y: =184
```

上記を省いて貼り付けると、今度はうまくいくと思います。

位置のずれは多少気になりますが、GUIでコントロール種別を都度変えるのも大変だと思います。
しかし、`クラシック コントロール`と`モダン コントロール`の**プロパティ**の違いさえ押さえておけば、**コードによるコントロールの置き換えは非常に効率的！`Power Fx`で定義している項目など、こだわっていればこだわっているほど、この置き換えは大変になりますので、このテクニックは是非使ってみていただきたいです。**

作り途中のものでこれからどうしようかな🧐と悩んでいるものがあるときに、Tipsとして覚えていただければ何よりです。


:::note info
入力系のコントロールで`Default`というプロパティがありますが、モダン コントロールの場合は`Value`になっているケースが多いです。
このプロパティ名の差異により、貼り付けエラーが発生するため、要注意です。
:::

# 海外の便利サイトをご紹介

またPower AppsのYAMLスニペットは海外の猛者がアップロードしていたりします。
変数の設定方法から丁寧に解説してくださるので、本当に見ごたえがありますね🔍

https://coda.io/@mycondy/power-apps-ui-cooker/canvas-components-2