You are on page 1of 37

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

Using a Remote
Service with
Aggregation Binding

Working with
Automatic
Expressions
Conversion
and Formatters with Data Types

Unit 2.3

Unit 2.4

Unit 2.5

Unit 2.6

Sorting,
Grouping,
and Filtering

Binding Contexts
with Element
Binding

Working
with OData
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

Using a Remote Service with Aggregation Binding
Scenario and tools (recap)

Cloud
Connector *

IDE

deploy

Web Server /
App Platform

data

Back-End
System

DB
Develop and Test
SAP Web IDE

Publish the App
SAP HANA
Cloud Platform

Store/Fetch Data
SAP Gateway
(EPM Services)

* Establishes secure tunnel between cloud and on-premise systems
© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Public

3

 The server interprets and processes the request and sends back the requested data to the model. All rights reserved. © 2016 SAP SE or an SAP affiliate company. Public 4 .  This round trip takes place for every data request or change in the model.Using a Remote Service with Aggregation Binding OData model DB Controller OData engine on back-end system Model Updates using data binding View (two-way or one-way)  The model sends an initial request to the server to request data.

{ "name": "Gerry". "phone": "734" } ] } } © 2016 SAP SE or an SAP affiliate company. Binding Path Syntax for JSON Models Public 5 . "info": { "employees": "3" }. relative binding paths start with a name token and are resolved relative to the context of the control that is bound. "phone": "873" }.Using a Remote Service with Aggregation Binding Absolute and relative bindings Absolute binding path { "company": { "name": "Treefish Inc". /company Relative binding path info/employees contacts/0/name phone Absolute binding paths start with a slash. All rights reserved. "contacts": [ { "name": "Barbara".

"info": { "employees": "3" }.Using a Remote Service with Aggregation Binding Binding types { "company": { Property binding {/company/name} "name": "Treefish Inc". "phone": "734" } ] } } © 2016 SAP SE or an SAP affiliate company. "contacts": [ { "name": "Barbara". All rights reserved. Binding Types Public 6 . "phone": "873" }. { "name": "Gerry".

the component.json model inheritance  All children in this hierarchy will automatically inherit the model of their respective parent SAPUI5 Core Component View Controls © 2016 SAP SE or an SAP affiliate company. All rights reserved. it will be set on the component level manifest. a view. Public 7 .Using a Remote Service with Aggregation Binding Model inheritance  A model can be set globally on the core (not recommended). or single controls  If you configure a model in the app descriptor.

com .Thank you Contact information: open@sap.

and SAP SE’s or its affiliated companies’ strategy and possible future developments. 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.com/corporate-en/legal/copyright/index. or functionality. 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. This document. products. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only. All rights reserved. promise. or any related presentation. 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. The information in this document is not a commitment. and they should not be relied upon in making purchasing decisions. All forwardlooking 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. code. SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation. without representation or warranty of any kind. Public 9 . © 2016 SAP SE or an SAP affiliate company.sap. 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. and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials.© 2016 SAP SE or an SAP affiliate company. National product specifications may vary. All rights reserved.epx for additional trademark information and notices. which speak only as of their dates. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. In particular. Please see http://global12. Nothing herein should be construed as constituting an additional warranty. or to develop or release any functionality mentioned therein. or legal obligation to deliver any material. if any.

Week 2 Unit 2: Working with Expressions and Formatters .

formatter : 'formatter. All rights reserved. Complex Binding property="{/modelPropertyA} {/modelPropertyB}" 3. Public 2 . Simple Property Binding property="{/modelProperty}" 2.Working with Expressions and Formatters Binding syntax (recap) 1. { path: 'modelPropertyB'} ]. Expression Binding (Documentation): property="{= ${modelProperty} === 'someValue' ? 'statusA' : 'statusB'}" © 2016 SAP SE or an SAP affiliate company. Binding with Multiple Parts (Documentation): property="{ parts: [ { path: 'modelPropertyA'}.function‚ }" 4.

com .Thank you Contact information: open@sap.

com/corporate-en/legal/copyright/index. promise. Public 4 .epx for additional trademark information and notices. Readers are cautioned not to place undue reliance on these forward-looking statements. or to develop or release any functionality mentioned therein. and SAP SE's or its affiliated companies' strategy and possible future developments. SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation. National product specifications may vary. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only. which speak only as of their dates. All forwardlooking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. products. and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. This document. In particular.sap. Nothing herein should be construed as constituting an additional warranty.© 2016 SAP SE or an SAP affiliate company. or functionality. code. if any. and they should not be relied upon in making purchasing decisions. The information in this document is not a commitment. 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. All rights reserved. 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. All rights reserved. without representation or warranty of any kind. © 2016 SAP SE or an SAP affiliate company. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. or any related presentation. Please see http://global12. 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. or legal obligation to deliver any material. 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.

Week 2 Unit 3: Automatic Conversion with Data Types .

type.type.DateTime  sap. All rights reserved. Public 2 .model.model.model.Time  sap.ui.model.model.ui.Currency  sap.String  sap.ui.FileSize You can create your own data types by extending one of the existing types.type.ui.Integer  sap.type.model.ui.model.model.ui.type.model.Boolean  sap.Automatic Conversion with Data Types Primitive types SAPUI5 delivers the following primitive types out-of-the-box:  sap.ui.ui.Float  sap.type.type.ui.Date  sap. © 2016 SAP SE or an SAP affiliate company.type.type.

DISPLAY FORMAT Public 3 . Input values in UI controls are parsed and converted back to the model type.2015 01-05-2015 Validate SAPUI5 MODEL FORMAT © 2016 SAP SE or an SAP affiliate company. Format 01.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.05. All rights reserved.

Thank you Contact information: open@sap.com .

© 2016 SAP SE or an SAP affiliate company. or functionality. The information in this document is not a commitment. products. This document. SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation. and they should not be relied upon in making purchasing decisions. Please see http://global12. code. and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. or to develop or release any functionality mentioned therein. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. promise.sap. 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. or legal obligation to deliver any material. Public 5 . In particular. which speak only as of their dates. Readers are cautioned not to place undue reliance on these forward-looking statements. or any related presentation. Nothing herein should be construed as constituting an additional warranty. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only. All rights reserved. All rights reserved. without representation or warranty of any kind.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices. © 2016 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. National product specifications may vary. if any. 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. 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. and SAP SE’s or its affiliated companies’ strategy and possible future developments. All forwardlooking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations.

Week 2 Unit 4: Sorting. Grouping. and Filtering .

Sorting.model.ui. and Filtering Filtering Filters are applied to the binding independent of the model type. Grouping. You can use filters to make your data searchable View Filter Filter Filter applied to Binding Model sap. Public 2 . All rights reserved.Filter API Documentation © 2016 SAP SE or an SAP affiliate company.

Grouping.Sorter API Documentation © 2016 SAP SE or an SAP affiliate company. View Sorter Filter Filter applied to Grouping Function (optional) Binding Model sap.model. All rights reserved.Sorting.ui. Sort and Group by Category Public 3 . and Filtering Sorting and grouping You can use sorters with grouping to make your lists well-arranged Sorters define the order and arrangement of the items in an aggregation.

com .Thank you Contact information: open@sap.

All rights reserved. Nothing herein should be construed as constituting an additional warranty. 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. 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. 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. or any related presentation. 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. All forwardlooking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. if any.sap. Readers are cautioned not to place undue reliance on these forward-looking statements. This document. without representation or warranty of any kind.© 2016 SAP SE or an SAP affiliate company. code. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only.epx for additional trademark information and notices. or legal obligation to deliver any material. or functionality. and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. All rights reserved. or to develop or release any functionality mentioned therein. 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. © 2016 SAP SE or an SAP affiliate company. and SAP SE’s or its affiliated companies’ strategy and possible future developments.com/corporate-en/legal/copyright/index. Public 5 . The information in this document is not a commitment. and they should not be relied upon in making purchasing decisions. Please see http://global12. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. which speak only as of their dates. promise.

Week 2 Unit 5: Binding Contexts with Element Binding .

 Element binding allows you to bind elements to a specific object in the model data. All rights reserved.  Aggregation binding can be used to automatically create child controls according to model data. Public 2 . © 2016 SAP SE or an SAP affiliate company.Binding Contexts with Element Binding Binding types (recap)  Property binding allows properties of the control to be automatically initialized and updated from model data. which will create a binding context and allow relative binding within the control and all of its children. This can be done either by cloning a template control or by using a factory function.

Element binding {/company/contacts/1} "phone": "734" } ] } } © 2016 SAP SE or an SAP affiliate company. "phone": "873" }. { "name": "Gerry".Binding Contexts with Element Binding Binding types (recap) { "company": { "name": "Treefish Inc". "info": { "employees": "3" }. All rights reserved. Binding Types Property binding: {phone} Property binding: {name} Public 3 . "contacts": [ Aggregation binding {/company/contacts} { "name": "Barbara".

Binding Contexts with Element Binding Element binding & relative property binding updateElement: function(index) { oPanel.updateElement("0"). All rights reserved. © 2016 SAP SE or an SAP affiliate company. JS You can “rebind” the parent control to a different context by using the bindElement(path) method } this.bindElement(“/company/contacts/” + index). Public 4 . this.updateElement("1").

com .Thank you Contact information: open@sap.

or legal obligation to deliver any material. SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation. Readers are cautioned not to place undue reliance on these forward-looking statements. 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. code. 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. or to develop or release any functionality mentioned therein. Please see http://global12. which speak only as of their dates.© 2016 SAP SE or an SAP affiliate company. In particular.epx for additional trademark information and notices. Public 6 .com/corporate-en/legal/copyright/index. and they should not be relied upon in making purchasing decisions. All rights reserved.sap. or any related presentation. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only. This document. 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. or functionality. © 2016 SAP SE or an SAP affiliate company. All rights reserved. products. and SAP SE’s or its affiliated companies’ strategy and possible future developments. Nothing herein should be construed as constituting an additional warranty. The information in this document is not a commitment. All forwardlooking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. without representation or warranty of any kind. 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. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. promise. if any. National product specifications may vary. and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials.

Week 2 Unit 6: Working with OData Services .

types. properties. and properties Documentation at odata. Public 2 .org © 2016 SAP SE or an SAP affiliate company.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. All rights reserved. and relationships exposed by the service in EDM (service metadata)  Defines data formats representing resources like collections. entries.

Assoc_BusinessPartner_Products" FromRole="ToRole_Assoc_BusinessPartner_Products" ToRole="FromRole_Assoc_BusinessPartner_Products"/> Annotations </EntityType> © 2016 SAP SE or an SAP affiliate company. Public 3 . All rights reserved." sap:creatable="false" sap:filterable="false"/> <Property Name="Price" Type="Edm.Descrip.String" Nullable="false" MaxLength="40" sap:label="WeightMeasure name" sap:creatable="false" sap:filterable="false"/> <NavigationProperty Name=“ToSupplier" Relationship="/IWBEP/GWSAMPLE_BASIC.String" Nullable="false" MaxLength="80" sap:label="Product Name" sap:creatable="false" sap:filterable="false"/> <Property Name=“Description" Type="Edm.String" Nullable="false" MaxLength="40" sap:label="Price" sap:creatable="false" sap:filterable="false"/> <Property Name="WeightMeasure" Type="Edm.Working with OData Services Entity types and OData types Entity Type Key Property Navigation Property OData Type <EntityType Name=“Product" sap:content-version="1"> <Key> <PropertyRef Name=“ProductID"/> </Key> <Property Name=“Name" Type="Edm.String" Nullable="false" MaxLength="12" sap:label="Prod.

a field of a row  The content of an OData service can be accessed directly in the browser  You can browse entities. associations. based on key fields Property /<entityset>(<key>=<value>. e. e. e.<key>=<value>)/<property> Property of the entity.<key>=<value>) Entity of an entity set.Working with OData Services URI structure and data access and query options OData URI Results Service Document <service_root_url> Collection of entity sets.g. Public 4 . and properties via URI GWSAMPLE_BASIC service on system ES4 (requires login) © 2016 SAP SE or an SAP affiliate company. All rights reserved. entity sets. navigations Entity Set /<entityset> All entities of an entity set. a list of available tables in a service EDMX /$metadata Definitions of the schema. property type. all rows of a table Entity /<entityset>(<key>=<value>.g.g. like entity type.

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

All rights reserved. and the back end itself ProductSet entity on GWSAMPLE_BASIC (requires login) © 2016 SAP SE or an SAP affiliate company. Public 6 . performance.Working with OData Services 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.

Thank you Contact information: open@sap.com .

if any. which speak only as of their dates. All forwardlooking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. or to develop or release any functionality mentioned therein. 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. and SAP SE’s or its affiliated companies’ strategy and possible future developments. This document. and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. products. or any related presentation.com/corporate-en/legal/copyright/index. promise. In particular. 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. Please see http://global12. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. All rights reserved. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only. 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. without representation or warranty of any kind. or legal obligation to deliver any material. All rights reserved. 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. Nothing herein should be construed as constituting an additional warranty. National product specifications may vary.epx for additional trademark information and notices. and they should not be relied upon in making purchasing decisions. code. Public 8 .© 2016 SAP SE or an SAP affiliate company. © 2016 SAP SE or an SAP affiliate company. SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation. Readers are cautioned not to place undue reliance on these forward-looking statements. or functionality.