- Intro to OData and OData V2 vs. OData V4 - Feature overview of OpenUI5 OData V4 model plus sample application

1. Patric Ksinsik & Thomas Chadzelek, SAP SE
June 30, 2017
UI5 OData V4 Model

2. Some theory:
What is OData?
OData V2 vs. OData V4

3. 3
OData…
 is an ISO/IEC approved, OASIS standard that defines a set of best practices for building and consuming
RESTful APIs
 helps you focus on your business logic while building RESTful APIs without having to worry about the
various approaches to define request and response headers, status codes, HTTP methods, URL
conventions, media types, payload formats, query options, etc.
 provides metadata, a machine-readable description of the data model of the APIs, enables the creation of
powerful generic client proxies and tools
What is OData? (from odata.org)

4. 4
Performance
 New JSON Format (data): ~ 10% to 60% payload size reduction for lists after compression
– No inline metadata (__metadata)
– Messages part of payload (compressible) – V2 only header (not compressible)
 Cross-Service Navigation: Lazy loading of huge service models
Features
 Improved type system: New data types (esp. in date/time area, e.g. Duration), inheritance, collection values
 $filter with lambda operators ”any” and “all” for conditions on navigation properties
People?$filter=Emails/any(a:endswith(a,'@example.com'))
 $expand with query options
People?$expand=Friends($filter=Emails/any(a:endswith(a,'@example.com')))
 … and many more
Why OData V4? Pro’s vs. OData V2 (Excerpt)

5. Practice:
OData V4 model features by example

6. 6
Based on public OData V4 service http://services.odata.org/TripPinRESTierService
 Do try this at home 
Sample application

7. 7
Initialize model as dataSource in manifest.json, mandatory settings
 serviceUrl is the root URL of the service, e.g. “/odata_org/TripPinRESTierService/”
 synchronizationMode (reserved for future enhancements); must be “None”
Design principle: Data access via bindings
 Binding path is OData resource path, e.g. “/People”
 Binding parameters are
– query options for request (e.g. $expand, $filter, …)
– exception: $$-parameters  binding specific parameter to control binding behavior (e.g. $$groupId)
(1) Model Instantiation and Data Access

8. 8
 Create app skeleton with manifest.json: Define dataSource for TripPin service , see also TripPin data model
 Main.view.xml displays table on /People (First Name, Last Name, Age)
 Show automatic paging ($top, $skip) for list binding
Demo - (1) Model Instantiation and Data Access

9. 9
Auto-type detection
 Derive UI5 type from $metadata
Formatting, parsing, validation between model value and UI value
 Override by specifying type in binding information
Binding mode: TwoWay is default  Changes to model written to service backend
(2) Auto-type detection, data update

10. 10
 Validate with auto-detected types: Switch on validation in manifest.json (handleValidation)
 Modify value in First Name (not nullable), Age (Int64): Show validation incl. language dependent error
message
 Show $batch with PATCH in network which sends update to the backend
Demo - (2) Auto-type detection, data update

11. 11
Batch groups
 Determine bundling of data service requests in a $batch POST request
 “$auto”: requests are queued until just before rendering and then sent in one $batch (default)
 “$direct”: requests are sent directly, no $batch
 Name without $ prefix: "Deferred group", request triggered via submitBatch on model
 Can be set for
 Model: groupId, updateGroupId model settings
 Binding: parameter $$groupId, $$updateGroupId
Related APIs
 resetChanges resets pending changes for a batch group or binding
 hasPendingChanges checks for pending changes for complete model or one binding
(3) Batch groups

12. 12
 Set model groupId to $direct (easier to look at read requests in browser dev tools)
– Demo: Change from POST/$batch to direct GET in dev tools
 Set model updateGroupId to “updatePeople”
 “Save” button
– triggers submitBatch(“updatePeople”)
– sets view to busy until submitBatch returns to avoid input while request is being sent
 Demo: no $batch on leaving input field, but only on save button
 “Reset changes” button triggers resetChanges
Demo - (3) Batch groups

13. 13
 Prerequisite for filter and sort: Model setting operationMode set to “Server”
 Specify filter and sorter via
 ODataListBinding APIs filter and sort which take a sap.ui.model.Filter/Sorter object
 $filter, $orderby binding parameters. Changed with changeParameters API on binding.
Useful if OData filter options not covered by UI5 Filter or if sort or filter values never change.
 Filters can specify lambda operators ”any” and “all” for conditions on navigation properties
 Set $count=true at ODataListBinding to retrieve inline count.
Bind it in table header; note: use headerContext!
(4) Filtering and sorting, bind $count

14. 14
 Sort on “Last name” column via button in column header; iterate sort order "", "asc", "desc“
 Filter on “Last name”: Use changeParameters for infix search
$filter = contains(tolower(LastName),‘<input’)
 Demo: resulting requests in dev tools
Demo - (4) Filtering and sorting

15. 15
 OData V4 model computes $expand and $select for OData requests from UI
 Benefits
 Performance: Only load data required for UI
 Convenience: No need to specify $expand manually as binding parameter
 Switch on with model setting autoExpandSelect : true
 Auto-$select of key properties: required for write requests on entity
 Hard-coded $select and $expand binding parameters are merged
 Feature released with OpenUI5 1.48
(5) Auto-$expand/$select

16. 16
Without auto-$expand/$select
…/People Uncompressed size: 8.5 kB
(5) Auto-$expand/$select: response size comparison
With auto-$expand/$select
…/People?$select=Age,FirstName,LastName,UserN
ame Uncompressed size: 2.0 kB

17. 17
Support actions (side effects on server) and functions (no side effects) via "operation binding“
 ODataContextBinding with path “<operation name>()”
 Deferred operation with ellipsis “<operation name>(...)”  execution triggered via API
 Actions must be deferred as they have side-effects
 Bound operation’s “binding parameter” defined by context of relative operation binding
APIs
 setParameter
 execute for deferred operation
 refresh
(6) OData operations and refresh

18. 18
 Button "Reset Data" calls action import via operation binding with path “/ResetDataSource(...)”
– execute success: show success message and refresh the model to see the data reset
– execute failure: show error message
 Button “Refresh” calls refresh on model
Demo - (6) OData operations and refresh

19. 19
Create
 Call create on ODataListBinding with given initial data
Returns a context referring to the created entity
 The resulting entity is "transient" until deleted or saved to the backend
 The created method on the context provides a promise which is resolved when the entity is
saved
 Limitation: You have to call refresh before calling create again
Delete
 Delete an entity via delete on a context
Returns a promise which allows for success and error handling.
(7) Create and Delete

20. 20
 "Create" button calls the create API with hardcoded initial data; once the returned created promise is
fulfilled, show a success message
 Demo
– “Save” button sends the POST
– “Reset changes” button deletes the transient “People” instance
– After “Save” and “Refresh”, a new entity can be created
 “Delete” button calls delete for the context of the currently selected Person
Demo - (7) Create and Delete

21. Slides incl. sources
https://www.slideshare.net/PatricKsinsik/ui5con-presentation-on-ui5-odata-
v4-model

22. Questions or feedback?
Discuss with us in our „Meet the Expert”
slot from 14 – 14:40

23. Thank you.
Contact information:
Patric Ksinsik, p.ksinsik@sap.com
Thomas Chadzelek, thomas.chadzelek@sap.com
You are welcome to give feedback for this session
in the UI5con Event App