Detail Page is not populating correctly

[Former Member]

Hello Gurus,

I am new to SAPUI5.

I have developed a Application using SplitApp control and detail page not showing on the right side of the split app control and it is displaying under the splitapp.

sap.ui.jsview("sap.nass.myTeam.view.US_SEPARATION", {


  /** 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 us_separation.US_SEPARATION
  */ 
  getControllerName : function() {
  return "sap.nass.myTeam.view.US_SEPARATION";
  },


  /** 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 inbox.SEPARATION
  */ 
  createContent : function(oController) {


  var oLayout1 = 
  new sap.ui.layout.form.ResponsiveGridLayout("L1",{
  columnsL: 1,
  columnsM: 1,
  columnsS: 1
  });





  var oForm1 = 
  new sap.ui.layout.form.Form("F1",{
// title: new sap.ui.core.Title({text: "Separate a Partner"}),
  editable: false,
  layout: oLayout1,
  expandable: true,
  formContainers: [

  new sap.ui.layout.form.FormContainer("F1C0",{
  title: "Additional Action Required",
  expandable: true,
  formElements: [
     new sap.ui.layout.form.FormElement({
      fields: [new sap.ui.commons.TextView({text: "You must complete the appropriate Manager's Separation Checklist to ensure this separation is processed according to company policies and local requirements. Checklists can be found in the Partner Resources Manual.", editable: false })  
      ]
     }),
     new sap.ui.layout.form.FormElement({
      fields: [new sap.ui.commons.HorizontalDivider ("Line1"),  
      ]    
     })
  ]
  }),                 
  new sap.ui.layout.form.FormContainer("F1C1",{
  title: "Partner Information",
  expandable: true,
  formElements: [
  new sap.ui.layout.form.FormElement({
  label: "Name",
  fields: [ new sap.ui.commons.TextField({value:"{/I0001_ENAME}", editable: false})
  ]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Partner No",
  fields: [new sap.ui.commons.TextField({value: "{/PERNR}", editable: false})
  ]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Manager/Supervisor Name",
  fields: [new sap.ui.commons.TextField({value: "{/SUP_NAME}", editable: false})
          ]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Position Title",
  fields: [new sap.ui.commons.TextField({value: "{/I0001_PLANS_TEXT}", editable: false})
          ]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Job Title",
  fields: [new sap.ui.commons.TextField({value: "{/I0001_STELL_TEXT}", editable: false})
          ]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Store/Dept. Description",
  fields: [new sap.ui.commons.TextField({value: "{/I0001_ORGEH_TEXT}", editable: false})
          ]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Store No./Cost Center",
  fields: [new sap.ui.commons.TextField({value: "{/I0001_KOSTL}", editable: false})
          ]
  }),
     new sap.ui.layout.form.FormElement({
      fields: [new sap.ui.commons.HorizontalDivider ("Line2"),  
      ]    
     })
  ]
  }),
  new sap.ui.layout.form.FormContainer("F1C2",{
  title: "Separation Details",
  expandable: true,
  formElements: [
  new sap.ui.layout.form.FormElement({
  label: "Separation Effective Date",
  fields: [new sap.ui.commons.DatePicker("Date1",{width: "12em", value:{ path: "/EFFECTIVE_DATE",type: new sap.ui.model.type.Date({style: "long", strictParsing: true})}})
  ]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Reason for Action",
  fields: [new sap.ui.commons.DropdownBox("sReason", { width: "12em", 
   items : [ new sap.ui.core.ListItem("sReason0", {text:""}),
             new sap.ui.core.ListItem("sReason1", {text:"Quit"}),
             new sap.ui.core.ListItem("sReason2", {text:"Involuntary Separation"}),
             new sap.ui.core.ListItem("sReason3", {text:"Voluntary Separation"}),
             new sap.ui.core.ListItem("sReason4", {text:"Retire"})
   ]}
  )]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Restitution Agreement",
  fields: [new sap.ui.commons.RadioButtonGroup({
  columns: 2,
  items: [new sap.ui.core.Item({text: "Yes"}),
         new sap.ui.core.Item({text: "No"})],
  selectedIndex : 1
  })]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Deduction Amount",
  fields: [new sap.ui.commons.TextField({ value: "{/DEDUC_AMOUNT}",
  width: "12em"})
  ]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Rehire Recommendation",
  fields: [new sap.ui.commons.RadioButtonGroup({
  columns: 2,
  items: [new sap.ui.core.Item({text: "Yes"}),
         new sap.ui.core.Item({text: "No"})],
  selectedIndex : 1
  })]
  }),
     new sap.ui.layout.form.FormElement({
      fields: [new sap.ui.commons.HorizontalDivider ("Line3"),  
      ]    
     })
  ]
  }),


  //////////////
  new sap.ui.layout.form.FormContainer("F1C3",{
  title: "Current Address",
  expandable: true,
  formElements: [
  new sap.ui.layout.form.FormElement({
  label: "Street & House No",
  fields: [new sap.ui.commons.TextField({value: "{/I0006_STRAS}", editable: false})
  ]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Postal Code/City",
  fields: [new sap.ui.commons.TextField({value: "{/I0006_PSTLZ} {/I0006_ORT01}", editable: false})
  ]
  }),
// new sap.ui.layout.form.FormElement({
// label: "District",
// fields: [new sap.ui.commons.TextField({value: "{/Ort01}", editable: false})
// ]
// }),
  new sap.ui.layout.form.FormElement({
  label: "Region",
  fields: [new sap.ui.commons.TextField({value: "{/I0006_STATE}", editable: false})
  ]
  }),
  new sap.ui.layout.form.FormElement({
  label: "Country",
  fields: [new sap.ui.commons.TextField({value: "{/I0006_LAND1}", editable: false})
  ]
  }),
     new sap.ui.layout.form.FormElement({
      fields: [new sap.ui.commons.HorizontalDivider ("Line4"),  
      ]    
     })
  ]
  }),



// new sap.ui.layout.form.FormContainer("F1C4",{
// title: "Comments",
// expandable: true,
// formElements: [
//   new sap.ui.layout.form.FormElement({
//   label: "Previous Comments",
//   fields: [new sap.ui.commons.TextArea({ value: "{/HRASR_PREVIOUS_NOTES}", height: "10em", editable: false, wrapping : sap.ui.core.Wrapping.Off})
//   ]
//   }),
//   new sap.ui.layout.form.FormElement({
//   label: "Current Comments",
//   fields: [new sap.ui.commons.TextArea({ value: "{/HRASR_CURRENT_NOTES}", height: "10em", wrapping : sap.ui.core.Wrapping.Off})
//   ]
//   })
// ]
// }),


  //////////////



  ]


  });
  //create a accept button
  var oButton3 = new sap.ui.commons.Button({
  text : "Check",
  style: sap.ui.commons.ButtonStyle.Accept,
  press : function() {oController.Check();} 
  })
  //create a reject button
  var oButton4 = new sap.ui.commons.Button({
  text : "Send",
  style: sap.ui.commons.ButtonStyle.Accept,
  press : function() {oController.Send();}
  })








oForm1.placeAt("content");
oButton3.placeAt("content");
oButton4.placeAt("content");







  }


});

Could you please help. this is very urgent.

Thanks

Shyam

[Former Member · Accepted solution]

Solved the issue by adding the below logic.

var page1 = 





new sap.m.Page({





title: "Separate a Partner",





showNavButton : true,





navButtonPress : function(handleNavBackToDetail) {oController.handleNavBackToDetail();},





              





content: [







  oForm1,





          oButton3,





          oButton4





          ]




});


 






return page1;

[former_member182372]

post the code for SplitApp  not  detail view

[Former Member]

Hi Maksim,

here is the code for splitApp.

sap.ui.jsview("sap.nass.myTeam.view.App", {


  getControllerName: function () {
  return "sap.nass.myTeam.view.App";
  },

  createContent: function (oController) {

  // to avoid scroll bars on desktop the root view must be set to block display
  this.setDisplayBlock(true);

  // create split app
  this.app = new sap.m.SplitApp();



  // load the master page
  var master = sap.ui.xmlview("Master", "sap.nass.myTeam.view.Master");
  master.getController().nav = this.getController();
  this.app.addPage(master, true);
  this.app.setMode(sap.m.SplitAppMode.StretchCompressMode);

// // load the Separation page
// var usSeparation = sap.ui.jsview("US_SEPARATION", "sap.nass.myTeam.view.US_SEPARATION");
// this.app.addPage(usSeparation, true);

  // load the empty page
  var empty = sap.ui.xmlview("Empty", "sap.nass.myTeam.view.Empty");
  this.app.addPage(empty, false);

  // done
  return this.app;
  }
});

Thanks

Shyam

[former_member182372]

StretchCompressMode? why not ShowHideMode?

[Former Member]

its a business requirement to display master page when navigating from one page to another page.

it didnt work even if i remove that logic.

[former_member182372]

Do you mean on tablet?

[Former Member]

Yes Maksim.

when they browsing the app in tablet, if we use don't use StretchCompressMode option it is hiding the master page.

we added StretchCompressMode option to display the master page when navigating between pages in tablet.

[former_member182372]

in addPage second parameter is bMaster so that means

this.app.addPage(usSeparation, true);

adds second master page

use

addMasterPage

or

addDetailPage

instead

[Former Member]

Hi Maksim,

updated the logic as mentioned above, still details page is populating below the master page.

sap.ui.jsview("sap.nass.myTeam.view.App", {


  getControllerName: function () {
  return "sap.nass.myTeam.view.App";
  },

  createContent: function (oController) {

  // to avoid scroll bars on desktop the root view must be set to block display
  this.setDisplayBlock(true);

  // create split app
  this.app = new sap.m.SplitApp();



  // load the master page
  var master = sap.ui.xmlview("Master", "sap.nass.myTeam.view.Master");
  master.getController().nav = this.getController();
  this.app.addMasterPage(master, true);
  this.app.setMode(sap.m.SplitAppMode.StretchCompressMode);

  // load the empty page
  var empty = sap.ui.xmlview("Empty", "sap.nass.myTeam.view.Empty");
  this.app.addDetailPage(empty, false);

  // done
  return this.app;
  }
});

Thanks

Shyam

[former_member182372]

do you use component? what`s the routing i nthat case

[Former Member]

Hi Maksim,

thanks for your replies.

I have uploaded my code in github and here is the link for the entire code.

https://gist.github.com/shyam0244/e417ba640a2c2ed57e64

I am using component.js to navigate from master page to detail page.

could you please take a look at the logic and let me know why it is not populating in the proper page.

thanks

shyam

[former_member182372]

sorry, no more ideas

in App.controller.js

to : function (pageId, context) {

var master = ("Master" === pageId);

...

app.addPage(page, master);

looks ok to me.