Implementing the Root View for a List-Detail Application

1. Import the listdetail.tar project into your Business Application Studio.

   1. Locate the listdetail.tar file in your training files.

   2. Log into the training SAP Business Application Studio as shown in a previous training.

   3. Select the menu File → Open Folder....

   4. Select or Enter the /home/user/projects/ folder and choose OK.

   5. Select the menu File → Import Project...

   6. Select the listdetail.tar file and choose OK.

2. Preview the application. For the moment it is the same as the previous full-screen application

   1. Right-click on the webapp folder and choose Preview Application.

   2. Select start local...

      A list of carriers should be displayed.

1. Open the Application main view and add an sap.f.FlexibleColumnLayout element inside the App element with the listed properties and values:

   Attribute	Value
   id	layout
   layout	{mainView>/layout}
   backgroundDesign	Translucent

   1. Open the App.view.xml file in the view folder of your project.

   2. Add the sap.f namespace with the prefix f to the App.view.xml file. Add following code after xmlns="sap.m":

      Code Snippet

      Copy codeSwitch to dark mode

      1
      xmlns:f="sap.f"

   3. Add an sap.f.FlexibleColumnLayout element inside the App element with the given attribute-value pairs :

      Code Snippet

      Copy codeSwitch to dark mode

      123456
      <f:FlexibleColumnLayout
        id="layout"
        layout="{mainView>/layout}"
        backgroundDesign="Translucent">
      </f:FlexibleColumnLayout>
      

   4. Save your changes. Your code should now look like the following:

      

In this task, you implement the controller of the App view to link the JSON model for layout to the Application.

1. Open the App.controller.js file. Add sap/ui/model/JSONModel to the namespace.

   1. Open the App.controller.js file located in the controller folder of your project.

   2. Update the code as follows :

   Code Snippet

   Copy codeSwitch to dark mode

   12345678
   
   sap.ui.define(
       [
           "sap/ui/core/mvc/Controller",
           "sap/ui/model/json/JSONModel"
       ],
       function(BaseController, JSONModel) {
   ...

2. Implement the onInit function. Create an JSON-Model with an attribute layout and assign the created Model to the App view.

   1. Add the following code into the onInit function:

      Code Snippet

      Copy codeSwitch to dark mode

      123456
      
        var oViewModel = new JSONModel({
          layout : "OneColumn"
        });
      
        this.getView().setModel(oViewModel, "mainView");