You are on page 1of 35

Week 4 Unit 1: Exposing and Consuming Data – Architecture

Exposing and Consuming Data – Architecture
Classic SAP Architecture

Classic NetWeaver ABAP Layers Proprietary protocols SAP GUI displays pre-rendered UI UI rendering done in ABAP layer SQL:
High data retrieval loads No scripts

© 2013 SAP AG. All rights reserved.

Public

2

Exposing and Consuming Data – Architecture
SAP HANA XS Architecture

SAPUI5
Complete UI rendering HTML5/JavaScript

SAP HANA XS
Procedural application logic Application server Web server

SAP HANA Index Server
Data-oriented application logic SQLScript

© 2013 SAP AG. All rights reserved.

Public

3

All rights reserved. Public 4 .Exposing and Consuming Data – Architecture SAP HANA XS Architecture Client access via HTTP(S) ICM/Web server XS Engine Index server Client Node <process> Client HTTP(S) HANA Node <process> ICM XS Web Protocol API <process> XS Engine <extends> Distributed DB APIs <process> Indexserver © 2013 SAP AG.

Exposing and Consuming Data – Architecture SAP HANA XS Rationale Rational Enable easy application development and deployment Works with HTTP-based UI (browser. Public 5 . All rights reserved. mobile apps) Runs directly on SAP HANA Leverages the built-in performance of SAP HANA Scope Lightweight environment for small webbased applications Robust environment for complex highspeed business applications © 2013 SAP AG.

Week 4 Unit 2: SAPUI5 .

All rights reserved. CSS3. Table. Public 2 . JavaScript) Extensibility and Theming 3rd party JavaScript integration Targets multiple devices Smartphone.SAPUI5 Overview Enterprise-ready HTML5 rendering library Completely client-side UI Open and flexible Web development skills (HTML. Desktop © 2013 SAP AG.

js: Data-Driven Docs ARIA: Accessibility SAPUI5 SDK © 2013 SAP AG.SAPUI5 Background and Methodology HTML5: New HTML jQuery: Fast new JS library CSS3: Style/Layout Odata: Connectivity Open Ajax: Interoperability LESS: Themes D3. All rights reserved. Public 3 .

Resource Handler (optional) Public 4 . All rights reserved.UI jQuery Mobile Utils UI “Helper” assets such as: Less Code minimizer SAPUI5 Core Event Resources Device Logger SAP jQuery Plug-ins jQuery (Static) Web Server © 2013 SAP AG.SAPUI5 Components Optional server component Core JS framework including jQuery Extension libraries: Controls Themes SAPUI5 Libraries Themes Mobile Desktop Controls Mobile Desktop Data Binding Control Base Render Manager jQuery.

Public 5 .SAPUI5 Examples Visualization Interaction New “lanes” concept © 2013 SAP AG. All rights reserved.

Public 6 .SAPUI5 © 2013 SAP AG. All rights reserved.SAPUI5 Information Sources SCN Community UI Development Toolkit for HTML5 SAP Tutorial SAP Note 1747308 .

SAPUI5 Positioning of SAPUI5 Technology Occasional user. feeds Expert User Supervisor Business User Requirements Intuitive. Transactional User Types Expert Usage Public 7 . All rights reserved. manager Data Complexity Scenarios Limited transactional capabilities Highly interactive Collaboration. with low entry barrier Multiple devices Occasional User Analytical/BOBJ Manager Task Simplicity Information Seeker Casual Usage © 2013 SAP AG.

All rights reserved. Public 8 .SAPUI5 Key Features and Benefits Delight USERS Any Screen on Any Device Cutting-Edge Controls Powerful Theming & Branding Efficiency & Performance Foster INNOVATION Unmatched Extensibility Great Productivity Timeless SAP Data Consumption Fast Release Cycles Based on STANDARDS Eclipse-Based Design-Time Enterprise Readiness Well-Known and Easy to Learn Openess & Flexibility © 2013 SAP AG.

SAPUI5 Installation UI Development Toolkit HTML5 Show only software applicable to target environment Contact all update sites Hide already installed items Accept multiple licenses Restart SAP HANA studio © 2013 SAP AG. Public 9 . All rights reserved.

All rights reserved. Public 10 .SAPUI5 Development Environment Homogeneous set of Eclipse tools and editors Small learning curve for web developer UI screen & application development HTML5 templates support Shipped via SAP release train for Eclipse (SRTE) NWDS support Outlook: WYSIWYG design of HTML5 apps Web-based IDE © 2013 SAP AG.

Week 4 Unit 3: Creating a User Interface with SAPUI5 .

Creating a User Interface with SAPUI5 SAPUI5 Projects SAPUI5-specific: Projects Wizards WebContent packages Distinct from application code Target device Desktop Mobile Controller/View: JavaScript XML JSON © 2013 SAP AG. Public 2 . All rights reserved.

js © 2013 SAP AG.view. Public 3 .js SAPUI5 project view HelloWorld.controller.html SAPUI5 project controller HelloWorld.Creating a User Interface with SAPUI5 SAPUI5 UI Components Separate SAPUI5 package WebContent/… Bootstrap HTML page Index. All rights reserved.

Creating a User Interface with SAPUI5 SAPUI5 “Hello World” Code Controller name HelloWorld Content creation UI button UI text UI operation Test application © 2013 SAP AG. All rights reserved. Public 4 .

Week 4 Unit 4: OData Services .

read. update.OData Services OData Basics OData Data Model Organize/describe data with Entity Data Model (EDM) Data Source OData Service OData Protocol Client OData Protocol REST-based create. Public 2 . All rights reserved. and delete + OData-defined query language OData Client Library OData Data Model Client Libraries Pre-built libraries to request OData and display results OData Services Exposes an end point that allows access to data in the SAP HANA database © 2013 SAP AG.

All rights reserved. Public 3 .OData Services OData Capabilities in SAP HANA Aggregation Use functions to aggregate columns Entity Set Entity Entity Container Entity Set Association Property Entity Property Property Associations Express relationships between entities Property Navigation Property Entity Association Property Entity Property Property Key Specification EntityType denotes a set of properties forming a unique key Property Navigation Property Entity Property Navigation Property Parameter Entity Sets Input parameters for SAP HANA calculation views and analytic views Property Projection Restrict the number of selected columns to expose © 2013 SAP AG.

table) OData Service Definition Define mechanism to expose authorized data UI Call to OData Service Link UI table view to the OData service OData Display/Test URL filters: $top. $format. $orderby. $filter. All rights reserved.OData Services OData Development Process Data End Point Define which data to expose (for example. Public 4 . $select… © 2013 SAP AG.

Week 4 Unit 5: Creating a Simple OData Service .

Creating a Simple OData Service The Service Definition File . Public 2 .xsodata file The XS OData service definition Namespace Location of the XS OData service definition in the SAP HANA repository Table Schema Schema containing the tables with the data to expose Table Name Name of table containing data to expose with OData service © 2013 SAP AG. All rights reserved.

Public 3 . and to whom © 2013 SAP AG. how.Creating a Simple OData Service Creating a Service Definition Create DB table Contains data to expose with the OData service Grant privileges for OData table/view Enable access to data exposed with OData service . All rights reserved.xsodata file Create the service definition flat file Service definitions Define the OData service: what to expose.

Public 4 .Creating a Simple OData Service Testing a Service Definition Activation Create catalog object to view Browser URIs Call . All rights reserved. $filter. $select Syntax Atom or JSON-compliant format © 2013 SAP AG.xsodata service Browser Tools JSONView/XML Tree Basic options $metadata. $orderby.

Week 4 Unit 6: Creating a Complex OData Service .

All rights reserved. Public 2 .Creating a Complex OData Service OData Service Definition Syntax Multiple entities Define multiple tables in the service definition Entity relationships Define associations between different table entities Association syntax 1:1 association between tables – BusinessPartners – BPAddress © 2013 SAP AG.

Public 3 .Creating a Complex OData Service OData Query Syntax Entity sets Display combined results from the defined entities Metadata Display attributes of the OData service Table data © 2013 SAP AG. All rights reserved.

Week 4 Unit 7: Calling an OData Service from the User Interface .

Calling an OData Service from the User Interface The SAPUI5 Shell Core HTML file SAPUI5 view SAPUI5 bootstrap SAPUI5 control libraries © 2013 SAP AG. Public 2 . All rights reserved.

Calling an OData Service from the User Interface OData Requests Built-in filtering By string Built-in sorting Ascending Descending © 2013 SAP AG. Public 3 . All rights reserved.

Thank you Contact information: open@sap.com .

epx#trademark for additional trademark information and notices. Please see http://www. and SAP Group shall not be liable for errors or omissions with respect to the materials. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. All rights reserved. without representation or warranty of any kind. Public . The information contained herein may be changed without prior notice.com/corporate-en/legal/copyright/index. © 2013 SAP AG. if any. National product specifications may vary. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only. All rights reserved. Nothing herein should be construed as constituting an additional warranty.sap. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.© 2013 SAP AG. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG.