How to implement the Multi Flow pattern MD to FullScreen?

[Former Member]

Hi Experts,

I have a problem regarding implementing a multi flow pattern SAPUI5 application ( it concerns MD to Fullscreen ).

Is this possible using the component/routing mechanism?

I have defined 2 views as follows :

1 for the master details  with the name 'MasterDetail'

<mvc:View

  xmlns:mvc="sap.ui.core.mvc"

  displayBlock="true"

  xmlns="sap.m">

  <SplitApp id="splitAppId" />

</mvc:View>

1 for the full screen:

<mvc:View

  xmlns:mvc="sap.ui.core.mvc"

  displayBlock="true"

  xmlns="sap.m"

  <App id="appId" />

</mvc:View>

My component has the following routing:

rootView : "com.xx.tasklist.view.MasterDetail",

The routing configuration :

routing: {

  config : {

  routerClass : com.xx.tasklist.MyRouter,

  viewType : "XML",

  targetAggregation : "detailPages",

  viewPath : "com.xx.tasklist.view",

  clearTarget : false,

  transition: "slide"

  },

  routes : [

           {

           pattern : "",

           name : "OrderList",

           view : "OrderList",

           targetAggregation : "masterPages",

           targetControl : "splitAppId",

           viewLevel : 0,

          subroutes : [

                        {

                        pattern : "Order/{OrderNumber}",

                        name : "OrderDetails",

                        view : "OrderDetails",                                              

                        viewLevel : 1,

                       subroutes : [

                                     {

                                      pattern : "Operations/{OrderNumber}",

                                      name    : "Operations",

                                         view    : "Operations",

                                         viewLevel : 2,

                                         targetAggregation : "pages",

                               targetControl : "appId",

                                     }                                                                                                           

                                     ]

                        }

                        ]                     

           },

           ]

  }

I Have no problems with the OrderList and the OrderDetails views.

When i want to navigate to the Operation views :

this._oRouter.navTo("Operations", {OrderNumber : '1'}, true);

It fails with the the error :

Control with ID appId could not be found

Chrome debugger : The full screen view is not loaded

Any help/suggestions?

@PS : By another application implementing Full screen to Master Details was no problem.

Thanks in advance,

Regards

[Former Member · Accepted solution]

Yes it is possible.

1. The key point here is your rootview should be sap.m.App and not sap.m.splitapp

Your routing configuration should be like this.

      routing : {

                     config : {

                           viewType : "JS",

                           viewPath : "your sap.m.app path",

                           targetAggregation : "pages",                                

                           clearTarget : false,

                     },

                     routes : [

                           {

                                  pattern : "Operations/{OrderNumber}",                  

                                  name : "Operations",           

                                  view : "Operations",          

                                  targetControl : "appId",

                           },

                         {

                                   pattern : "splitview",

                                  name : "mysplit",                         // Here it should be the path to your sap.m.SplitApp

                                  view : "App",

                                  viewPath : "mdtofd",

                                  targetControl : "appId",

                                         subroutes : [{

                                                pattern : "",

                                                                 name : "OrderList",

                                                                  view : "OrderList",

                                                 preservePageInSplitContainer : true,

                                                targetAggregation : "masterPages",

                                                targetControl : "splitAppId",

                                                              subroutes : [{

                                                                     pattern : "Order/{OrderNumber}",

                                                                        name : "OrderDetails",

                                                                     view : "OrderDetails",

                                                                   targetControl : "splitAppId",

                                                                     targetAggregation : "detailPages"

                                                                     }]

                                         }]

                           },

                     ]

              }

Hope it solves your probelm

[former_member189237 · Accepted solution]

Hi Indrajith,

I am facing the same problem. I have one master detail view page. In the left master page i have list of few products and i put tone button in the detail page like view my products, So my requirements is that i need when i press the button it will open the same like master detail page but now i require the list should be with radio buttons means selectable and i will able to see the details of the products selected from the left panel.

Please help me if you can...

Thanks

[Former Member · Accepted solution]

Post the code what you have tried. And what errors do you get in console?

[former_member189237 · Accepted solution]

My detailView.js

sap.ui.jsview("splitappdemo.Details", {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

  * @memberOf splitappdemo.Details

  */

  getControllerName : function() {

  return "splitappdemo.Details";

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf splitappdemo.Details

  */

  createContent : function(oController) {

  var oLayout = new sap.ui.commons.layout.MatrixLayout({

  id: "matrixId",

  layoutFixed: true,

  columns: 2,

  width: '90%',

  widths: ['20%','80%']

  });

  oLayout.createRow(new sap.ui.commons.TextView({text:"Name", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/name}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"Price", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/price}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"Display", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/display}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"Storage", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/storage}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"Processor", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/processor}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"Memory", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/memory}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"OS", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/os}"})

  );

  return new sap.m.Page({

  title: "Details",

  content: [oLayout]

  });

  }

});

My masterview.js

sap.ui.jsview("splitappdemo.Details", {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

  * @memberOf splitappdemo.Details

  */

  getControllerName : function() {

  return "splitappdemo.Details";

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf splitappdemo.Details

  */

  createContent : function(oController) {

  var oLayout = new sap.ui.commons.layout.MatrixLayout({

  id: "matrixId",

  layoutFixed: true,

  columns: 2,

  width: '90%',

  widths: ['20%','80%']

  });

  oLayout.createRow(new sap.ui.commons.TextView({text:"Name", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/name}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"Price", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/price}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"Display", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/display}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"Storage", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/storage}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"Processor", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/processor}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"Memory", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/memory}"})

  );

  oLayout.createRow(new sap.ui.commons.TextView({text:"OS", design:sap.ui.commons.TextViewDesign.Bold}),

  new sap.ui.commons.TextView({text: "{item>/os}"})

  );

  return new sap.m.Page({

  title: "Details",

  content: [oLayout]

  });

  }

});

My master controller.js

sap.ui.controller("splitappdemo.Master", {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

* @memberOf splitappdemo.Master

*/

  onInit: function() {

  var oModel = new sap.ui.model.json.JSONModel("http://ajaxtown.com/playground/macSpecs.php");

  sap.ui.getCore().setModel(oModel,'data');

  },

  itemSelected: function() {

  var app = sap.ui.getCore().byId("appId");

  var list = sap.ui.getCore().byId("listId");

  var sItem = list.getSelectedItem();

  var sPath = sItem.oBindingContexts.data.sPath;

  var item = sap.ui.getCore().getModel('data').getProperty(sPath);

  var oModel = new sap.ui.model.json.JSONModel(item);

  sap.ui.getCore().setModel(oModel,'item');

  app.toDetail('detailsId','show');//show, fade, slide

  }

});

My Intro view.js

sap.ui.jsview("splitappdemo.Intro", {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

  * @memberOf splitappdemo.Intro

  */

  getControllerName : function() {

  return "splitappdemo.Intro";

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf splitappdemo.Intro

  */

  createContent : function(oController) {var oLayout1 = new sap.ui.commons.layout.MatrixLayout({layoutFixed: true, width: '300px', columns: 2});

    oLayout1.setWidths('200px', '200px');

    var oButton1 = new sap.m.Button({text: 'View My Details',

    press: oController.Pressed});

    oButton1.addStyleClass("CustomMargin"); //Add some additional left margin

    oButton2 = new sap.m.Button({text: 'Back To Home'});

    oLayout1.createRow(oButton1,oButton2);

    // Attach the layout to the page 

   return new sap.m.Page({

           title: "Initial Page",

           content: [oLayout1

           ]

    });

}

});

My Index.html

<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

  <script src="resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.layout"

  data-sap-ui-theme="sap_bluecrystal">

  </script>

  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <Style type = "text/css">

  #matrixId {

  margin: auto;

  Color : Blue;

  }

  </Style>

<script>

  sap.ui.localResources("splitappdemo");

  var oSplitApp = new sap.m.SplitApp("appId",{});

  var oIntroPage = new sap.ui.view({

  id: "introId",

  viewName: "splitappdemo.Intro",

  type: sap.ui.core.mvc.ViewType.JS

  })

  var oDetailsPage = new sap.ui.view({

  id: "detailsId",

  viewName:"splitappdemo.Details",

  type: sap.ui.core.mvc.ViewType.JS

  })

  var oMasterPage = new sap.ui.view({

  id: "masterId",

  viewName: "splitappdemo.Master",

     type: sap.ui.core.mvc.ViewType.JS

  })

  var oMaster1Page = new sap.ui.view({

  id: "master1Id",

  viewName: "splitappdemo.Master1",

  type: sap.ui.core.mvc.ViewType.JS

  });

  oSplitApp.addDetailPage(oIntroPage);

  oSplitApp.addMasterPage(oMasterPage).addDetailPage(oIntroPage); 

  oSplitApp.addMasterPage(oMaster1Page).addDetailPage(oDetailsPage);

  oSplitApp.setInitialDetail("introId");

  oSplitApp.setInitialMaster("masterId");

  oSplitApp.placeAt("content");

  </script>

  </head>

  <body class="sapUiBody" role="application">

  <div id="content"></div>

  </body>

</html>

My Output is

no i want to when i click to view my details i need it shows the master list with radio button means it navigate to same like view but with radio buttons in left side producys and on right side there details Please help me

Thanks

Navdeep

[former_member189237 · Accepted solution]

Did you get an Idea Indrajith. It can be possible through routing i think......

[Former Member · Accepted solution]

I have similar example . unzip the folder and import it.

You can even achieve the same using routing also.

Hope it helps

New folder (9).txt.zip

[former_member189237 · Accepted solution]

where is the zip Indrajith please tell me

[former_member189237 · Accepted solution]

Did you attach somewhere? Please tell me

[Former Member · Accepted solution]

I have attached it .Please do check it properly .

Rename it by removing .txt to newfolder(9).zip

[former_member189237 · Accepted solution]

Thanks Indrajith;

I will try through this. And will inform you if i will get sucess..

Thanks in advance

Navdeep

[former_member189237 · Accepted solution]

its not opening buddy it showing .txt content not able to get it. Please provide the solution.

[Former Member · Accepted solution]

pls rename it to .zip and then unzip the file

[former_member189237 · Accepted solution]

Its working and also i got fault in my code....

Thanks

[former_member189237 · Accepted solution]

Dear Indrajith,

I am facing a critical issue while i am binding the data with the Ui 5 from the service Url. Please find the snapshot for the same that I am facing the problem.

Please help me out from this problem!!!

Thanks in Advance

Navdeep Kumar

[Former Member · Accepted solution]

Please open a new thread and paste the code that you have tried

[former_member189237 · Accepted solution]

Hi Indrajith,

The problem is resolved as this is due to eclipse. My eclipse was not working correct at that time.

Thank you

Navdeep Kumar

[santhu_gowdaz]

you can navigation between the App To SplitApp and vice virsa. using to() method.

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.NavContainer

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.SplitContainer

[Former Member]

Thanks Santhosh for reply. But my question hoe to set the routing for such secanerio?

[santhu_gowdaz]

Go through this blog Navigate between single full view and split view

[Former Member]

The Blog you mentioned speaks about navigating from fullview to splitview. already mentioned that there was no problem implementing fullView to splitview

@PS : By another application implementing Full screen to Master Details was no problem.

[santhu_gowdaz]

sorry i didn't saw that