LSS UI5 Session

© 2012 IBM Corporation

UI5 Applications Development on the

HANA Cloud Platform


Supported scenarios of SAP HANA Cloud Platform

EXTEND Cloud AppsBUILD New Cloud Apps EXTEND On-Premise Apps

ON-PREMISE SOLUTION

Data

CLOUD SOLUTION

Data

RUN Application Management and Runtime

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 3Customer

SAP Precision Marketing helps the Société de Transport de Montréal inspire customer loyalty by delivering real-time personalized offers to passengers at hundreds of local merchants.

SAP PRECISION MARKETING

BUILD New Cloud Applications


SAP Lumira helps business users access, transform and visualize data, so they can deliver immediate, fact-based answers to complex business questions.

SAP LUMIRA

BUILD New Analytic Applications


SAP HANA Cloud Platform helps Danone call center employees deliver a more personalized experience to its customers with an intuitive application connected to SAP on-premise systems.

DANONE

EXTEND SAP On-Premise Solutions


By creating extensions to SAP SuccessFactors, companies can add new functionality tailored to their business, while providing a harmonized end user experience.

SAP SUCCESSFACTORS

EXTEND SAP On-Demand Applications


SAP HANA Cloud Platform

Seamlessly extend and integrate business processes to the cloud for greater agility

Rapidly build and deploy applications in the cloud for quicker time to value

Instantly analyze and respond with real-time apps that enable you to succeed in the window of opportunity

Build mobile ready, feature-rich applications to drive productivity and customer satisfaction


Who do you need to build a new custom application

UX Designer / Business Experts App Administrator Create app mock-up Define app roles (layout and interactions) Insert app into application catalog

Assign app role to the usersUI Developer Create SAPUI5 project using a template Select the data service and bind the fields Implement controller events (e.g., navigation) Execute tests Deploy project to front-end system (GW Hub) Create and execute tests

Data Modeler Define OData model

Gateway Developer Import OData model Map OData entities to ABAP structures Map BAPIs to REST operations Implement performance and transnational patterns if required


How to build a new custom application

Build native SAP HANA applications on SAP HANA Cloud Platform. Eclipse-based tools for connecting to your SAP HANA instance on SAP HANA Cloud Platform. Use of SAP HANA studio features for SAP HANA development.

Develop, deploy and use Java applications in a cloud environment. Applications run on a run-time container where they can use the platform services APIs and Java EE APIs according to standard patterns.

Develop and run lightweight HTML5/SAPUI5 applications in a cloud environment. HTML5 applications consist of static resources (HTML, JS, CSS, ...) Connect to any existing on-premise or on-demand REST services.


SAP UI Development Toolkit for HTML5 (aka SAPUI5)

The UI Development Toolkit for HTML5 (SAPUI5) is an extensible JavaScript-based HTML5

control rendering library for business applications.

It comes with:

› Runtime› Interactive documentation› Eclipse-based Tooling

SAP contributes key elements of SAPUI5 toOpen Source community:http://sap.github.io/openui5/


SAPUI5 Main Characteristics

Uses the jQuery library as a foundation

Supports the development of custom controls as an extension to thestandard offering

Provides full control of UI themes for customer branding

Allows usage of own JavaScript and HTML

Fully supports SAP Product standards

Platform independent

The development of SAPUI5 is not tied to any other code lines thusenabling short shipment cycles


UI development toolkit for HTML5 (SAPUI5)


SAPUI5 Key Components

Server componentSAPUI5 Core

Includes core,base and model modulesDependency / Class-Loader to load control librariesRender manager creates HTML strings for the instantiated controls

Extension librariesControlsThemes


Model-View-Controller Concept in SAPUI5


Model-View-Controller Concept in SAPUI5 (Contd.)

View Types:– XML (sap.ui.core.mvc.XMLView)– JavaScript (sap.ui.core.mvc.JSView)– JSON (sap.ui.core.mvc.JSONView)– declarative HTML (sap.ui.core.mvc.HTMLView)

Controller:» Are defined in JavaScript» Can be bound to view (view controller)» Can be unrelated to any specific view (application controller)

Model Types:» XML, supports 2-way-binding» JSON, supports 2-way-binding» OData, experimental 2-way-binding


SAP Web IDE - Speeding development by reducing effort


SAP Web IDE - Product Benefits

• Increases developer productivity by simplifying development to create apps

• Develop once, deploy everywhere & run on any device - mobile, tablet, desktop

• Reduces cost, complexity and effort through cloud-based offering

• Enables business experts and designers via highly efficient tools

• Improves team productivity with the ability to code and collaborate anywhere

• Profit from code templates and SAP best practices to rapidly build applications


SAP Web IDE - In the SAP Technology Portfolio


SAP Web IDE - Simplify UI5 development


Get accurate prototypes from designers/analysis

Empowering Business Analysts and Designers to build and extend Fiori/SAPUI5 applications that once required the assistance of developers. Tighter collaboration between Developers, Business experts and Designers by working closely together.

Drag-and-drop•UI building blocks •Binding apps to SAP data •Palette for mobile

Integration with prototyping tools – planned innovation •Generating SAPUI5 apps from mockups •The app will be the base app application for the developer making a the hand-off from business expert to developer seamless


SAP Web IDE Development Tools

Increasing Developer productivity by simplifying development to create more apps faster. SAP Web IDE’s modular architecture offer extending it by “adding your own plug-ins”.

Templates and wizards for creating Fiori/UI5 Apps •Project templates for creating new apps•Wizards for creating components as single logical units•Template library grouped by categories containing technical details on delivered templates

Plug-in and template creation•Wizard of creating new plug-ins and templates •Ability to reuse existing template screens and created new templates •Auto complete for editing template files in code editor •Test plugin projects within SAP Web IDE


SAP Web IDE Development Tools

Increasing Developer productivity by offering a robust code editor with code completion (XML, JavaScript and SAPUI5) and an embedded API reference pane.

Code Editor •Code Editor for JS and XML •Content/File search and replace (all) function pane •Syntax check with error / warning indicators •API reference pane for control documentation •Personalization to choose a different SAP themes for code editor

Code completion •Context-based XML and JS code completion for SAPUI5 controls•Snippet-based XML and JS auto-completion •Code completion for customer-defined global •variable/function/object cross different JS files


Instant Preview in SAP Web IDE

Increasing Developer productivity providing an instant preview of the application with real and mock data

•Instant preview of application in the browser for different resolutions and in different languages •Option to preview app in Fiori Launchpad sandbox •Preview with real or mock data •Mock data can be generated or created manually •QR code generation and display


Supports all platforms

Seamlessly deploy to run on any device

Automatically renders for phone, tablet, desktop

Deploy to

•SAP Mobile Platform •ABAP•SAP HANA Cloud Platform•SAP HANA XS


SAP Web IDE – Key Points

›Evolve from development scenario to end to end lifecycle support

›Enhanced layout editor with drag & drop capabilities

›Continuous improvement of code editor

›Additional plug-ins & templates

›Management for plug-ins

›Analytic integration

›SAP Web IDE on HANA XS

›Integration Gateway for Backend Access to SAP and Non SAP sources ›Support for additional source code repository


Thank you

Contact information: Mohamed Hisham

IBM LSS Volunteer ProgramSAP Technology Consultant

[email protected]

LSS UI5 Session

Documents

Transcript of LSS UI5 Session