SAPUI5 Split App Application in SAP Web IDE

[Jayakrishnan]

Hi Experts,

    I am working on SAPUI5 Application development using SAP Web IDE. I have started to use this SAP web IDE few days back. Before that i have used Eclipse to develop  SAPUI5 Application. I have created the Employee List and Detail page using IDE. But this is a Full Screen view app. i am trying to change this full screen view into Split app.

   I dont want to use the Master-detail Template  i have done some app using the template.. How to convert this app into Split-app. Please help me on this.

    In SAPUI5 Fiori like 10 exercises , there is a file called App.view.js. There we mention the app type either App or Split-app. But how to do the same kind of coding here in SAP Web IDE.

Master Screen:

Detail Screen:

Master.view.xml code:

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

  controllerName="com.sap.ui.myapp.controller.Master">

  <App id="masterAppID">

  <pages>

  <Page id="pageID" title="Employee Details">

  <content>

  <List id="employeeList" headerText="Employee List" items="{/Employees}">

  <items>

  <StandardListItem

  title="{FirstName} {LastName}"

  iconDensityAware="false"

  iconInset="false"

  type="Navigation"

  press="onListItemPressed"/>

  </items>

  </List>

  </content>

  </Page>

  </pages>

  </App>

</mvc:View>

Thank you,

Regards,

JK

[SergioG_TX · Accepted solution]

Jayakrishnan,

make sure you have :

1) in your index.html - you should have:

sap.ui.getCore().attachInit(function(){
   new sap.m.Shell({
       app: new sap.ui.core.ComponentContainer({
           name: someName
       })
   }).placeAt("content")
})

2) then you should have a component.js file where you reference the app.view.xml
and set your model

3) in your app.view.xml you should have

<SplitApp>
    <masterPages>
        <!-- some views here for your master -->
    </masterPages>
    <detailPages>
         <!-- some views here as well for your detailed pages -->
    </detailPages>
</SplitApp>

[Jayakrishnan · Accepted solution]

Thank you for the reply.

1.  So as per your code, we need to embed both master and detail content in a single view?

  2. If it is i want to navigate to third page, that view should replace my detail view right, how that possible?

  3.I want to have a list in my master section, based on the selection details page should load with context. is that possible?.

[SergioG_TX · Accepted solution]

1) not on the same view, you would make a reference to those views from the container I gave you above, so if you have 1 master and 3 details... then the container should be like:

<masterPages>
   <mvc:XMLView viewName="views.Master" id = "master">
</masterPages>
<detailPages>
<mvc:XMLView viewName="views.p1" id = "p1">
<mvc:XMLView viewName="views.p2" id = "p2">
</detailPages>

2) yes navigating from your detail pages would replace your view in the detail container... keep in mind you may also have more than one master views (usually no more than 2) and you can also navigate in that container separate from your detail navigation.

3) yes by having a list on your master, youmay click on a list item and on the event you may navigate your detail views - you have the right idea

[Jayakrishnan · Accepted solution]

Thank you for your input.

[Former Member · Accepted solution]

Do you use routing? If in the webIDE you make a test app based on the splitapp template, you can go have a look at those files how the structure should be. The routing is in the manifest.json file.

[Jayakrishnan · Accepted solution]

Yes actually i tried that method yesterday, i got the solution. Thanks for the reply