Run Your First Mobile App

Process how to run your first mobile app.

Prerequisites

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.

Procedure

Right-click on your desktop and choose New Text Document .
Enter a name for the new file, for example mobile.html, and confirm the extension change warning.
Right-click on the new file and choose Edit. Make sure it opens in Notepad and not in MS Word.
Copy and paste the HTML code below and save the file. Keep in mind that the SAPUI5 URL may need to be adapted.
Drag and drop the file into the browser window.

To load the example on a mobile device, you put the file on a server.

<!DOCTYPE HTML>
<html>
  <head>
    <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 https://sapui5.hana.ondemand.com-->
     <script src="http://<server>:<port>/resources/sap-ui-core.js"
        id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.m"
        data-sap-ui-theme="sap_bluecrystal">
     </script>

    <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
    <script>
       // 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() {
                  app.to("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
   </script>
  </head>
  <body class="sapUiBody">
    <div id="content"></div>
  </body>
</html>

Results

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 app.to("page2") call)
Add more pages
Add more content to the pages
Try out other mobile controls like the sap.m.Popover
…