Marc Anderegg, RIG, SAP February, 2014 Provided by Rapid ...

SAP Fiori Toolkit

Marc Anderegg, RIG, SAPFebruary, 2014 Provided by Rapid Innovation Group (RIG)

AgendaSAP Fiori Toolkit Overview

SAP Fiori Extensibility Concept Overview

Demo

Useful Links

1

2

3

4

© 2014 SAP AG. All rights reserved. 3Provided by Rapid Innovation Group (RIG)

SAP Fiori Application Types

Transactional

Insight to Action

Visual overview over acomplex topic for monitoringor tracking purposes

Search and Explore

View essential informationabout an object andcontextual navigationbetween related objects

Analytical Factsheet & ContextualNavigation

Task-based Access

Access to tasks like change,create, or entire processeswith guided navigation

Runs onany DBand HANA

Runs onHANA


Fiori Building Blocks

SAP UI5

SAP Fiori Launchpad

SAP NetWeaver Gateway SAP HANA XS

Eclipse / SAP Fiori Toolkit

OData

FioriApp

FioriApp

FioriApp

FioriApp

FioriApp

FioriApp

FioriApp

ODataService

ODataService

ODataService

ODataService

ODataService

ODataService

ODataService

ODataService

Des

ign

Tim

eR

unTi

me

HANA StudioNW Gateway Service Builder SEGW /ABAP Workbench SE80D

esig

nTi

me


SAP Fiori ToolkitMotivation

Simplify the standard SAPFiori Applicationdevelopment process andincrease developerproductivity by providing astarting point for adeveloper who wants tocreate a new application

Simplify the developmentprocess of extendingdelivered standardapplications


SAP Fiori ToolkitSCN Page

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

The page contains:ZIP downloadDocumentationShort installation instructionsLinks to other relevant pages

Prerequisites:Eclipse Juno 4.2SAP Development Tools for Eclipse– GWPA SP1– https://tools.hana.ondemand.com/juno



SAP Fiori ToolkitHigh Level Architecture

SAP NetWeaver Gateway Productivity Accelerator(GWPA)

GWPAextension

AndroidToolkit

iOSToolkit

Java SEToolkit More... SAP Fiori

Toolkit

Eclipse Plug-In (Framework)Search & Exploration capabilities

Starter application templates


SAP Fiori ToolkitPre-required knowledge

Mandatory:EclipseUI5Familiar with SAP NetWeaver GatewayOData protocolFiori apps (for Fiori extensions)

Optional:GWPAFiori apps developmentDevelopment of OData services using SAP NetWeaver Gateway– Service builder (SEGW) + SE80


SAP Fiori Toolkit Features OverviewPart 1

Creation of Fiori extension projecto The extension project is a separate project. It contains all extensions to the delivered

standard Fiori application. Both manually developed extensions and extensions createdby SAP Fiori Toolkit.

o The project defines a custom (extension) application which is extending the deliveredstandard application.

OData Service Replacemento Enables the custom application to use a different service than the delivered standard

application. Usually this is a service which extends the service used in the deliveredstandard application. (For example: a new property added in the new service and anew UI field will display this property in the custom application)

Starter Fiori Application projecto Creates a Starter Application (Fiori Transaction Application) which is using an OData

service

SAP Fiori ExtensibilityConcept Overview


Fiori Extensibility Concept overviewFiori Extensibility

Documentation on SAP help portal:

http://help.sap.com/saphelp_snc_uiaddon_10/helpdata/en/b8/7e4352b4e61b13e10000000a44176d/content.htm?frameset=/en/38/265c5273066f2de10000000a44176d/frameset.htm

Provides documentation on:

• Extending the UI Layer

• Extending the SAP NetWeaver Gateway Layer (OData Extensibility)

• Extending the SAP HANA Layer

• Extending the Search Model Layer

http://help.sap.com/saphelp_snc_uiaddon_10/helpdata/en/b8/7e4352b4e61b13e10000000a44176d/content.htm?frameset=/en/38/265c5273066f2de10000000a44176d/frameset.htm


Fiori Extensibility Concept overviewExtending the SAP NetWeaver Gateway Layer (OData Extensibility)

You can achieve modification-freeextensibility by using the RedefineGateway Service function. For moreinformation, seeRedefining OData Services (GW)

For OData Extensibility for Fiori, seedocumentation on SAP help portal:http://help.sap.com/saphelp_snc_uiaddon_10/helpdata/en/34/235c5273066f2de10000000a44176d/content.htm?frameset=/en/38/265c5273066f2de10000000a44176d/frameset.htm

By extending an OData service youare creating a custom ODataservice, or OData project, thatredefines an SAP-delivered one.

This is done using SAP NetWeaverGateway Service Builder(transaction SEGW). Example of redefinition of SAP-Delivered OData Project

The property NetAmount is added in the custom OData project.

http://help.sap.com/saphelp_snc_uiaddon_10/helpdata/en/e3/cf9c0e0b234be08f0b4ae4a0af16f6/frameset.htm

http://help.sap.com/saphelp_snc_uiaddon_10/helpdata/en/34/235c5273066f2de10000000a44176d/content.htm?frameset=/en/38/265c5273066f2de10000000a44176d/frameset.htm


Fiori Extensibility Concept overviewUI Extensibility

https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Customization.html

Configuration of Componentso Customization is based on the configuration of Components. A special area of their

configuration is dedicated to customization information. This configuration is located ina JavaScript file named Component.js (or Configuration.js).

Custom extension projecto Customization can be performed on a custom application that extends a delivered

standard application. The custom application is located in a separate Eclipse project.Both applications contain the Component.js (or Configuration.js) file and the customapplication contains all the changes.

Modification freeo The delivered standard application remains unchanged and hence the extension is

considered to be modification free.

Custom applicationo The custom application becomes the start-up project which then launches the delivered

standard application with the additional customizing configuration.

https://sapui5.netweaver.ondemand.com/sdk/


SAP Delivered Standard Application

Custom Application (Extended)

New Field

New View

New button

Fiori Extensibility Example


Fiori UI Extension possibilities in the MVC app

Models(OData)

OData Extension inNetWeaver Gateway

Views(XML Views)

Controllers(JavaScript)

implementationdata binding

interface

implementation

• View Extension

Custom view content in a predefinedextension point of the standard view

• View Modification

Modify certain properties, i.e. hide acontrol in the standard view

• View Replacement

Custom view replacing a standardview

• Controller Extension

Runtime merging of standard andcustom controller

Add controller customer functions

Override standard controller functions


SAP Fiori Toolkit Features OverviewPart 2 - Extensions

Extend Controllero Enables to extend or overwrite the functionality of the base controller, the custom

application can merge the controller delivered in the standard application with a newcontroller.

Extend View (using an extension point)o Extension points are inserted in the views of delivered standard applications. This will

enable extensibility of delivered standard applications by inserting custom content atthe location of these extension points.

o Enables to define the Fragment which will be inserted at the position wherethe extension point is defines.

Replace Viewo Enables to provide a new view instead of a view in the delivered standard application.o A new view can be an empty view or a copy of the view from the delivered standard

application.Hide UI Controlo Enables to change the visible property of a UI control in a view delivered in the

standard application to false.


Fiori Extensibility Concept overviewDevelopment Story

Steps to extend a delivered standard application:

1. Import the delivered standard application to Eclipse from BSP container

2. Create an Extension Project for the custom application (using SAP FioriToolkit)

3. Add extensions to the custom application (manually by coding or using SAPFiori Toolkit)

4. Deploy the custom application on BSP container

5. Access the custom application URL


Fiori Extensibility Concept overviewDevelopment Story – with OData Service Replacement

Steps to extend a delivered standard application:

1. Create the custom OData service (using Gateway Service Builder)

2. Import the delivered standard application to Eclipse from BSP container

3. Create an Extension Project for the custom application (using SAP Fiori Toolkit)(During the creation of the extension project select the option to replaceOData service)

4. Add extensions to the custom application (manually by coding or using SAPFiori Toolkit)

5. Deploy the custom application on BSP container

6. Access the custom application URL


Topics covered in the Demo

Creating a new Extension Projecto Structure of the project created

Creating Extensions– Hide Control– Extend View (using extension point)– Replace View with an Empty View– Replace View with a copy of the delivered View + Extend Controller logic

o How Component.js file is modified by the toolkito How the changes reflect in the custom application

Creating a new Application Projecto How to select a service? (via URL, via catalog)o Structure of the project created


SAP Fiori Toolkit Features Wrap-up

Creation of Fiori extensionproject– Replace a View– Extend a View (using an

Extension Point)– Hide a UI Control in a View– Extend a Controller

Starter Fiori applicationproject

OData servicereplacement


Useful Links

SAP Fiori ToolkitInformation and Download on SCNhttp://scn.sap.com/docs/DOC-50112

SAP FioriOfficial documentationhttp://help.sap.com/fiori

Additional Related Information to SAP FioriSAP Web Dispatcher:http://help.sap.com/saphelp_oil472/helpdata/en/5f/7a343cd46acc68e10000000a114084/frameset.htm

SAP NetWeaver Gateway 2.0:http://help.sap.com/nwgateway20

SCN (SAP Community Network)What is SAP Fiori (provided by RIG):http://scn.sap.com/docs/DOC-41598

SAPUI5:http://scn.sap.com/community/developer-center/front-end

SAP for Mobile:http://scn.sap.com/community/mobile

UI5UI Development Toolkit for HTML5 - Demo Kit(interactive doc on SAPUI5 / OpenUI5):https://sapui5.netweaver.ondemand.com/sdk/

https://openui5.hana.ondemand.com/

OpenUI5:http://sap.github.io/openui5/

UI Development with SAPUI5 documentation:https://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.html

SAP HANA Marketplacehttp://marketplace.saphana.com


http://help.sap.com/fiori

http://help.sap.com/saphelp_oil472/helpdata/en/5f/7a343cd46acc68e10000000a114084/frameset.htm

http://help.sap.com/nwgateway20


http://scn.sap.com/community/developer-center/front-end

http://scn.sap.com/community/mobile

https://sapui5.netweaver.ondemand.com/sdk/

https://openui5.hana.ondemand.com/

http://sap.github.io/openui5/

https://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.html

http://marketplace.saphana.com/

Marc AndereggRIG, Business Information Technologies – [email protected]


No part of this publication may be reproduced or transmitted in any form or for any purposewithout the express permission of SAP AG. The information contained herein may bechanged without prior notice.

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

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of MicrosoftCorporation.IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x,System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer,z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server,PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER,OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP,RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX,Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registeredtrademarks of IBM Corporation.

Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks orregistered trademarks of Adobe Systems Incorporated in the United States and/or othercountries.Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin aretrademarks or registered trademarks of Citrix Systems, Inc.HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, WorldWide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license fortechnology invented and implemented by Netscape.SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer,StreamWork, and other SAP products and services mentioned herein as well as theirrespective logos are trademarks or registered trademarks of SAP AG in Germany and othercountries.

© 2014 SAP AG. All rights reserved

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, CrystalDecisions, Web Intelligence, Xcelsius, and other Business Objects products and servicesmentioned herein as well as their respective logos are trademarks or registered trademarksof Business Objects Software Ltd. Business Objects is an SAP company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybaseproducts and services mentioned herein as well as their respective logos are trademarks orregistered trademarks of Sybase, Inc. Sybase is an SAP company.

All other product and service names mentioned are the trademarks of their respectivecompanies. Data contained in this document serves informational purposes only. Nationalproduct specifications may vary.The information in this document is proprietary to SAP. No part of this document may bereproduced, copied, or transmitted in any form or for any purpose without the express priorwritten permission of SAP AG.

This document is a preliminary version and not subject to your license agreement or anyother agreement with SAP. This document contains only intended strategies, developments,and functionalities of the SAP® product and is not intended to be binding upon SAP to anyparticular course of business, product strategy, and/or development. Please note that thisdocument is subject to change and may be changed by SAP at any time without notice.

SAP assumes no responsibility for errors or omissions in this document. SAP does notwarrant the accuracy or completeness of the information, text, graphics, links, or other itemscontained within this material. This document is provided without a warranty of any kind,either express or implied, including but not limited to the implied warranties ofmerchantability, fitness for a particular purpose, or non-infringement.SAP shall have no liability for damages of any kind including without limitation direct,special, indirect, or consequential damages that may result from the use of these materials.This limitation shall not apply in cases of intent or gross negligence.

The statutory liability for personal injury and defective products is not affected. SAP has nocontrol over the information that you may access through the use of hot links contained inthese materials and does not endorse your use of third-party Web pages nor provide anywarranty whatsoever relating to third-party Web pages.

Marc Anderegg, RIG, SAP February, 2014 Provided by Rapid ...

Documents

Transcript of Marc Anderegg, RIG, SAP February, 2014 Provided by Rapid ...