Show TOC

Run Your First Mobile AppLocate this document in the navigation structure

Process how to run your first mobile app.


Assumption for these instructions to work exactly as described: you have a Windows Computer (other operating systems will work as well, but the instructions may differ) and a current browser.


  1. Right-click on your desktop and choose Start of the navigation path New Next navigation step Text Document End of the navigation path.
  2. Enter a name for the new file, for example mobile.html, and confirm the extension change warning.
  3. Right-click on the new file and choose Edit. Make sure it opens in Notepad and not in MS Word.
  4. Copy and paste the HTML code below and save the file. Keep in mind that the SAPUI5 URL may need to be adapted.
  5. Drag and drop the file into the browser window.
  6. To load the example on a mobile device, you put the file on a server.
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>Mobile App in 23 Seconds Example</title>
         <!--replace "server" and "port" with your local installation or use>
         <script src="http://<server>:<port>/resources/sap-ui-core.js"
        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
           // create a mobile App
          // it initializes the HTML page for mobile use and provides animated page handling
          var app = new sap.m.App("myApp", {initialPage:"page1"}); // page1 should be displayed first   
          // create the first page of your application
          var page1 = new sap.m.Page("page1", {
              title: "Initial Page",
              content : new sap.m.Button({   // content is just one Button
                  text : "Go to Page 2",
                  press: function() {
            "page2");   // when pressed, it triggers drilldown to page 2
          // create the second page of your application
          var page2 = new sap.m.Page("page2", {
              title: "Page 2",
              showNavButton: true,       // page 2 should display a back button
              navButtonPress: function(){ 
                  app.back();            // when pressed, the back button should navigate back up to page 1
              content : new sap.m.Text({text:"Hello Mobile World!"})
          app.addPage(page1).addPage(page2); // add both pages to the App
          app.placeAt("content"); // place the App into the HTML document
      <body class="sapUiBody">
        <div id="content"></div>


You should now see the following mobile App:

Now you can navigate to the second page by clicking the button.

To open the application on a real mobile device, you can also put the HTML document on a Web server and load the resulting URL in your mobile browser.

Next Steps

You could now…

  • Try different navigation animation types (e.g. add fade or flip as second parameter to the"page2") call)
  • Add more pages
  • Add more content to the pages
  • Try out other mobile controls like the sap.m.Popover