【PowerApps】ハンバーガーメニューのコンポーネントを公開

PowerAppsで、ハンバーガーメニューのコンポーネントを作成してみました。
そのコンポーネントのインストール方法、 設定方法をご紹介します。

動作イメージ

動作イメージは以下のようになっています。

msappファイルを保存

ハンバーガーメニューのコンポーネントが作成されているmsappファイルを保存します。

下記サイトにアクセスします。

github.com

「View Raw」をクリックすると、msappファイルが保存されます。

コンポーネントの有効化

PowerAppsの編集画面を開きます。
まず、通常設定では、コンポーネントは有効化されていないので、コンポーネントを有効にします。

PowerApps編集画面の右上の [ファイル] をクリックします。

続いて [アプリの設定] > [詳細設定] の順にクリックし、「コンポーネント」を「オン」にします。

PowerAppsの編集画面に戻り、画面左側のツリービューに「コンポーネント」が表示されていれば、コンポーネントが有効化されています。

コンポーネントのインポート

先程保存したmsappファイルをインポートします。

ツリービューの「コンポーネント」をクリックします。続いて [・・・] > [コンポーネントをインポートします] の順にクリックします。

[ファイルをアップロード] をクリックし、先程保存したmsappファイルを指定します。

すると「HamburgerMenu」というコンポーネントがインポートされます。

コンポーネントの配置

コンポーネントを画面上に配置していきます。
画面の編集画面を開き、[コンポーネント] > [HamburgerMenu] の順にクリックします。

スクリーンにコンポーネントが配置されます。

メニュー一覧のコレクションを定義

コンポーネント配置しただけでは、メニューには何も表示されません。
メニュー一覧を定義したコレクションを定義し、コンポーネントのプロパティに設定しなければいけません。

Appの「OnStart」プロパティに、以下の数式を入力します。
「label」にはメニューの表示名、「screen」には画面遷移先のスクリーンを指定します。

ClearCollect(
    colScreen,
    {label: "Screen1", screen: Screen1},
    {label: "Screen2", screen: Screen2},
    {label: "Screen3", screen: Screen3}
)

先程配置したコンポーネントの「Items」プロパティに「colScreen」と入力します。

すると、メニュー一覧が表示されるようになり、メニューをクリックすると、画面遷移するようになります。

HamburgerMenu のカスタマイズ

HamburgerMenuのヘッダーテキストや色を変えたい場合は、HamburgerMenu設定画面の「カスタムプロパティ」を設定してください。

以上です。コンポーネントを上手く使えれば、より早くアプリケーションを作成できそうですね。