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

f:id:tecchan365:20190608155653p:plain

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

動作イメージ

動作イメージは以下のようになっています。
f:id:tecchan365:20190608190801g:plain

msappファイルを保存

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

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

github.com

「View Raw」をクリックすると、msappファイルが保存されます。 f:id:tecchan365:20190608162327p:plain

コンポーネントの有効化

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

PowerApps編集画面の右上の [ファイル] をクリックします。
f:id:tecchan365:20190608161150p:plain

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

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

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

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

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

f:id:tecchan365:20190608161956p:plain

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

すると「HamburgerMenu」というコンポーネントがインポートされます。
f:id:tecchan365:20190608162901p:plain

コンポーネントの配置

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

f:id:tecchan365:20190608163143p:plain

スクリーンにコンポーネントが配置されます。
f:id:tecchan365:20190608163322p:plain

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

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

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

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

f:id:tecchan365:20190608164306p:plain

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

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

HamburgerMenu のカスタマイズ

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

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