how to create "hello, world!" in fiori

Blackvard Management ConsultingHow to Create “Hello World!” in Fiori

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

http://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/


https://projects.eclipse.org/releases/luna

https://projects.eclipse.org/releases/luna

http://www.eclipse.org/downloads/packages/eclipse-ide-eclipse-committers-450/marsr

http://www.eclipse.org/downloads/packages/eclipse-ide-eclipse-committers-450/marsr

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

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

https://tools.hana.ondemand.com/

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.



https://tools.hana.ondemand.com/luna

https://tools.hana.ondemand.com/luna


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: [email protected]

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

[email protected]

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

Managing Director





An overview of current and previous customers:

Customers That Recommend Blackvard
