openSAP Ui51 Week2 All Slides PDF

Week 2 Unit 1: Using a Remote
Service with Aggregation Binding

Using a Remote Service with Aggregation Binding
Week 2 Become a Data Binding Expert
Unit 2.1 Unit 2.2 Unit 2.3 Unit 2.4 Unit 2.5 Unit 2.6
Using a Remote Working with Automatic Sorting, Binding Contexts Working
Service with Expressions Conversion Grouping, with Element with OData
Aggregation Binding and Formatters with Data Types and Filtering Binding Services
Connect to an OData
service & create an
aggregation binding
Rest of this week:

Extend app and learn all about major
data binding features in SAPUI5
2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Scenario and tools (recap)
Cloud
Connector *
Web Server / Back-End

IDE deploy data
App Platform System
DB
Develop and Test Publish the App Store/Fetch Data

SAP Web IDE SAP HANA SAP Gateway
Cloud Platform (EPM Services)
* Establishes secure tunnel between cloud and on-premise systems

OData model
DB
Controller
OData engine on
back-end system
Updates using data

Model View
binding
(two-way or one-way)
The model sends an initial request to the server to request data.

The server interprets and processes the request and sends back the requested data to the model.
This round trip takes place for every data request or change in the model.

Absolute and relative bindings
{ Absolute binding path

"company": { /company
"name": "Treefish Inc",
"info": {
"employees": "3" Relative binding path
}, info/employees
"contacts": [
{ contacts/0/name
"name": "Barbara", phone
"phone": "873"
},
{ Absolute binding paths start with a slash;
"name": "Gerry", relative binding paths start with a name token
"phone": "734"
} and are resolved relative to the context of the
] control that is bound.
}
}
Binding Path Syntax for JSON Models

Binding types
{
"company": {
"name": "Treefish Inc", Property binding {/company/name}
"info": {
"employees": "3"
},
"contacts": [
{
"name": "Barbara",
"phone": "873"
},
{
"name": "Gerry",
"phone": "734"
}
]
}
}
Binding Types

Model inheritance
A model can be set globally on the

core (not recommended), the SAPUI5 Core
component, a view, or single
controls
model inheritance
All children in this hierarchy will manifest.json Component
automatically inherit the model of
their respective parent
If you configure a model in the app
descriptor, it will be set on the View
component level
Controls

Thank you
Contact information:
open@sap.com
2016 SAP SE or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.
Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

Week 2 Unit 2: Working with
Expressions and Formatters
Working with Expressions and Formatters
Binding syntax (recap)
1. Simple Property Binding

property="{/modelProperty}"
2. Complex Binding
property="{/modelPropertyA} {/modelPropertyB}"
3. Binding with Multiple Parts (Documentation):

property="{
parts: [
{ path: 'modelPropertyA'},
{ path: 'modelPropertyB'}
],
formatter : 'formatter.function
}"
4. Expression Binding (Documentation):

property="{= ${modelProperty} === 'someValue' ? 'statusA' : 'statusB'}"

Thank you
open@sap.com
or release any functionality mentioned therein. This document, or any related presentation, and SAP SE's or its affiliated companies' strategy and possible future

Week 2 Unit 3: Automatic
Conversion with Data Types
Automatic Conversion with Data Types
Primitive types
SAPUI5 delivers the following primitive types out-of-the-box:

sap.ui.model.type.Boolean sap.ui.model.type.Float
sap.ui.model.type.Currency sap.ui.model.type.Integer
sap.ui.model.type.Date sap.ui.model.type.String
sap.ui.model.type.DateTime sap.ui.model.type.Time
sap.ui.model.type.FileSize
You can create your own data types by extending one of the existing types.

Automatic Conversion with Data Types
Data type process
Data typing allows you to format data for the UI while keeping actual data format in the model untouched.
Bound properties with a defined type will automatically be formatted when displayed on the UI. Input
values in UI controls are parsed and converted back to the model type.
Format
01-05-2015 01.05.2015
Validate
SAPUI5 MODEL FORMAT DISPLAY FORMAT

Thank you
open@sap.com

Week 2 Unit 4: Sorting,
Grouping, and Filtering
Sorting, Grouping, and Filtering
Filtering
Filters are applied to the binding independent You can use filters to make
of the model type. your data searchable
View
applied to
Filter
Filter Binding
Filter
Model
sap.ui.model.Filter API Documentation

Sorting, Grouping, and Filtering
Sorting and grouping
You can use sorters with grouping

Sorters define the order and arrangement to make your lists well-arranged
of the items in an aggregation.
View
applied to
Sorter
Filter Binding
Filter
Grouping
Function
(optional) Model
sap.ui.model.Sorter API Documentation Sort and Group

by Category

Thank you
open@sap.com

Week 2 Unit 5: Binding
Contexts with Element Binding
Binding Contexts with Element Binding
Binding types (recap)
Property binding
allows properties of the control to be automatically
initialized and updated from model data.
Aggregation binding
can be used to automatically create child controls
according to model data. This can be done either
by cloning a template control or by using a factory
function.
Element binding
allows you to bind elements to a specific object in
the model data, which will create a binding context
and allow relative binding within the control and all
of its children.

Binding types (recap)
{
"company": {
"name": "Treefish Inc",
"info": {
"employees": "3"
},
"contacts": [ Aggregation binding {/company/contacts}
{
"name": "Barbara",
"phone": "873"
},
{
"name": "Gerry",
Element binding {/company/contacts/1}
"phone": "734"
}
] Property binding: {phone}
}
} Property binding: {name}
Binding Types

Element binding & relative property binding
You can rebind the parent control to a different context by using the bindElement(path) method
updateElement: function(index) {
JS
oPanel.bindElement(/company/contacts/ + index);
}
this.updateElement("0"); this.updateElement("1");

Thank you
open@sap.com

Week 2 Unit 6:
Working with OData Services
OData Open Data Protocol
An open protocol to allow the creation and

consumption of queryable and interoperable
RESTful APIs
Enables provision of data services based on
REST principles
Contains a complete description of the feeds,
types, properties, and relationships exposed
by the service in EDM (service metadata)
Defines data formats representing resources
like collections, entries, and properties
Documentation at odata.org

Entity types and OData types
Entity Type
<EntityType Name=Product" sap:content-version="1"> OData Type

Key <Key>
<PropertyRef Name=ProductID"/>
</Key>
<Property Name=Name" Type="Edm.String" Nullable="false" MaxLength="80"
sap:label="Product Name" sap:creatable="false" sap:filterable="false"/>
<Property Name=Description" Type="Edm.String" Nullable="false" MaxLength="12"
sap:label="Prod.Descrip." sap:creatable="false" sap:filterable="false"/>
Property <Property Name="Price" Type="Edm.String" Nullable="false" MaxLength="40"
sap:label="Price" sap:creatable="false" sap:filterable="false"/>
<Property Name="WeightMeasure" Type="Edm.String" Nullable="false" MaxLength="40"
sap:label="WeightMeasure name" sap:creatable="false" sap:filterable="false"/>
<NavigationProperty Name=ToSupplier" Relationship="/IWBEP/GWSAMPLE_BASIC.
Assoc_BusinessPartner_Products"
Navigation FromRole="ToRole_Assoc_BusinessPartner_Products"
ToRole="FromRole_Assoc_BusinessPartner_Products"/>
Property </EntityType> Annotations

URI structure and data access and query options
OData URI Results

Service <service_root_url> Collection of entity sets, e.g. a list of available
Document tables in a service
EDMX /$metadata Definitions of the schema, like entity type,
property type, associations, navigations
Entity Set /<entityset> All entities of an entity set, e.g. all rows of a table
Entity /<entityset>(<key>=<value>,<key>=<value>) Entity of an entity set, based on key fields
Property /<entityset>(<key>=<value>,<key>=<value>)/<property> Property of the entity, e.g. a field of a row
The content of an OData service can be accessed directly in the browser

You can browse entities, entity sets, and properties via URI
GWSAMPLE_BASIC service on system ES4 (requires login)

OData simple query language
https://sapes4.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/Entity?<query parameters>
Service Root URI Resource path Query options
The names of all query Operation Query Option SQL Equivalent Out-of-the-Box Support
string parameters Filtering $filter Where clause Aggregation filter
defined by OData are Projecting $select Field selection On demand usage
prefixed with a $ Sorting $orderby Sort Aggregation sort
character Paging $top Up to .. rows sap.m.List growing
$skip - sap.m.List growing
Inlining $expand Innerjoin On demand usage
Count $count Count(..) Aggregation binding
$inlinecount - On demand usage
List of (most important) Query options: http://www.odata.org/developers/protocols/uri-conventions#QueryStringOptions

OData debugging tool for SAP NetWeaver OData services
URL parameter:
sap-ds-debug=true
Can be used to analyze and
explore your service
Provides additional
information on queries,
performance, and the back
end itself
ProductSet entity on
GWSAMPLE_BASIC
(requires login)

Thank you
open@sap.com

openSAP Ui51 Week2 All Slides PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

openSAP Ui51 Week2 All Slides PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Week 2 Unit 1: Using a Remote

Service with Aggregation Binding

Rest of this week:

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Web Server / Back-End

Develop and Test Publish the App Store/Fetch Data

* Establishes secure tunnel between cloud and on-premise systems

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

Updates using data

The model sends an initial request to the server to request data.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

{ Absolute binding path

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 5

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

A model can be set globally on the

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 7

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 9

1. Simple Property Binding

3. Binding with Multiple Parts (Documentation):

4. Expression Binding (Documentation):

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

SAPUI5 delivers the following primitive types out-of-the-box:

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

SAPUI5 MODEL FORMAT DISPLAY FORMAT

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 5

sap.ui.model.Filter API Documentation

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

You can use sorters with grouping

sap.ui.model.Sorter API Documentation Sort and Group

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 5

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

An open protocol to allow the creation and

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

<EntityType Name=Product" sap:content-version="1"> OData Type

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

OData URI Results

Property /<entityset>(<key>=<value>,<key>=<value>)/<property> Property of the entity, e.g. a field of a row

The content of an OData service can be accessed directly in the browser

GWSAMPLE_BASIC service on system ES4 (requires login)

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

Service Root URI Resource path Query options

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 5

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 8

Das könnte Ihnen auch gefallen