- Page 2 and 3: Table of Contents 1 SAPUI5 Develope
- Page 4 and 5: 6.1.5 sap-ui5 Variant for Bootstrap
- Page 6 and 7: 11 Extending SAPUI5 Applications. .
- Page 8 and 9: 14.3 An MVC Demo Application. .....
- Page 10 and 11: 2 Installing SAPUI5 Provides inform
- Page 12 and 13: Required Software Components for SA
- Page 14 and 15: 2.3 Upgrading jQuery for SAPUI5 Whe
- Page 16 and 17: 3 Getting Started with SAPUI5 Here
- Page 18 and 19: sap_goldreflection) and the SAPUI5
- Page 20 and 21: set properties, e.g. the text (ther
- Page 22 and 23: This lets all browsers treat the fi
- Page 24 and 25: 3. Add the two pages to the App: //
- Page 26 and 27: Now you can navigate to the second
- Page 28 and 29: 3.3.1 Create an SAPUI5 Application
- Page 30 and 31: Results After finishing the wizard,
- Page 32 and 33: text : "Hello JS View" }); aControl
- Page 34 and 35: Results When you finish the wizard,
- Page 36 and 37: name= "example.mvc.test2" > 3.3.
- Page 38 and 39: 3.3.7 Linking your Eclipse Editor t
- Page 40 and 41: All properties and events are inser
- Page 42 and 43: d) Save the code and run it in the
- Page 44 and 45: 44 P U B L I C © 2014 SAP AG or an
- Page 46 and 47: Browser Microsoft Internet Explorer
- Page 48 and 49: Browser Supported Google Chrome Saf
- Page 50 and 51: 3.4.5 sap.makit iOS iOs is supporte
- Page 52 and 53:
Browser Google Chrome Web View Supp
- Page 54 and 55:
Note A specific suffix .hdbtextbund
- Page 56 and 57:
Related Information Testing SAPUI5
- Page 58 and 59:
Depending on the libraries you use,
- Page 60 and 61:
3.8.2.2 Use a SimpleProxyServlet fo
- Page 62 and 63:
● When building your own protocol
- Page 64 and 65:
● ● ● Support development in
- Page 66 and 67:
4.1.1 Models A model holds the data
- Page 68 and 69:
This method is used to create the U
- Page 70 and 71:
}] } You nest the JSON objects anal
- Page 72 and 73:
4.1.3 Controllers A controller in S
- Page 74 and 75:
4.1.4.1 Binding Modes A model imple
- Page 76 and 77:
The mobile library, called sap.m, i
- Page 78 and 79:
The ComponentContainer control wrap
- Page 80 and 81:
Related Information Model View Cont
- Page 82 and 83:
Related Information SAPUI5 Componen
- Page 84 and 85:
Related Information Preparing [page
- Page 86 and 87:
correctly, this will be possible. I
- Page 88 and 89:
ackend data and services. Others ar
- Page 90 and 91:
Business Scenario We are almost rea
- Page 92 and 93:
The app is made up of a number of m
- Page 94 and 95:
interface (UI) controls. Further, t
- Page 96 and 97:
Step 12: NotFound View [page 146] 5
- Page 98 and 99:
complex binding syntax in declarati
- Page 100 and 101:
Metadata After the initial declarat
- Page 102 and 103:
There are actually three models tha
- Page 104 and 105:
5.2.3 Step 3: Navigation and Routin
- Page 106 and 107:
} ] { } name : "catchallMaster", vi
- Page 108 and 109:
}, sap.ui.core.routing.Router.proto
- Page 110 and 111:
var oIconTabBar = oView.byId("idIco
- Page 112 and 113:
Related Information Navigation [pag
- Page 114 and 115:
Using the sap.ui.Device library, va
- Page 116 and 117:
We see from the Master view example
- Page 118 and 119:
| +-- i18n/ | | | +-- messageBundle
- Page 120 and 121:
We start with the view declaration
- Page 122 and 123:
{ this.getView().byId("list").attac
- Page 124 and 125:
This automatic request for a count
- Page 126 and 127:
5.2.9 Step 9: Detail View View We'l
- Page 128 and 129:
While the formatter functions were
- Page 130 and 131:
We're not making an explicit call t
- Page 132 and 133:
The IconTabFilters for the Supplier
- Page 134 and 135:
... ... ... ... This means th
- Page 136 and 137:
And it looks like this when the cat
- Page 138 and 139:
It's an sap.m.Page, with an sap.ui.
- Page 140 and 141:
This section is similar to the Basi
- Page 142 and 143:
mPayload.DiscontinuedDate = this.da
- Page 144 and 145:
}, } If all is ok with the form inp
- Page 146 and 147:
5.2.12 Step 12: NotFound View There
- Page 148 and 149:
When navigating to an unknown URL,
- Page 150 and 151:
Resource sap-ui-core.js Description
- Page 152 and 153:
6.1.1 Standard Variant for Bootstra
- Page 154 and 155:
Note You can combine the preload co
- Page 156 and 157:
6.3 Configuration of the SAPUI5 Run
- Page 158 and 159:
Note The name of the window propert
- Page 160 and 161:
Option Type Default Value URL Modif
- Page 162 and 163:
Option Type Default Value URL Modif
- Page 164 and 165:
Option Type Default Value URL Modif
- Page 166 and 167:
Option Type Default Value URL Modif
- Page 168 and 169:
Option Type Default Value URL Modif
- Page 170 and 171:
Option Type Default Value URL Modif
- Page 172 and 173:
● ● ● ● If no version is d
- Page 174 and 175:
7 Models and Data Binding Data bind
- Page 176 and 177:
in the control constructor by using
- Page 178 and 179:
The next step covers the creation o
- Page 180 and 181:
2. With a bundleUrl that points to
- Page 182 and 183:
Related Information Models and Data
- Page 184 and 185:
} } ] }, { } phone: "734" name: "Su
- Page 186 and 187:
You can also use custom query optio
- Page 188 and 189:
The application has to specify the
- Page 190 and 191:
7.2.1.3.2.1 Experimental Two-Way Bi
- Page 192 and 193:
7.2.1.4.1 Sorting and Filtering in
- Page 194 and 195:
7.2.1.5 Implementing a Custom Model
- Page 196 and 197:
7.2.4 Binding Controls to the Model
- Page 198 and 199:
The most convenient way to define a
- Page 200 and 201:
}); validateValue: function(oValue)
- Page 202 and 203:
The factory function gets the param
- Page 204 and 205:
); new sap.ui.commons.Label({text:
- Page 206 and 207:
7.4.2 Handling Wrong User Input You
- Page 208 and 209:
maxIntegerDigits: 99, // maximal nu
- Page 210 and 211:
The format patterns must be defined
- Page 212 and 213:
7.4.4.1 sap.ui.core.format.DateForm
- Page 214 and 215:
parts: [ {path: "/firstName", type:
- Page 216 and 217:
To use the feature in your SAPUI5 a
- Page 218 and 219:
7.5.2.3 Using Extended Syntax in XM
- Page 220 and 221:
8 Building the UI This section prov
- Page 222 and 223:
Note If controls are located in a s
- Page 224 and 225:
8.2.4 Using CSS Style Sheets in XML
- Page 226 and 227:
jQuery.sap.newObject(sap.ui.core.mv
- Page 228 and 229:
If you want to modify the control w
- Page 230 and 231:
Related Information Fragments [page
- Page 232 and 233:
This fragment can be instantiated f
- Page 234 and 235:
Example of an Inline XML Fragment /
- Page 236 and 237:
The other possible ID of the second
- Page 238 and 239:
// define a new (simple
- Page 240 and 241:
}); } return oDialog ; 8.8.3.1.1 Us
- Page 242 and 243:
title}"}} {{#each path="/persons"}
- Page 244 and 245:
sample code jQuery(function() { });
- Page 246 and 247:
With this configuration, the route
- Page 248 and 249:
● ● ● ● ● ● ● ● vie
- Page 250 and 251:
● type - view type 8.10.4 Route M
- Page 252 and 253:
Related Information Defining the Co
- Page 254 and 255:
● ● ● publicMethods: List of
- Page 256 and 257:
} 8.11.1.2.3 Event Handler Methods
- Page 258 and 259:
8.11.1.4 Examples for Creating and
- Page 260 and 261:
To add a grey background, a red bor
- Page 262 and 263:
}, renderer: {} // add nothing, jus
- Page 264 and 265:
jQuery.proxy(this.handleClick, this
- Page 266 and 267:
Renderer Class (sap.ui.core.Rendere
- Page 268 and 269:
SAPUI5 core provides mechanisms for
- Page 270 and 271:
the top after the end of the list w
- Page 272 and 273:
Note The W3C officially recommends
- Page 274 and 275:
If an application is using SAPUI5,
- Page 276 and 277:
CSS class name CSS property sap_blu
- Page 278 and 279:
● ● ○ ○ Do not hard-code co
- Page 280 and 281:
9.1.1 Modularization and Dependency
- Page 282 and 283:
of bootstrap). The resulting URL is
- Page 284 and 285:
further code of enclosing module ..
- Page 286 and 287:
loaded, module B will be loaded and
- Page 288 and 289:
Resource Servlet For Java Servlet c
- Page 290 and 291:
http://%server%:%port%/sapui5 This
- Page 292 and 293:
The cache buster mechanism allows t
- Page 294 and 295:
Note The Application Cache Buster d
- Page 296 and 297:
9.2 SAPUI5 Components Components ar
- Page 298 and 299:
Related Information Creating a New
- Page 300 and 301:
}); } }, customizing: { // - serves
- Page 302 and 303:
} }); 9.2.1.2 Methods Controlling t
- Page 304 and 305:
mylib/example/component/Component.j
- Page 306 and 307:
} "version": "0.1.0", "description"
- Page 308 and 309:
To access the configuration without
- Page 310 and 311:
SAP Language Code BCP47 Language Ta
- Page 312 and 313:
To make sure that the jQuery.sap.re
- Page 314 and 315:
Note The current data binding imple
- Page 316 and 317:
"samples.components.ext.customer.Cu
- Page 318 and 319:
11.4 View Replacement If the extens
- Page 320 and 321:
11.5.1 Providing Hooks in the Stand
- Page 322 and 323:
Limitations The view modifications
- Page 324 and 325:
12.1 Handling Navigation and Lifecy
- Page 326 and 327:
These events can be used to create
- Page 328 and 329:
12.2.1 Built-in Adaptation of SAPUI
- Page 330 and 331:
As only one page per screen can be
- Page 332 and 333:
}); }) ] }) ] To enable the SplitAp
- Page 334 and 335:
] }); text: "Button 1", layoutData:
- Page 336 and 337:
growFactor. If, for example, a hori
- Page 338 and 339:
Similarly, when not running on desk
- Page 340 and 341:
Samples You find a lot of samples i
- Page 342 and 343:
The following table shows the diffe
- Page 344 and 345:
12.3.1.2 Swipe for Action in Lists
- Page 346 and 347:
12.3.1.2.3 Methods List provides th
- Page 348 and 349:
new sap.m.Column({ // first column
- Page 350 and 351:
The table is constructed in the nor
- Page 352 and 353:
12.3.4 Highlighting Rows and Column
- Page 354 and 355:
Note Before release 1.16, the sap.m
- Page 356 and 357:
On mobile, we know that we do not h
- Page 358 and 359:
When displaying information in a Po
- Page 360 and 361:
Table Personalization Dialog The ta
- Page 362 and 363:
The interface is simple: on instant
- Page 364 and 365:
type: new sap.ui.model.type.Float({
- Page 366 and 367:
● The simple type is the default
- Page 368 and 369:
12.4.3 Using the Facet Filter List
- Page 370 and 371:
Example The following example shows
- Page 372 and 373:
If you enable the liveSearch proper
- Page 374 and 375:
var oFacetFilter = new sap.m.FacetF
- Page 376 and 377:
● Trigger e-mail application sap.
- Page 378 and 379:
○ For Android: http://developer.a
- Page 380 and 381:
Interaction with the scroll contain
- Page 382 and 383:
The SAPUI5 version contains the fol
- Page 384 and 385:
12.8 Using Images in Mobile Applica
- Page 386 and 387:
To add custom icons, proceed as fol
- Page 388 and 389:
12.9 Message Handling The following
- Page 390 and 391:
● ● scrollstart scrollstop For
- Page 392 and 393:
● ● When a touch event is trigg
- Page 394 and 395:
Browser Touch Supported sap.ui.Devi
- Page 396 and 397:
...... if (sap.ui.Device.support.to
- Page 398 and 399:
MAKit chart supports the following
- Page 400 and 401:
13.2 UI Control API: Event Handling
- Page 402 and 403:
Use in XML Views In XML views, Cust
- Page 404 and 405:
Now CSS can use attribute selectors
- Page 406 and 407:
SAPUI5 then requires (loads) the pl
- Page 408 and 409:
Currently, SAPUI5 only supports to
- Page 410 and 411:
Related Information Data Binding [p
- Page 412 and 413:
Content Security Security Guides Re
- Page 414 and 415:
WebSockets While WebSockets offer g
- Page 416 and 417:
Resource Handler (ABAP) The resourc
- Page 418 and 419:
well formed and properly encoded. I
- Page 420 and 421:
● jQuery.sap.removeUrlWhitelist H
- Page 422 and 423:
Remote Debugging on Mobile Devices
- Page 424 and 425:
14.2.3 Troubleshooting: Common Issu
- Page 426 and 427:
depending on the browser used, seeC
- Page 428 and 429:
Note JavaScript does not support a
- Page 430 and 431:
Control Tree The control tree shows
- Page 432 and 433:
● On the Breakpoints tab, you can
- Page 434 and 435:
14.3 An MVC Demo Application To ill
- Page 436 and 437:
data-sap-ui-theme="sap_bluecrystal"
- Page 438 and 439:
14.3.4 The HomePage View The HomePa
- Page 440 and 441:
To updates the data binding every t
- Page 442 and 443:
The following sections explain the
- Page 444 and 445:
● ● ● ● SAP decides which v
- Page 446 and 447:
14.5.3 Reserved IDs for DOM Nodes a
- Page 448 and 449:
15 Important Disclaimers on Legal A
- Page 450:
www.sap.com/contactsap © 2014 SAP