ポップアップ Power Appsコンポーネントの作成 - Training

15 分

場合によっては、アプリケーションのユーザーにポップアップウィンドウを表示する必要があります。 Power Apps Component Framework は、この要件を満たすためにポップアップ API を公開します。次の例に、ローダーグラフィックを表示するポップアップウィンドウの作成方法を示します。長時間実行される操作では、この方法を使用すると、基になる UI が操作を実行できないようブロックされている場合に、満足できるユーザーエクスペリエンスを実現することができます。

メモ

Power Apps Component Framework のポップアップサービスは、Power Apps モデル駆動型アプリでのみサポートされています。

コンポーネントのプロジェクトの初期化

コンポーネントのプロジェクトを初期化するには、次の手順を実行します。

Visual Studio Code を起動します。
ターミナル、新しいターミナルを選択します。
ディレクトリをソースフォルダーに変更します。
```
cd source
```
ソースディレクトリで、Popup-Component という名前のディレクトリを作成します。
```
md Popup-Component
```
次のコマンドを実行して新しいディレクトリに切り替えます。
```
cd Popup-Component
```

次のコマンドを実行して、プロジェクトを初期化します。

pac pcf init --namespace SampleNamespace --name PopupComponent --template field

プロジェクトに依存関係ライブラリを読み込むために run-npm-install を実行します。
```
npm install
```
次のコマンドを実行して、Visual Studio Code でプロジェクトを開きます。
```
code -a .
```

コードコンポーネントのロジックを実装する

コードコンポーネントのロジックを実装するには、次の手順を実行します。

PopupComponent フォルダーを展開し、ControlManifest.Input.xml ファイルを開きます。

マニフェスト全体を以下の XML に置き換えます。

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="SampleNamespace" constructor="PopupComponent" version="0.0.1" display-name-key="PopupComponent_Display_Key" description-key="PopupComponent_Desc_Key" control-type="standard">
    <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
    <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" /> 
    <resources>
      <code path="index.ts" order="1"/>
      <css path="css/loader.css" order="1" />
    </resources>
  </control>
</manifest>

後でこのマニフェストに含まれる補助ファイルを追加します。

Index.ts ファイルを開きます。
export class メソッドの上に、ポップアップ API (popupstyle と shadowstyle) によって提供される他のメソッドを公開するために、次のインターフェイスメソッドを挿入します。
```
    interface Popup extends ComponentFramework.FactoryApi.Popup.Popup {
    popupStyle: object;
    shadowStyle: object;
}
```

constructor の上に、次のプライベート変数を追加します。

private _container: HTMLDivElement;
private _popUpService: ComponentFramework.FactoryApi.Popup.PopupService;

コンポーネントの init メソッドに次のロジックを追加します。

this._container = document.createElement('div');
//============ content of our popup =============
let popUpContent = document.createElement('div');
popUpContent.setAttribute("class", "loader");

//============ our Popup object =============
let popUpOptions: Popup = {
    closeOnOutsideClick: true,
    content: popUpContent,
    name: 'loaderPopup', // unique popup name
    type: 1, // Root popup
    popupStyle: {
        "width": "100%",
        "height": "100%",
        "overflow": "hidden",
        "backgroundColor": "transparent",
        "display": "flex",
        "flexDirection": "column",
        "position": "absolute",
        "margin-top": 28 + "px"
    },
    shadowStyle:{
        position: "absolute",
        width: "100%",
        height: "100%"
    }
};

this._popUpService = context.factory.getPopupService();

this._popUpService.createPopup(popUpOptions);

container.appendChild(this._container);
this._popUpService.openPopup('loaderPopup');

コードコンポーネントにスタイル設定を追加する

コードコンポーネントにスタイル設定を追加するには、以下の手順を実行します。

PopupComponent フォルダーの下に、新しい css サブフォルダーを作成します。
CSS サブフォルダーに、新しい loader.css ファイルを作成します。

loader.css ファイルに、次のような内容のスタイルを追加します。

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    position: fixed;
    width: 120px;
    height: 120px;
    top:40%;
    left:50%;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

ファイルを選択して、変更をすべて保存します。

コンポーネントのビルドと実行

コンポーネントをビルドして実行するには、次の手順を実行します。

次のコマンドを実行して、ソリューションを構築します。
```
npm run build
```
正常に構築できたら、npm start を実行して、新しいポップアップコンポーネントをテストできます。
```
npm start
```
テストハーネスのブラウザーセッションを閉じます。
ターミナルに戻り、Ctrl + C キーを押したまま Watcher を停止します。
Y と入力し、Enter を押します。

メモ

このローダーコンポーネントはテキストフィールドにバインドされます。モデル駆動型アプリでこのコンポーネントを使用するには、このフィールドをフォームで使用する場合に非表示にすることをお勧めします。

ポップアップの機能をテストするには、Microsoft Power Platform 環境でコンポーネントを公開してホストする必要があります。コードコンポーネントの公開方法の詳細については、Power Apps コンポーネントを作成するモジュールの「コードコンポーネントソリューションパッケージを作成する」を参照してください。

続行

ポップアップ Power Apps コンポーネントの作成

コンポーネントのプロジェクトの初期化

コードコンポーネントのロジックを実装する

コードコンポーネントにスタイル設定を追加する

コンポーネントのビルドと実行

フィードバック

ポップアップ Power Apps コンポーネントの作成

コンポーネントのプロジェクトの初期化

コード コンポーネントのロジックを実装する

コード コンポーネントにスタイル設定を追加する

コンポーネントのビルドと実行

フィードバック

コードコンポーネントのロジックを実装する

コードコンポーネントにスタイル設定を追加する