はじめに

個人的に待ちに待っていたPower AppsでのCode View機能がPublic Previewで展開されました！🎉

#PowerApps のCode Viewキテターーーーーhttps://t.co/X9T1T5Q6BK pic.twitter.com/ek2vFvM540
— コルネ (@koruneko32767) May 29, 2024

powerapps.microsoft.com

確認したVersion

以下Versionで確認しました。

なにができるようになったのか？

概要

この機能を使うことで、動画のようにコントロールをYAML形式でコピーできるようになる他、適切なプロパティが設定されたYAMLを貼り付けることでコントロールの貼り付けも行うことができるようになりました。

なにが嬉しい？

これによりコントロールの情報を簡単にコード管理できるようになりました。

これまでもPower Apps CLIを利用すればコード変換することはできましたが、これは都度msappファイルを落として、変換を掛ける必要がありました。

これがコントロール単位とはいえ、簡単にコード変換できるようになったのは非常に嬉しい更新といえます。

コード管理できるとなにが嬉しいか？といいますと、まず開発の観点でいうと変更が容易になる場合があります。

コードはいってしまうとテキスト情報なので、ある程度の知識があれば変換などの操作を簡単に行うことができます。

例えば、Power Apps Studio(Webで編集しているPower Apps)にも正規表現での置換機能はありましたが、「このプロパティに設定された情報だけ」ということをしたい場合は、置換対象の候補から一つずつチェックを外してから置換しなくてはいけませんでした。

これがコードであれば一発の置換で行うこともできます。

続いて管理の観点です。
これは個人差によるところもあるかもですが、コードビューのほうがプロパティの確認がしやすいかと思います。

また、コントロール間の差分比較も行うことができます。

次に嬉しいのは教材や私のようにブログを書いている人ですかね。

これまでは、「このコントロールを配置して、ここのプロパティをこれに設定して...」という風な手順を記載しなくてはいけませんでしたが、これからは「以下をコピペしてください。」だけで済むようになります。

- Button1:
    Control: Classic/Button
    Properties:
      OnSelect: |-
        =UpdateContext({nowTime: Now()})
      X: =512
      Y: =248

もちろん、これまでの手順も実際にユーザーに触ってもらう。という観点から無駄ではないですが、そこまで重要でもない操作はこれで片づけることができますね。

機能紹介

コードビュー

動画ではYAMLの修正も行いたかったのでVS Codeを開いていますがPower Apps上でも確認できます。

コントロールを右クリック、もしくはツリービューから三点リーダーを選択することで以下のようなオプションが表示されますので、ここで "View copy (preview)" を選択します。

すると、以下のようにYAMLで確認することができます。

なおこれはエディターではないので編集できません。　　

次の章での紹介になりますが、ここでもコードをコピーすることができます。(左下)

コードのコピー

動画でも行っていますが、コントロールを右クリック、もしくはツリービューから三点リーダーを選択することで以下のようなオプションが表示されますので、ここで "Code copy (preview)" を選択します。

これでクリップボードにYAML形式でコピーされます。

なおショートカットは(多分)ないです。
Ctrl + Cだとこれまでと同じようにコントロールがコピーされコード管理できないです。

またコードのコピーは複数のコントロールに対しても行えます。

- Button1_1:
    Control: Classic/Button
    Properties:
      OnSelect: |-
        =UpdateContext({nowTime: Now()})
      Text: ="GetTime"
      X: =40
      Y: =40
- Button1:
    Control: Classic/Button
    Properties:
      OnSelect: |-
        =UpdateContext({nowTime: Now()})
      X: =512
      Y: =248