はじめに
Power Appsのモダン コントロールがついに一般提供(GA)されました。
今回の対象は入力系のコントロール、表にすると下記が挙げられます。
| # | 表示名 | 内部名 | レイアウト | クラシックとのギャップ |
|---|---|---|---|---|
| 1 | テキスト | TextCanvas | Text | OnSelectイベントが対象外に |
| 2 | テキスト入力 | TextInputCanvas | 入力 | ValidationState などプロパティの変更 |
| 3 | 日付の選択 | DatePickerCanvas | 日付の選択 | 神アプデ！入力体験が向上！ |
| 4 | コンボボックス | ComboboxCanvas | 項目の検索 | ValidationState などプロパティの変更 |
| 5 | 数値入力 | NumberInput | 入力 | ValidationState などプロパティの変更 |
| 6 | フォーム | Form | 割愛 | 編集・ビューが統一される |
個人的にはいつでも今すぐに使いたい！！と心から本当に思っていたので嬉しい限りです。
特に 日付の選択 DatePickerCanvasは本当に待っていましたよ！ほんっとに。
デザインの次元が違うので嬉しい限りです。
■ モダン
■ クラシック
クラシック コントロールとモダン コントロールの比較 （日付の選択📅）
クラシック コントロールとモダン コントロールの比較 （フォーム）
クラシック コントロールからモダン コントロールへの移行
さあではクラシック コントロールのものを、これからモダン コントロールに置き換えていこう！とすると非常に手間がかかってしまいます。
ノーコード/ローコードのメリットがかえって邪魔をしてしまい、モダン コントロールを配置して置き換えたいコントロールとプロパティをそろえるという大きな手間が発生してしまいます。
そんな時に使えるテクニックがコードの貼り付けです。
コントロールを右クリックすると[コードを表示 プレビュー]という選択肢が出てきます。
クラシックのテキスト ラベルのコードはこちら
- Label1:
Control: Label@2.5.1
Properties:
X: =40
Y: =40
質素ですね。
これに対してモダン コントロールはどうなっているかというと
- TextCanvas:
Control: Text@0.0.50
Properties:
X: =362
Y: =44
Propertiesに記載されていない項目は、貼り付け時に既定値が設定されます。
ガッツリ項目を設定すると
長いので省略
- 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
プロパティのうちのLabel@2.5.1、Text@0.0.50が、コントロールそのものを定義していることがわかります。
ここで、クラシック コントロールのLabel@2.5.1をText@0.0.50に置き換えて貼り付けるとどうなるでしょうか？
なんかそれらしくいきましたね。
この調子で入力系のコントロールをやってみましょう。
クラシックの日付の選択をモダンに変えてみます。
モダンは日付の初期値が空白になっているため、今回はそちらに合わせてみようと思います。
- DatePicker1:
Control: Classic/DatePicker@2.6.0
Properties:
DefaultDate: =
X: =40
Y: =184
- DatePickerCanvas1:
Control: DatePicker@0.0.42
Properties:
X: =402
Y: =184
さて、クラシックからモダンへの変更ということで、Classic/DatePicker@2.6.0をDatePicker@0.0.42に変えて貼り付けてみます。
答えは上手くいきません。
エラーの詳細を見ると丁寧に詳細が書いています。
詳細:
(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として覚えていただければ何よりです。
入力系のコントロールでDefaultというプロパティがありますが、モダン コントロールの場合はValueになっているケースが多いです。
このプロパティ名の差異により、貼り付けエラーが発生するため、要注意です。
海外の便利サイトをご紹介
またPower AppsのYAMLスニペットは海外の猛者がアップロードしていたりします。
変数の設定方法から丁寧に解説してくださるので、本当に見ごたえがありますね🔍