SAPUI5 provides an additional control library called sap.m, which is optimized for mobile devices, but also runs fine in desktop browsers.
Procedure-step1
- Create an HTML page called mobile.html
- Add the HTML5 doctype definition:<!DOCTYPE html>" in the first line and the Internet Explorer-specific meta tag :<meta http-equiv="X-UA-Compatible" content="IE=edge" />" are the beginning of<head>element.This ensures that all browsers use the latest version of their rendering engine.
- Add a second meta tag:<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>.This lets all browsers treat the file as UTF-8 encoded (assuming that you use this encoding when editing/saving the file)
- In the HTML <body> there needs to be a place where the App HTML will go. Here we add a<div>element to<body>. The "sapUiBody" class should always be added to the<body>tag to initialize font and colors for the whole page:<body class="sapUiBody"> <!-- This is where the App will live: --> <div id="content"></div> </body>
- You can equally use thebodyitself, omitting the extradiv. In this case give the body the idcontent.
Initialize the Mobile App-step2
The sap.m library provides a control calledAppwhich is meant to be the root control of a mobile application. It provides the initialization of the HTML page, sets some meta tags to ensure an as-native-as-possible look&feel, and can manage different pages and the animations between them.
Procedure
Create the control and define the page that you want to display first:
// 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- Instead of using the Appcontrol, you can also usejQuery.sap.initMobile()to set up the HTML and use other full screen controls, such assap.m.Pageorsap.m.Carouselas root element of your app.
Add Content Pages
Typical mobile applications are often composed of a number of pages/views/screens between which the user can navigate. You now add two of them to your app.
Procedure-3
- Onesap.m.Pagecontrol is created, its title is set and the content is just one button:// 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 } }) });
When the Button is pressed, it triggers a drilldown navigation by callingapp.to("page2"), where page2 is the ID of the second page. You could also give the animation type. The default is a slide animation from right to left.
sap.m.Pagecontrols can be used as pages, and the aggregation is called pages, but other controls could be used as well.
- Add the following to the<script>section of the HTML page below the part, where you've initialized the app:// 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 tapped, the back button should navigate back up to page 1 }, icon: "http://www.sap.com/global/ui/images/global/sap-logo.png", content : new sap.m.Text({text:"Hello Mobile World!"}) });
showNavButtonis set totrueto get a Back button displayed. When this button is pressed, the handler callsapp.back(). This causes an inverse animation, which leads back to the main page.
- Add the two pages to the App:// add both pages to the App app.addPage(page1).addPage(page2);
- Finally place the app into the content area you've defined earlier.
app.placeAt("content"); // place the App into the HTML document
Prerequisites-step4
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.
- To load the SAPUI5 JavaScript file, that contains the library, add the following script tag in the<head>:<script src= "http://<server>:<port>/sapui5/resources/sap-ui-core.js" id= "sap-ui-bootstrap" data-sap-ui-libs= "sap.m" data-sap-ui-theme= "sap_bluecrystal"> </script>
Replace <server> and <port> with your local SAPUI5 installation.
NoteOnly "sap.m" library and "sap_bluecrystal" theme are loaded
Note that you are only loading thesap.mcontrol library and thesap_bluecrystal
theme.
i have run the below code in https://account.hanatrial.ondemand.com
SAPWEBID
<!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>
<!-- 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>output:
- SAP Managed Tags:
