How to Create "Hello, World!" in Fiori

Blackvard Management Consulting
How to Create “Hello World!” in Fiori
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com

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
Course Agenda: “Hello World!”

https://scn.sap.com/community/cloud-for-customer/blog/2015/06/02/sap-
cloud-for-customer--responsive-ui
SAP FIORI
https://support.sap.com/release-upgrade-maintenance/release-
strategy/portfolio/product-strategy.html
 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 SAP’s user-first strategy.

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.

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/

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)

SAPUI5 Tools Installation
More information: https://tools.hana.ondemand.com/#sapui5
 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.
 We‘ll show you how to do this, step-by-step. Let‘s begin!

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

 To install the new SAPUI5 software go to Help >> Install New Software....

 As shown below, insert the link https://tools.hana.ondemand.com/luna.
 Press Enter on your keyboard.

 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.

 Review the features to be installed. Click Next.

 Accept the license agreement to proceed for installation & click Finish.

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

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 language‘s
compiler, development & run-time environments are installed correctly, and
working efficiently.

 Select Application Project & click the Next button.

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

 After successfull creation of the project, create the below application:
..........Let‘s take a look at how to do that now!

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.

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.

 Once the application is created successfully, the below folder structure on the
left is created by default in the Project Explorer window.

 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.

 Below is the index.html that will be created when executed:

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.

Link to installation tools : https://tools.hana.ondemand.com/#sapui5
 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.

 Click the Browse… option, which will locate the SAP system from the logon pad.

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

 Enter the Login details: Client >> User >> Password & click Next.

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

 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.

 Select Team >> Submit.

 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.

Accessing Application in SAP
Note: SAP considers UI5 Applications as BSP applications.
 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

 After selecting the ze_helloworld application, verify the application’s services
& accompanying documentation.
 Start transaction SICF (HTTP Service Hierarchy Maintenance) and access
the services & documentation created for the application (ze_helloworld).

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

 The final output of the application is displayed below:

Have Additional Questions?
Want To get trained?
Please Set Up A Consultation.
Email: info@blackvard.com
Require A Consultation?

 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
Key Achievements of Blackvard Management Consulting in Previous Projects
What We’ve Accomplished

Blackvard Management Consultants
www.blackvard.comCopyright © Blackvard Management Consulting – All rights reserved
Short Bio:
Lukas M. Dietzsch is managing director at Blackvard
Management Consulting, LLC. He is holding a Master’s
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
distributed team environments and meeting tough deadlines.
For further information please visit:
www.blackvard.com
Lukas M. Dietzsch
lukas@blackvard.com
Copyright © Blackvard Management Consulting- All rights reserved www.blackvard.com
Managing Director

An overview of current and previous customers:
Customers That Recommend Blackvard

How to Create "Hello, World!" in Fiori

Recommended

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to How to Create "Hello, World!" in Fiori (20)

Recently uploaded (20)

How to Create "Hello, World!" in Fiori

Editor's Notes