Blackvard Management ConsultingHow to Create “Hello World!” in Fiori
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
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!”
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
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.
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
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!
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
To install the new SAPUI5 software go to Help >> Install New Software....
SAPUI5 Installation Step-by-Step
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
As shown below, insert the link https://tools.hana.ondemand.com/luna. Press Enter on your keyboard.
SAPUI5 Installation Step-by-Step
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
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.
SAPUI5 Installation Step-by-Step
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
Review the features to be installed. Click Next.
SAPUI5 Installation Step-by-Step
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
Accept the license agreement to proceed for installation & click Finish.
SAPUI5 Installation Step-by-Step
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
Confirm the SAPUI5 tools installation. Go to File >> New >> Other. In the New Wizard SAPUI5 Application, the project should now be available.
SAPUI5 Installation Step-by-Step
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 language‘s 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
For the Hello World application, enter the Project name (HelloWorld), choose the Library version (sap.ui.commons) & click Finish.
Building “Hello World!” Application
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
After successfull creation of the project, create the below application:
Building “Hello World!” Application
..........Let‘s take a look at how to do that now!
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
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.
Building “Hello World!” Application
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
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.
Building “Hello World!” Application
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
Once the application is created successfully, the below folder structure on the left is created by default in the Project Explorer window.
Building “Hello World!” Application
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
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.
Building “Hello World!” Application
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
Below is the index.html that will be created when executed:
Building “Hello World!” Application
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
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.
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
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
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
Accessing Application in SAP
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).
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
Have Additional Questions?
Want To get trained?
Please Set Up A Consultation.
Email: [email protected]
Require A Consultation?
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
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
Copyright © Blackvard Management Consulting- All rights reserved www.blackvard.com
Managing Director
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com
An overview of current and previous customers:
Customers That Recommend Blackvard