目次

はじめに
完成イメージ
実装方法
最後に

はじめに

前回の記事では、複数Appでリソースを共有する方法について説明を行いました。
今回は、Navigation Managerという機能を使って、
複数App間で画面遷移を行う方法について解説を行いたいと思います！

Navigation Managerの概要や、
1つのアプリ内で画面遷移を行う方法については以下の記事でご紹介しましたので、
概要から知りたい方は併せてチェックしてみてください👀

今回はMicro App Architectureを使って
別のMicroAppのフォームに遷移する方法についてご紹介していきたいと思います！

Micro App Architectureが初めての方は、以下のリンクも併せてご参考ください。

【MicroAppアーキテクチャ入門】

完成イメージ

メインアプリであるDeliveryアプリにメニュー一覧を用意し、
注文ボタンをタップすると、Orderアプリの注文画面に遷移し、
問い合わせボタンをタップすると、Inquiryアプリの問い合わせ画面に遷移するというフローを作成していきたいと思います。

実装方法

1. MicroAppをリンク

まずは、画面遷移をしたいMicroAppをリンクさせます。
リンクの方法は、以下記事にまとめていますので、詳しく見たい方はこちらをご覧ください。

Deliveryアプリを開いた状態で、
Project->Link Micro App (From Workspace)を選択します。

連携したいアプリを選択します。
OrderとInquiryに遷移させたいので、2つのMicroAppにチェックをつけてLinkボタンをクリックします。

これでMicroAppのリンクは完了です。

2. 画面遷移ロジック作成

次にこちらの記事を参考にしながら、画面遷移ロジックを作成していきましょう！

Navigation Managerで遷移先を定義

まずはNavigation Managerを使って、遷移先を定義していきます。

遷移元のDeliveryアプリを開き、Mobile->Navigation->NavigationModel.jsonを開きます。

NavigationModel.jsonに遷移先を定義していきましょう。
このように記載しました。

NavigationModel.json

{ 
    "Forms" : {
      "frmMain": {
        "preConditionConfig": [],
        "destinationConfig": {
          "callback": "frmMainNavigationHandler",
          "targetForms": [
            {
              "appName" : "Order",
              "friendlyName": "frmOrder"
            },
            {
              "appName" : "Inquiry",     
              "friendlyName": "frmInquiry"
            }
          ]
        }
      }
    }
}

1つのアプリ間で画面遷移する場合のロジックと異なる点として、appNameの情報が必要になります。
callbackで関数を実行し、どの画面に遷移させるかを判定していきます。

次にcallbackとして指定した、
frmMainNavigationHandlerの関数をNavigationControllerで定義していきましょう。

NavigationControllerで画面遷移ロジック作成

どの画面に遷移させるかを以下のようにロジック作成しました。

NavigationController.js

define({
  frmMainNavigationHandler : function(modelConfig){
    if(!modelConfig){
      return;
    }
    
    let destinationForm = null;
    
    if(modelConfig.navigateTofrmOrder === true){
      destinationForm = {
        "appName" : "Order",
        "friendlyName": "frmOrder"
      };
    } else if(modelConfig.navigateTofrmInquiry === true){
      destinationForm = {
        "appName" : "Inquiry",
        "friendlyName": "frmInquiry"
      };
    }
    return destinationForm;
  }
});

modelConfig.navigateTofrmOrderがtrueの場合は、OrderアプリのfrmOrderへ遷移
modelConfig.navigateTofrmInquiryがtrueの場合は、InquiryアプリのfrmInquiryへ遷移
するようにロジックを作成しました。

最後にDeliveryアプリのフォーム側でボタンをタップした時に、
上記のアクションを呼ぶように設定を行っていきましょう。

3. アクション作成

DeliveryアプリのfrmMainControllerを開き、以下のように記載します。

frmMainController.js

define({ 

  onClickOrder : function(){
    var navConfig = { "context" : this,"callbackModelConfig" : {"navigateTofrmOrder" : true},"params" : {}};
    var navManager = voltmx.mvc.getNavigationManager();
    navManager.navigate(navConfig);
  },
  
  onClickInquiry : function(){
    var navConfig = { "context" : this,"callbackModelConfig" : {"navigateTofrmInquiry" : true},"params" : {}};
    var navManager = voltmx.mvc.getNavigationManager();
    navManager.navigate(navConfig);
  }

 });

メイン画面に「注文」と「問い合わせ」のボタンを配置し、
それぞれのボタンを押すと画面遷移のAPIを呼んで、
パラメーターとしてどのボタンを押したかわかるようなconfig情報を渡すようにしています。

アクションが定義できたので、ボタンにアクションを設定していきます。
それぞれ以下のように設定しました！

注文ボタン	問い合わせボタン

今回NavigationManagerを使って画面遷移を作成する方法について紹介していますが、
アクションエディタでも別アプリへの画面遷移を設定することができます。

以下のようにアクションエディタで「Navigate to Form」のアクションを選択後、
右側のフォーム一覧をみると別アプリのフォームも表示されるようになります。
この設定は、MicroAppのリンクを行うことで設定が可能になりますのでリンクするのを忘れないようにしましょう。

簡易的なアプリであれば、アクションエディタでの設定でも良いですが、
チームで開発を行う場合は保守性の観点からControllerに書くことをおすすめします。

では最後に正常に動くかみてみましょう！

Deliveryアプリのログイン画面から同じアプリのメイン画面に遷移し、
Deliveryアプリのメイン画面から「注文」を押すと、Orderアプリの注文画面に遷移、
Deliveryアプリのメイン画面から「問い合わせ」を押すと、Inquiryアプリの問い合わせ画面に遷移することができました！

最後に

複数App間の画面遷移方法についてご説明しました！
単一アプリ内での画面遷移と異なる点として、
以下の2点だけ追加すれば良いのでとっても簡単だと思いました！

MicrpApp同士をリンクさせる
NavigationModel、NavigationControllerにappnameを指定

トライアンドエラーで実際に触ってみると、徐々に構造がわかってくるので、
是非試してみてくださいね！

参考