CD164.pdf

8/11/2019 CD164.pdf

http://slidepdf.com/reader/full/cd164pdf 1/49

Thomas Jung / HANA Product ManagementTobias Kaufmann / Customer Solution Adoption

David Kviti / Product Owner

Makoto Sugishita / Customer Solution Adoption

Winfried Wenisch / Product Owner

TechEd 2013 – October/November/December

CD164

Building User Interfaces for SAP HANA

Applications

8/11/2019 CD164.pdf


© 2013 SAP AG or an SAP affiliate company. All rights reserved.

Disclaimer

This presentation outlines our general product direction and should not be relied on i

purchase decision. This presentation is not subject to your license agreement or anywith SAP. SAP has no obligation to pursue any course of business outlined in this pr

develop or release any functionality mentioned in this presentation. This presentatio

strategy and possible future developments are subject to change and may be chang

time for any reason without notice. This document is provided without a warranty of a

express or implied, including but not limited to, the implied warranties of merchantab

particular purpose, or non-infringement. SAP assumes no responsibility for errors or

document, except if such damages were caused by SAP intentionally or grossly neg

8/11/2019 CD164.pdf



Agenda

SAP HANA Development: Overview

Platform

SAP HANA Extended Application Services (XS)

SAP HANA Native Development Model

SAP HANA XS Technical Architecture

SAP HANA Studio Development Perspective

Workflow New SP6 Features

Browser Based Development Tools

IDE Lite

SAP HANA Web-based Development Workbench

HANA Native Development Dem

Project Setup

XSODATA

XSJS

Introducing River

The River Language

Appendix A: SQLScript

Appendix B: SAPUI5

Appendix C: UI Integration Servi

8/11/2019 CD164.pdf


SAP HANA Development: Overvi

8/11/2019 CD164.pdf

http://slidepdf.com/reader/full/cd164pdf 5/49© 2013 SAP AG or an SAP affiliate company. All rights reserved.

SAP HANA Extended Application Services (XS)Introduction

What: Small footprint application server / web server / basis

for an application development platform inside SAP HANA

Rationale: Enable application development and deployment

while minimizing architectural “layers”

Create apps that have an http-based UI (browser, mobile apps)

Apps run directly on SAP HANA, w/o additional external servers or

components

-> simplified system architecture = low TCO

Tight integration w/ SAP HANA DB -> best possible performance

Scope: wide range of apps

Lightweight small web-based applications

Complex enterprise business applications

8/11/2019 CD164.pdf


SAP HANA Extended Application Services – Overview

Front-end Technologies

http/s

HTML5 / SAPUI5

Client-side JavaScript

Control Flow Technologies OData

Server-Side JavaScript

XMLA

Data Processing Technologies SQL / SqlScript

Calculation Engine Functions

Application Function Library (AFL)

Presentatio

Control flo

Data

Client: Browser or Mobile

SAP HANA

XS

Calculatio

8/11/2019 CD164.pdf


SAP HANA Native Develop

Model

8/11/2019 CD164.pdf


Development model – general rules

SAPUI5

UIS

XSJS

CDS/HDBDD

SQLScriptSQLViews

HDBTable

• UI Rendering completely in the

Client

• Server-side procedural logic in

JavaScript

• All artifacts stored in the SAP

HANA Repository

8/11/2019 CD164.pdf


Development model

XSODATA

• Low coding OData REST service

generation framework

• based upon existing tables and

views

• Create/Update/Deletion

operations support added in

SPS6

SAPUI5

UIS

XSJS

CDS/HDBDD

SQLScriptSQLViews

HDBTable

8/11/2019 CD164.pdf


Development model

Server Side JavaScript

(XSJS)

• Light weight procedural logic

• Openness

• Reuse

• One Language – Client and

Server Side

• Widespread Knowledge

SAPUI5

UIS

XSJS

CDS/HDBDD

SQLScriptSQLViews

HDBTable

8/11/2019 CD164.pdf



SAPUI5

Enterprise-Ready HTML5 Rendering Library

Completely client-side UI

Open and flexible

Web development skills (HTML, CSS3,

JavaScript)

Extensibility and Theming

3rd Party JavaScript Integration

Targets Multiple Devices

• Smartphone, Table, Desktop

8/11/2019 CD164.pdf



IntroductionHTML5 definition versus common understanding

The official definition of HTML5

is a markup language for structuring and presenting content for theWorld Wide Web, …. It is the fifth revision of the HTML standard

(created in 1990 and standardized as HTML4 as of 1997)

The commonly used definition

Integrated Multimedia support

Graphics and Charts (Canvas / SVG)

• New JavaScript APIs (e.g. Web SQL, Web Storage, Web Workers, …)

ARIA (accessibility)

• OpenAJAX (interoperability)

• JIT JavaScript compilation

• CSS3

http://en.wikipedia.org/wiki/Markup_language

http://en.wikipedia.org/wiki/World_Wide_Web

http://en.wikipedia.org/wiki/HTML

http://en.wikipedia.org/wiki/HTML

http://en.wikipedia.org/wiki/World_Wide_Web

http://en.wikipedia.org/wiki/Markup_language

8/11/2019 CD164.pdf



Key capabilitiesFeatures and benefits

Runs on Various SAP and Non-SAP Platforms

SAP HANA XS

SAP NetWeaver AS ABAP

Open Source Platforms

SAP NetWeaver Cloud

SAP NetWeaver AS JavaSybase Unwired Platform

Built with Leading Web Technologies

jQuery CSS3 OData LESS D3OpenAJAXHTML5

8/11/2019 CD164.pdf



Key capabilities 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 Applications

− Web based IDE

8/11/2019 CD164.pdf


8/11/2019 CD164.pdf


SAP HANA UI Integration ServicesOverview and roadmap

8/11/2019 CD164.pdf



Agenda

SAP HANA UI Integration Services

Using SAP HANA UI Integration Services

Roadmap

Summary

8/11/2019 CD164.pdf



Trends and expectations in the market

User Experience

Demand for attractive user experience Responsive design and high interaction

High user productivity

Real-time access to critical information

Analytical applications

Web and native applications on any device

Global trends

Cloud Mobile

Social

Information (big data)

Development

Emergence of SAP HANA platfmemory, high-performance app

Agility, fast innovation cycles

Developer efficiency and reduc

Consistency across application

Open standards and open sour

8/11/2019 CD164.pdf



Business perspective Addressing the needs of various business roles

Launch sites and overview dashboards with analytics or business applicationto quickly analyze business data in a central, personalized work environment

Drill down into details if needed

Structure business content and make applications, reports and information

available to end users based on their business role

Enrich standalone business applications with contextual information & service

Efficiently develop high-performance, interactive applications based on SAP

HANA leveraging core services

End user

Designer

Developer

8/11/2019 CD164.pdf



Overview

8/11/2019 CD164.pdf




Value Proposition

With SAP HANA UI Integration Services, developers and designers can easily create and des

based on HANA applications through efficient development using standardized services and c

patterns to support end-to-end business scenarios with harmonized user experience across a

Provides end users a state-of-the-art user experience and

access to seamlessly integrated HANA native applications

Enables designers to easily organize applications and

widgets into sites via intuitive design environment Gives developers a simple way to use standardized services

for creating application sites and integrating widgets within

their familiar SAP HANA studio environment

8/11/2019 CD164.pdf



Benefits

Consistent user interface and state-of-the-art user experience

Unified access point to assigned sites and applications Options to personalize preferences

Quickly compose and configure application sites via site designer

Aligned user experience by using same paradigms for widget configuration

Allow easy extensibility of custom-build or partner applications

Simple way to use standardized services as part of HANA native (XS) deveenvironment for creating well-performing, two-tier applications

Easily build and reuse HTML5-based applications using widgets

Design the application UI with the design environment embedded in SAP H

Create and manage all artifacts directly from SAP HANA studio and reposito

Allow the business developer to focus on the business apps

End user

Developer

Designer

8/11/2019 CD164.pdf


8/11/2019 CD164.pdf



End user perspectiveQuick access to interactive application sites

Native HANA

applicationwrapped as

widget

Application site

with interactive

widgets

Full flexible

page layout

Flexible

navigationbased on the

user’s roles

8/11/2019 CD164.pdf


SAP HANA UI Integration Service

End-to-end scenario for using UI Services

8/11/2019 CD164.pdf


8/11/2019 CD164.pdf



SAP HANA native applications development flow

Detailed information for developers is available in the “SAP HANA Developer Guide” via http://help.sap.

• DB tables

• Analyticalobjects

• Data restriction

1. Define dataartifacts

• Control flowlogic

• Data services

• Calculation logic

2. Implementbusiness logic • Shell

• Navigation

• Theming

• …

3. Implementuser interface

http://help.sap.com/hana_platform




8/11/2019 CD164.pdf



Development environment

SAP HANA UI Integration Services provide tools

and client-side APIs for development of widgetsand integration into application sites:

UI integration services as dedicated delivery unit

SAP Hana repository plug-ins

Wizards for SAP HANA studio

How can developers integrate an existing HANA

application as widget into an application site?1) Wrap the application as an OpenSocial component

2) Use wizard to turn it into a widget

3) Create an application site object

4) Open the application site in the design environment

and add a widget

Developer perspective

8/11/2019 CD164.pdf



Developer perspectiveIntegrated development environment in SAP HANA studio

Application site

Widget

Designer perspective

8/11/2019 CD164.pdf



Designer perspectiveIntuitive design environment for managing application sites

Web-based editor for creating and organizing application sites and content

Standalone

nativeapplication

wrapped as

widget

Application site

Full flexible pagelayout

8/11/2019 CD164.pdf



Step-by-step

Begin the UI implementation with a UX wireframe describing the entire application and site s

Should include all required screens and the entire interaction flow

Define UX mockup Design complete

application site

Import or develop

widgets

Identify UI

components

8/11/2019 CD164.pdf



Step-by-step

Break down the mockup to identify distinct UI components (building blocks) Can either be simple controls or more complex elements

Different components should be loosely coupled


application site

Import or develop

widgets

Identify UI

components

Search box widget

Table Widget

Details WidgetPie Chart

Widget

Navigation Bar (Shell) Navigation Bar (Shell)

Exact Parameter Selector Widget

Bar Chart Widget

8/11/2019 CD164.pdf



Step-by-step

Build UI components as widgets directly from the HANA native IDE (HANA studio)

Use third party widgets for selected components

Define widget customizable properties to allow optimal flexibility and reusability

Define widget personalizable properties to allow end users to persist preferences

Define events widgets can publish or subscribe to allowing widget communication

Define application context attributes reflected in the URL


application site

Import or develop

widgets

Identify UI

components

8/11/2019 CD164.pdf



Step-by-step


application site

Import or develop

widgets

Identify UI

components

Table Widget

Details Widget

Search box widget

Pie Chart

Widget

Exact Parameter Selector Widget

Bar Chart Widget

3rd party widget

Widget

interaction

Customizablewidget

properties

8/11/2019 CD164.pdf



Step-by-step

Create the application site directly from SAP HANA studio as the application shell

Edit the application site using the design environment

Add, rename, reorder and manipulate sites to define the application site hierarchy

Add widgets to pages and customize them

Reposition and resize widgets and refine the layout to reach a pixel perfect experience


application site

Import or develop

widgets

Identify UI

components

St b t

8/11/2019 CD164.pdf



Step-by-step


application site

Import or develop

widgets

Identify UI

components

St b t

8/11/2019 CD164.pdf



Step-by-step

Refine and iterate as needed Activate the application site from SAP HANA studio

Provide the link to your end users to access the site


application site

Import or develop

widgets

Identify UI

components

8/11/2019 CD164.pdf



Roadmap


8/11/2019 CD164.pdf



Planned InnovationsToday Future D

SAP HANA UI Integration ServicesRoadmap

End user

Easy access to and navigation

between (native) applications

Designer

Embedded WYSIWYG design

environment to organize application

sites and widgets

Manage site layout, hierarchy and

properties

Developer

Integrated development

environment in SAP HANA studio

Wizards for creating artifacts such

as application sites and widgets

Public APIs for consistent UIs

Core Services

Additional services supporting

developer scenarios, e.g.navigation, branding, layout

personalization in the shell

Shell

Support of additional shell(s)

Support of catalogs from different

sources

Widgets

Re-useable templates for widgets

to support common requirements

e.g. responsive tables

Future enhancem

Extension of the d

an integration poion SAP HANA sta

Integration of SAP

HANA application

Service integratio

solutions, e.g. SA

Usage of smart, c

to provide the righ

right context to en

This is the current state of planning and ma

This presentation and SAP‘s strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice. This documena warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement

SAP HANA SP6

8/11/2019 CD164.pdf


Summary

Roadmap

Summary

8/11/2019 CD164.pdf



Summary

With SAP HANA UI Integration Services, developers and designers can easily create and d

sites based on HANA applications through efficient development using standardized servi

UI patterns to support end-to-end business scenarios with harmonized user experience acr

SAP

UI Integra

Page

buildingPr

Eventing C

Provides end users a state-of-the-art user experience and

access to seamlessly integrated HANA native applications

Enables designers to easily organize applications and

widgets into sites via intuitive design environment

Gives developers a simple way to use standardized servicesfor creating application sites and integrating widgets within

their familiar SAP HANA studio environment

5 easy steps to quickly get started

8/11/2019 CD164.pdf



5 easy steps to quickly get started

1) Watch the tutorial videos on SAP HANA Academy

2) Download SAP HANA developer edition

3) Join OpenSAP course to learn more and run the exercises

4) Learn more by reading the comprehensive developer guide and latest enhancem

5) Share your feedback with the SAP HANA developer community

Further Information

http://www.saphana.com/community/implement/hana-academy/

http://scn.sap.com/docs/DOC-31722

https://open.sap.com/

http://help.sap.com/hana/SAP_HANA_Developer_Guide_en.pdf

http://help.sap.com/hana/Whats_New_SAP_HANA_Platform_Release_Notes_en.pdf

http://scn.sap.com/community/developer-center/hana









http://www.saphana.com/community/implement/hana-academy/

8/11/2019 CD164.pdf



Further Information

Overview

Experience SAP HANA http://www.saphana.com/welcome

SAP HANA In Memory http://scn.sap.com/community/hana-in-memory

HANA Startup Focus Program http://www.experiencesaphana.com/docs/DOC-1781

Twitter @SapDevs, #sapdevcenter

Developer Information

SAP HANA Developer Center http://scn.sap.com/community/developer-center/hana an

http://developers.sap.com/hana

SAP HANA Help Center http://http://help.sap.com/hana_platform (Release Notes

SAP HANA Academy http://academy.saphana.com / http://www.saphana.com/

SAP HANA Developer Edition http://scn.sap.com/docs/DOC-31722

OpenSAP courses https://open.sap.com

http://www.saphana.com/welcome

http://scn.sap.com/community/hana-in-memory

http://www.experiencesaphana.com/docs/DOC-1781



http://http/help.sap.com/hana_platform


http://academy.saphana.com/

http://www.saphana.com/docs/DOC-3123








































8/11/2019 CD164.pdf


8/11/2019 CD164.pdf



Further Information

8/11/2019 CD164.pdf



Further Information

SAP Education and Certification Opportunities

HANA Academy

openSAP Course

Watch SAP TechEd Online

www.sapteched.com/online

SAP Public Web

SAP HANASAP HANA Developer Center

SAP HANA Developer Online Help

SAP TechEd Virtual Hands-on Workshops and SAP Tech

http://www.saphana.com/community/implement/hana-academy

https://open.sap.com/course/hana1

http://www.sapteched.com/online



http://help.sap.com/hana_platform/

http://help.sap.com/hana_platform/





http://www.sapteched.com/online

https://open.sap.com/course/hana1

http://www.saphana.com/community/implement/hana-academy

8/11/2019 CD164.pdf



Continue your SAP TechEd education after the event!

SAP TechEd Virtual Hands-on Workshops

Access hands-on workshops post-event

Available January – March 2014

Complementary with your SAP TechEd registration

SAP TechEd Online

Access replays of keynotes, Demo

LIVE interviews, select lecture ses

View content only available online

http://saptechedhandson.sap.com/ http://sapteched.com/o

http://saptechedhandson.sap.com/

http://sapteched.com/online

http://sapteched.com/online

http://saptechedhandson.sap.com/

8/11/2019 CD164.pdf


FeedbackPlease complete your session evaluation for CD164.

Thanks for attending this SAP TechEd s

© 2013 SAP AG or an SAP affiliate company. All rights

8/11/2019 CD164.pdf



© 2013 SAP AG or an SAP affiliate company. All rights

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG.

The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation

SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services

in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SA

other countries.

Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.

http://www.sap.com/corporate-en/legal/copyright/index.epx




Documents

CD164.pdf