Skip to Content

Hi,

After following SAPUI5 project setup for beginners with HTML views – Part1: Installation you can start with development in SAPUI5. In this blog I’ll explain a good way to build your SAPUI5 project with navigation between two views and how to pass data between views.

This blog is the second part of the blog series “SAPUI5 project setup for beginners with HTML views”. All different parts:

Part1: Installation

Part2: Navigation and storing data with a global model – full project https://github.com/lemaiwo/SAPUI5-part1

Part3: Navigation and storing data with different models – full project https://github.com/lemaiwo/SAPUI5-part2

Part4: Testing your application


Part2: Navigation and storing data with a global model

Overview:

  1. Create a SAPUI5 project with a JS View
  2. Create two new HTML Views
  3. Create a javascript file and extend the SAP application object
  4. Change the theme and add the required library’s
  5. Instantiate the two views and the navigation in a root View
  6. Add content to the first HTML View and create the functions in the controller
  7. Add  content to the second HTML View and create the functions in the controller
  8. Test the application

Create a SAPUI5 project with a JS View

Start with creating your SAPUI5 project

/wp-content/uploads/2013/11/pic1_323964.png

/wp-content/uploads/2013/11/pic2_323965.png

Select Desktop as traget device. The mobile library will be added later to the project later. It’s possible to combine the two library’s.

/wp-content/uploads/2013/11/pic3_324074.png

Create a Javascript View, which will be the container for the application.

/wp-content/uploads/2013/11/pic4_324075.png/wp-content/uploads/2013/11/pic5_324076.png

Create two new HTML Views


Create two html views, a First view and a Second view. Later in this blog I will pass data between these views.

Starting with the firstview

/wp-content/uploads/2013/11/pic6_324077.png

/wp-content/uploads/2013/11/pic7_324078.png/wp-content/uploads/2013/11/pic8_324079.png

Create a javascript file and extend the SAP application object


After creating these two views, create a javascript file called “Application.js” under the folder WebContent. This file will be used for declaring our global models and instantiate the application container view.


/wp-content/uploads/2013/11/pic9_324080.png

/wp-content/uploads/2013/11/pic10_324081.png

Add the following code to this javascript file:

jQuery.sap.declare("Application");
jQuery.sap.require("sap.ui.app.Application");
sap.ui.app.Application.extend("Application", {
       init : function() {
             // set global models
             var model = new sap.ui.model.json.JSONModel();
             sap.ui.getCore().setModel(model, "model");
       },
       main : function() {
             // create app view and put to html root element
             var root = this.getRoot();
             sap.ui.jsview("app", "firstsapui5project.App").placeAt(root);
       }
});

This code defines this file with the name “Application”. So the file can be used with this name. The code loads the SAP version of application, “sap.ui.app.Application”, and then extends it. In the init the global modal is defined which is in currently empty. This could be connected with a gateway service. In the main function the “App” view is pushed to the root div on the index.html which will come in the next step.

Change the theme and add the requires library’s

In the index.html page is some default SAPUI5 generated content:

     

<script src="resources/sap-ui-core.js"
              id="sap-ui-bootstrap"
              data-sap-ui-libs="sap.ui.commons"
              data-sap-ui-theme="sap_goldreflection">
 </script>
             <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
           sap.ui.localResources("firstsapui5project");
           var view = sap.ui.view({id:"idApp1", viewName:"firstsapui5project.App", type:sap.ui.core.mvc.ViewType.JS});
           view.placeAt("content");
</script>

Delete the second part and start changing the first part where the SDK is defined. In my case I’ve changed the src to my local version of the SDK. This is two folders up from the index.html page.  The SDK is in the same folder as the project. It has to go two levels up because the index.html page is under the WebContent folder. Instead of the local SDK, it is possible to use the online version and change the src to https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js

/wp-content/uploads/2013/11/pic14_324088.png

Add the sap library’s sap.m and sap.me to data-sap-ui-libs and change the theme to the new Fiori look-a-like design, “Blue Cristal”, in data-sap-ui-theme.

<script src="../../HTML5Evaluation_complete_1.16.3_1/sapui5-sdk-static/resources/sap-ui-core.js"
                             id="sap-ui-bootstrap"
                              data-sap-ui-libs="sap.ui.commons, sap.m, sap.me"
                              data-sap-ui-theme="sap_bluecrystal">
</script>

Next step is to load all the files and the Application.js .

Create an object of the “Application” with the name of the div where the views have to be placed, “content”.

<script>
                              sap.ui.localResources("firstsapui5project");
                              //Register your application js
                              jQuery.sap.registerModulePath('Application', 'Application');
                              // Load your application js
                              jQuery.sap.require("Application");
                              //Create an object of the Application class and set content as root
                              //the DIV content will be used to put the views in
                              var app = new Application({ root : "content" });
                    </script>

Instantiate the two views and the navigation in a root View

So far so good, the index.html calls the Application which, again, calls the first view. This view is a jsview which will be used as a container for the application. Now the container view has to be build. Therefore I will copy the content of the App.controller.js and the App.view.js from the inbox application of the mobile demo kit in the test-resources of the SAPUI5 SDK. This is explained in part 1 of this blog: SAPUI5 project setup for beginners with HTML views – Part1: Installation

/wp-content/uploads/2013/11/pic11_324082.png

In the controller I change the custom part with the views and preferences (such as the transition,…)

Change the Pages, default page and the first part in getViewName to the name of the folder where all your views are stored.

//=== Custom Part ==================================================================
          PAGE : {
                    FirstView :                     { type : "HTML",                     app : "App",                    master : undefined },
                    SecondView :                     { type : "HTML",                     app : "App",                    master : undefined }
          },
          getDefaultPage : function() {
                    return "FirstView";
          },
          getViewType : function(pageId) {
                    return this.PAGE[pageId].type;
          },
          getViewName : function(pageId) {
                    return "firstsapui5project." + pageId;
          },
          getAppId : function(pageId) {
                    return this.PAGE[pageId].app;
          },
          isMaster : function(pageId) {
                    return this.PAGE[pageId].master;
          },
          getTransition : function(pageId) {
                    if ("App" === this.getAppId(pageId)) {
                              return "flip";
                    } else if (jQuery.device.is.phone || this.isMaster(pageId)) {
                              return "slide";
                    } else {
                              return "show";
                    }
          },
          isRootInApp: function(pageId) {
                    return false;
          },
          writeToHistory : function(pageId) {
                    return true;
          },

Everything generic may stay the same and can be reused. This code is used in the application for the navigation between pages. Also add the following at top of the page:

jQuery.sap.require(“sap.m.InstanceManager”);

jQuery.sap.require(“jquery.sap.history”);

For the App.view.js we add the following code to the method createContent. This is based on the App.view.js from the inbox application in the test-resources.

createContent : function(oController) {
                    // to avoid scrollbars on desktop the root view must be set to block display
                    this.setDisplayBlock(true);
                    // create app control
                    this.shell = new sap.m.Shell("Shell", {
                              title : "My First SAPUI5 Project"
                    });
                    this.app = new sap.m.App("App");
                    // add only the first page. Second page is lazy loaded
                    this.app.addPage(sap.ui.htmlview("FirstView", "firstsapui5project.FirstView"));
                    this.app.addPage(sap.ui.htmlview("SecondView", "firstsapui5project.SecondView"));
                    this.shell.setApp(this.app);
                    // done
                    return this.shell;
          }

The code instantiate a Shell component and an App component. It also instantiate the two HTML views and add them to the App component. The first view added to the App component will be shown on the screen. In the last step the App component is added to the Shell component and it returns the Shell component.

All available views are instantiated but only the first one is shown. The first parameter to instantiate the htmlview is the name of the view and has to be identically to the name of the PAGE in the App.controller.js. The second parameter is the id of the view which you can find at top of the page of the html view as well in the controller as in the view.

Add content to the first HTML View and create the functions in the controller

In the first HTML view I’ve added the following code between the template tags:

<div data-sap-ui-type="sap.m.Page" data-title="First View">
                    <div data-sap-ui-aggregation="content">
                              <div data-sap-ui-type="sap.ui.commons.form.Form" id="myForm">
                                        <div data-sap-ui-aggregation="layout" data-sap-ui-type="sap.ui.commons.form.ResponsiveLayout"id="myLayout"></div>
                                        <div data-sap-ui-aggregation="formContainers">
                                                  <div data-sap-ui-type="sap.ui.commons.form.FormContainer" id="myInfoContainer" data-title="Form Input">
                                                            <div data-sap-ui-aggregation="formElements">
                                                            <!-- input field -->
                                                                      <div data-sap-ui-type="sap.ui.commons.form.FormElement">
                                                                                <div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-linebreak="true" data-margin="false"></div>
                                                                                <div data-sap-ui-aggregation="label" data-sap-ui-type="sap.m.Label" id="inputLabel" data-text="Input">
                                                                                          <div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "2"></div>
                                                                                </div>
                                                                                <div data-sap-ui-aggregation="fields" data-sap-ui-type="sap.m.Input" id="inputValue" data-value="{model>/input}">
                                                                                          <div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "8"></div>
                                                                                </div>
                                                                                <div data-sap-ui-aggregation="fields" data-sap-ui-type="sap.m.Button" id="btn1" data-text="To Second Page" data-tap="secondView">
                                                                                          <div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "2"></div>
                                                                                </div>
                                                                      </div>
                                                            </div>
                                                  </div>
                                        </div>
                              </div>
                    </div>
                    <div data-sap-ui-aggregation="customHeader">
                              <div data-sap-ui-type="sap.m.Bar">
                                        <div data-sap-ui-aggregation="contentMiddle">
                                                  <div data-sap-ui-type="sap.m.Label" data-text="First View">
                                                  </div>
                                        </div>
                              </div>
                    </div>
          </div>

The first DIV is to define the page and it is possible to add a title. In this DIV, there are two other parts. ther is the content and the custom header.

In the custom header I add the bar component with a label in the middle for the title of the first view.

The other part, the content part, is the part which is the main of the application. Here I’ve added a form with responsive layout which contains a label, input and a button.The input field is binded to the global model defined in the Application.js: data-value=”{model>/input}”


In the button we add a tap event: data-tap=”secondView”

The method behind this tap event is defined in the controller of the first view:

secondView: function(){
                    var bus = sap.ui.getCore().getEventBus();
                    bus.publish("nav", "to", {
                              id : "SecondView"
                    });
          }

Use the EventBus to navigate to the SecondView, therefore  the EventBus needs the ID of the view which is defined in App container

Add  content to the second HTML View and create the functions in the controller

In the seconde view I’ve added the following html code between the template tags:

<div data-sap-ui-type="sap.m.Page" data-title="Second View">
                    <div data-sap-ui-aggregation="content">
                              <div data-sap-ui-type="sap.ui.commons.form.Form" id="myForm">
                                        <div data-sap-ui-aggregation="layout" data-sap-ui-type="sap.ui.commons.form.ResponsiveLayout"id="myLayout"></div>
                                        <div data-sap-ui-aggregation="formContainers">
                                                  <div data-sap-ui-type="sap.ui.commons.form.FormContainer" id="myInfoContainer" data-title="Option 1">
                                                            <div data-sap-ui-aggregation="formElements">
                                                            <!-- input field -->
                                                                      <div data-sap-ui-type="sap.ui.commons.form.FormElement">
                                                                                <div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-linebreak="true" data-margin="false"></div>
                                                                                <div data-sap-ui-aggregation="label" data-sap-ui-type="sap.m.Label" id="inputLabel" data-text="Input">
                                                                                          <div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "2"></div>
                                                                                </div>
                                                                                <div data-sap-ui-aggregation="fields" data-sap-ui-type="sap.m.Text" id="inputValue" data-text="{model>/input}">
                                                                                          <div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "10"></div>
                                                                                </div>
                                                                      </div>
                                                            </div>
                                                  </div>
                                        </div>
                              </div>
                    </div>
                    <div data-sap-ui-aggregation="customHeader">
                              <div data-sap-ui-type="sap.m.Bar">
                                        <div data-sap-ui-aggregation="contentLeft">
                                                  <div data-sap-ui-type="sap.m.Button" data-icon="sap-icon://nav-back" data-tap="back">
                                                  </div>
                                        </div>
                                        <div data-sap-ui-aggregation="contentMiddle">
                                                  <div data-sap-ui-type="sap.m.Label" data-text="Second View">
                                                  </div>
                                        </div>
                              </div>
                    </div>
          </div>


This is a comparable to the first view except for the input field. The input field is changed to a text view, but also bound to the global model: data-text=”{model>/input}”

In the customHeader I’ve added an back button:

                   <div data-sap-ui-aggregation="contentLeft">
                                                  <div data-sap-ui-type="sap.m.Button" data-icon="sap-icon://nav-back" data-tap="back">
                                                  </div>
                   </div>

In the controller we have to add a function to catch the tap event on the back button:

back: function(){
                    var bus = sap.ui.getCore().getEventBus();
                    bus.publish("nav", "back");
          }

Test the application

Now you are ready to test the application. For testing this application there is SAPUI5 project setup for beginners with HTML views – Part4: Testing your application with the required steps:

First View:

/wp-content/uploads/2013/11/pic12_324084.png

Second View:

/wp-content/uploads/2013/11/pic13_324085.png

As you can see the text that we have typed in the first view is visible in the second screen. This is how you can pass data from one view to another. But there are other ways like in the following blog:

You can find the full project at https://github.com/lemaiwo/SAPUI5-part1

Next step Part3: Navigation and storing data with different models

Kind regards,

Wouter

To report this post you need to login first.

11 Comments

You must be Logged on to comment or reply to a post.

  1. Tom Van Doorslaer

    Hi Wouter,

    Cool to see that you also started sharing your knowledge with the eco-system!

    I’ll keep an eye open for your contributions to HANA, SAPUI5 and Gateway.

    cheers!

    (0) 
  2. Sagar Patel

    Hi Wouter,

    Thanks for excellent post. I tried to follow all steps you provided. But I am getting a warning, “Unknown Tag(Template).” for both views First and Second. Could you please suggest on how to resolve this?.

    I have set HTML5 as a Document Type.

    Regards,

    Sagar

    (0) 
      1. Sagar Patel

        Hi Wouter,

        When browser tries to run Application.js, from the statement: jQuery.sap.require(“sap.ui.app.Application”); I am getting following error:

        1. jQuery.sap.requiresap-ui-core.js:80
        2. (anonymous function)
        (0) 
          1. Sagar Patel

            Thanks Wouter, I found the problem with JQuery. Installed again from Eclipse marketplace and working fine now.. Thanks a lot for help!

            Regards,

            Sagar

            (0) 
  3. meghal shah

    Dear Expert ,

    I have created Project With name “Sonal “.

    when I tried to execute that project i got the blank screen.

    I got the following Errors.

    Please suggest.

    1.GET https://sapui5.hana.ondemand.com/sdk/resources/firstsapui5project/FirstView.view.html 404 (Not Found)

    2. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:52143‘ is therefore not allowed access. The response had HTTP status code 404.

    3.Uncaught Error: resource firstsapui5project/FirstView.view.html could not be loaded from https://sapui5.hana.ondemand.com/sdk/resources/firstsapui5project/FirstView.view.html. Check for ‘file not found’ or parse errors.     

    Regards,

    Meghal Shah

    (0) 
  4. Sandeep Malhotra

    Hello Wouter,

    Nice Blog. I had downloaded the project from GitHub ( as mentioned by you).

    When I tried to test it I got error. Upon checking I found In your project, SDK is missing. I tried to download from the internet but unable to download the SDK.

    Kindly advise.

    Regards,

    Sandeep

    (0) 

Leave a Reply