You are on page 1of 40

Blackvard Management Consulting

How to Create Hello World! in Fiori

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Course Agenda: Hello World!

What Will Be Covered:

1. SAP Fiori and UI5 Overview

2. Development Environment Setup

3. Hello World Application Development in SAPUI5/Fiori Application

4. About Us

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAP FIORI
SAP Fiori began as a collection of applications.
Evolved to represent the new UX at SAP.
Offers various business roles a simple & user-friendly experience for SAP software functions.
Works on a desktop, tablet, or smartphone.
Companies using SAP Business Suite (powered by SAP HANA) can use
Fiori to add instant value to employee & customer experiences.
SAP plans to have all software solutions evolve in this direction.
SAP Cloud for Customer : With 15.05 release, SAP is launching a new
Responsive UI.
Follows the Fiori design paradigm.
At the heart of SAPs user-first strategy.

https://support.sap.com/release-upgrade-maintenance/release- https://scn.sap.com/community/cloud-for-customer/blog/2015/06/02/sap-
strategy/portfolio/product-strategy.html cloud-for-customer--responsive-ui

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAP FIORI
SAP UI Library is used for client-side UI rendering & programming. SAP
embraced open source technologies & Web standards to build the library.
HTML5: Core technology markup language of the Internet.
Used for structuring & presenting content for the World Wide Web.
JQuery: Most popular cross-platform JavaScript library.
Designed to simplify the client-side scripting of HTML.

CSS3 (Cascading Style Sheets): Language used to design web pages.

OData (Open Data Protocol): For building & consuming RESTful APIs.
OpenAJAX: Group of interrelated Web development techniques.
Used on the client-side to create asynchronous Web applications.
LESS: CSS pre-processor that helps to make CSS more maintainable, themable & extendable.

D3.js: JavaScript library for producing dynamic, interactive data visualizations in web browsers.

ARIA (Accessible Rich Internet Applications): Makes web content & web applications more
accessible to people with disabilities.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAP FIORI
The following are tools that can be used to develop applications with SAPUI5:
Eclipse Luna (4.4): Luna IDE version by Eclipse, released in 2014.
More information: https://projects.eclipse.org/releases/luna
Eclipse Mars (4.5): Mars IDE version by Eclipse, released in 2014.
More information: http://www.eclipse.org/downloads/packages/eclipse-ide-eclipse-committers-450/marsr
SAP WEB IDE: Cloud-based Development Environment supported by SAP.
More information: http://scn.sap.com/docs/DOC-55465
Developers are free to use any IDE for SAPUI5 development.
Plug-in for the above tools is helpful for deployment into an SAP ABAP Repository.
Extra pointers for installing above mentioned tools:
https://tools.hana.ondemand.com/

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAPUI5 Tools Installation

Prerequisites for Eclipse Installation:

Eclipse Platform Luna (4.4), Mars (4.5)


Operating System Windows OS (XP, Vista, 7 or 8/8.1)
Note: Eclipse supports Windows 8 only as of now.
Java Runtime JRE version 1.6 or higher, 32-Bit or 64-Bit
SAP GUI For Windows OS: SAP GUI for Windows 7.30/7.40. (Only relevant
when installing the SAPUI5 ABAP Repository Team Provider)
Microsoft VC Runtime For Windows OS: DLLs VS2010. Communication with the back-
end system is required. (Only relevant when installing the SAPUI5
ABAP Repository Team Provider)

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAPUI5 Tools Installation
To install the SAPUI5 Tools, proceed as follows:
1. In Eclipse, select Help >> Install New Software... in the menu bar.
2. In the Install dialog, enter the update site URL:
https://tools.hana.ondemand.com/luna for Eclipse Luna in the Work with entry field.
3. Press Enter to display the available features.
4. Select the desired features under UI Development Toolkit for HTML5 & choose Next.
5. On the next wizard page, review the overview of the features to be installed & choose Next.
6. Confirm the license agreement & choose Finish to start the installation.

Well show you how to do this, step-by-step. Lets begin!

More information: https://tools.hana.ondemand.com/#sapui5

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAPUI5 Installation Step-by-Step
After installing & opening Eclipse, the following screen is displayed:

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAPUI5 Installation Step-by-Step
To install the new SAPUI5 software go to Help >> Install New Software....

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAPUI5 Installation Step-by-Step
As shown below, insert the link https://tools.hana.ondemand.com/luna.
Press Enter on your keyboard.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAPUI5 Installation Step-by-Step
Choose UI Development Toolkit for HTML5 & click the Next button.
Ensure SAPUI5 ABAP Repository Team Provider (Developer Edition) is also selected.
Ensure UI development toolkit for HTML5 (Developer Edition) is selected as well.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAPUI5 Installation Step-by-Step
Review the features to be installed. Click Next.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAPUI5 Installation Step-by-Step
Accept the license agreement to proceed for installation & click Finish.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


SAPUI5 Installation Step-by-Step
Confirm the SAPUI5 tools installation. Go to File >> New >> Other. In the
New Wizard SAPUI5 Application, the project should now be available.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Building Hello World! Application
The Hello, World! application is a computer program that outputs
Hello, World! (or a variation of the term) on a display device.
One of the simplest programming languages possible.
Used to illustrate the most basic programming language syntax
to beginner and/or inexperienced programmers.
Used to verify a language or system is working correctly.
Hello, World! can also be used to ensure that a programming languages
compiler, development & run-time environments are installed correctly, and
working efficiently.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Building Hello World! Application
Select Application Project & click the Next button.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Building Hello World! Application
For the Hello World application, enter the Project name (HelloWorld),
choose the Library version (sap.ui.commons) & click Finish.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Building Hello World! Application
After successfull creation of the project, create the below application:

..........Lets take a look at how to do that now!

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Building Hello World! Application

Index.html in detail:
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
In this step, load the SAPUI5 framework from your local webserver & initialize the core modules with
the following configuration options:

1. The src attribute of the first <script> tag tells the browser where to find the SAPUI5 core library it
initializes the SAPUI5 runtime & loads additional resources, such as the libraries specified in
the data-sap-ui-libs attribute.
2. The SAPUI5 controls support different themes, choose sap_bluecrystal as your default theme.
3. Specify the required UI library sap.ui.commons, containing the UI controls required for this tutorial.
4. To make use of the most recent functionality of SAPUI5, define the compatibility version as edge.
5. Configure the process of bootstrapping to run asynchronously.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Building Hello World! Application
Developing Hello World in Index.html:

Add the following Line to the index.html file:


<script>
sap.ui.getCore().attachInit(function () {
var oTextView = new sap.ui.commons.TextView();
oTextView.setText(Hello World Blackvard Consulting");
oTextView.setTooltip(Demo Application"); // attach it to some element in the page
oTextView.placeAt(content");
});
</script>

Explanation:
1) When all resources & libraries are loaded & SAPUI5 is ready, the library fires the global init event to signal
that the library is ready.
2) In the example above, receive a reference to the SAPUI5 core by calling sap.ui.getCore(); register an
anonymous callback function by calling attachInit() in the core.
3) Create a Text View from the sap.ui.commons library.
4) Set text for the Text View as Hello World Blackvard Consulting.
5) Set tooltip as Demo Application.
6) Use the standard method placeAt; used to position SAPUI5 controls inside a node of the document object
model (DOM). As the target node, use the body tag of the HTML document & give it the ID content. The
class sapUiBody adds additional theme-dependent styles for displaying SAPUI5 apps.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Building Hello World! Application
Once the application is created successfully, the below folder structure on the
left is created by default in the Project Explorer window.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Building Hello World! Application
To execute the application, right-click on the context menu of the project &
select Run As >> Web App Preview to test it in the local system.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Building Hello World! Application
Below is the index.html that will be created when executed:

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Deploying Application into SAP
To deploy the application into the SAP system, right-click on the context menu
of the project, choose Team >> Share Project. Share project will set a
connection between the Eclipse project & the SAP Gateway BSP Application.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Deploying Application into SAP
Select SAPUI5 ABAP Repository. SAPUI5 ABAP Repository is
the plug-in downloaded along with the SAPUI5 tools. Click Next.
Helps deploy applications from Eclipse to SAP.
Must be installed along with SAPUI5 installation tools.

Link to installation tools : https://tools.hana.ondemand.com/#sapui5

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Deploying Application into SAP
Click the Browse option, which will locate the SAP system from the logon pad.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Deploying Application into SAP
After selecting the correct SAP system, the system will display the screen below.
Click on Next after verifying the information is correct.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Deploying Application into SAP
Enter the Login details: Client >> User >> Password & click Next.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Deploying Application into SAP
Here, you can create a new application or add it to an existing BSP Application.
Enter Login details: Name >> Description >> Package, then click Next.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Deploying Application into SAP
Sharing a project is similar to setting a connection between Eclipse & the
SAP system.
After sharing the project, the changes have to be submitted to the SAP system.
The Arrow(>) before WebContent indicates changes are available in Eclipse
& are waiting to be submitted to the SAP system.
After successfull connection to the SAP system, the changes must be moved.
Right-click on the context (Project Name) of the project: index.html.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Deploying Application into SAP
Select Team >> Submit.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Deploying Application into SAP
After clicking Submit, Eclipse will display the list of changes.
Check for conflicting changes in the system & resolve any issues.
If the changes are correct, click on Finish to move the changes into the SAP system.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Accessing Application in SAP
To access the new application, login to the SAP system the application is
deployed in through Eclipse.
Start transaction SE80 to access the UI5 Application.
Go to BSP Applications & search for ZE_HELLOWORLD.
The index.html application can be found under the following menu path:
ZE_HELLOWORLD >> MIMEs >> WebContent >> index.html

Note: SAP considers UI5 Applications as BSP applications.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Accessing Application in SAP
After selecting the ze_helloworld application, verify the applications services
& accompanying documentation.
Start transaction SICF (HTTP Service Hierarchy Maintenance) and access
the services & documentation created for the application (ze_helloworld).

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Accessing Application in SAP
To test the application directly from SAP, right-click on the ze_helloworld
application & select Test Service.

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Accessing Application in SAP
The final output of the application is displayed below:

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Require A Consultation?

Have Additional Questions?

Want To get trained?

Please Set Up A Consultation.

Email: info@blackvard.com

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


What Weve Accomplished

Key Achievements of Blackvard Management Consulting in Previous Projects

Technical project lead and ABAP architect responsible for quality in technical scope and budget in a global
roll-out of SAP Logistics applications (SAP LE / LO)

Conducting multiple SAP ABAP and SAP HANA trainings for various US companies

Implementation of a standard SAP software solution for Spend Management within SAP AG & ARIBA (annual
spend volume 3 Bill. EUR) which can be used in all SAP systems

Improved claims management using SAP FS-CM which is generating annual savings of 15 Mio for a huge
German public healthcare organization

Implemented a global solution for procurement processes at BMW AG using SAP SRM / B2B

Blueprinting and implementation of SAP software for banking credit cancelations for VOLKSWAGEN

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com


Managing Director

Short Bio:
Lukas M. Dietzsch is managing director at Blackvard
Management Consulting, LLC. He is holding a Masters
degree in Information Technology and is an experienced IT
solution architect and project lead.
His strong background in adapting to requirements and
standards in different industries and on various platforms are
valuable assets for Blackvard customers.
He is repeatedly commended by customers for driving
efficient solutions for complex problems in globally
Lukas M. Dietzsch distributed team environments and meeting tough deadlines.
lukas@blackvard.com
For further information please visit:

Blackvard Management Consultants www.blackvard.com

Consulting-All
Copyright Blackvard Management Consulting Allrights
rightsreserved
reserved www.blackvard.com
Customers That Recommend Blackvard

An overview of current and previous customers:

Copyright Blackvard Management Consulting All rights reserved www.blackvard.com

You might also like