【O365ライセンス内でPowerApps開発】Vol.9 営業支援アプリの作成（タブレットレイアウト）のタブ切り替え表示画面拡張

今回は少しずつ拡張してきた営業支援アプリの機能追加として、色々応用できるタブ切り替え機能を作成します。

タブ切り替えとは、Office 365のリボンUIに代表されるスクリーンの遷移を伴わず、一部画面の表示切り替えを行う機能です。

Power Appsの営業支援アプリにタブ切り替え機能を追加する

さて、早速作成していきます。Power Appsを起動します。

https://make.powerapps.com

まずは以下のようにテキストラベル、アイコンをレイアウトしていきます。

フォームはもともとあった営業案件レコードを表示するフォーム(Form1)をVisibleプロパティで一旦falseとして見えなくしておいてください。

かわりに追加したタブの分の数のフォームを追加します。

今回は、すでにある営業案件の他に顧客タブ、活動タブを作成してみます。したがって見えない(Visible = false)で設定したフォームを2つ追加します。上の画像では見えませんが…。

営業案件のテキストラベル（営業タブ）を選択すると、タブの背景の色がLight sky blueに変わるようにします。

コードは以下の通りです。

コード

If(OpportunityTab,LightSkyBlue,RGBA(0,0,0,0))

同様に、顧客タブも同じように設定を行います。

コード

If(CustomerTab,LightSkyBlue,RGBA(0,0,0,0))

こんな感じでそのほかのタブも同じように設定します。

次に、顧客タブを選択したときに変数の値が変化するように、それぞれのタブに対応する変数を宣言します。

コードは以下の通りです。

コード

UpdateContext({OpportunityTab: false});
UpdateContext({CustomerTab: true});
UpdateContext({ActivityTab: false})

ほかのタブも同じようにします。

顧客タブではCustomerTab 変数をtrueとし、活動タブではActivityTabをtrueとし、そのほかの変数はfalseとします。

この変数をVisibleプロパティに設定するのは次に紹介します。

クリックしたタブに着色するだけではなく、フォームが見えるようにするため、フォームのVisible プロパティに設定を加えます。

コードは以下のように記述します。

コード

OpportunityTab

OpportunityTab 変数は、営業案件タブクリック時にtrueとなります。trueとなった際にはVisible (=見える)ということになります。

他のタブをクリックするとOpportunityTab変数はfalse となるためフォームは見えなくなります。

この設定を他のタブにも同じようにすることでタブ切り替え機能が実現できます。

いかがでしたでしょうか。

参考になれば幸いです。

次回は、関連する活動リストを表示して、追加変更する機能を作成していきます。

そしてさらに次回では、営業案件や活動を関連付けられ、さらにはワークフロー機能も実現する日報機能の追加も行っていきます。

こうご期待っ！