Create/Extend SAP Fiori Apps using SAP WEB IDE

Well, this is my first blog write in this forum and I see there is a much info share here about SAP Fiori.. So I don’t want to talk on Fiori instead my focus is here about SAP WEBIDE – how well we can use it for the creating and extending Fiori apps your own.

Web IDE – Overview

I guess there is enough content we get it in this forum about SAP Fiori and hence I would directly want to jump in Web ide part..

SAP Web IDE is a web-based tool that enables you to create and extend end user applications for browser and mobile devices.

It simplifies the end-to-end application lifecycle: prototyping, development, packaging, deployment, and customer extensions for SAPUI5 and SAP Fiori applications, and allows developers to collaborate with business experts and designers to fulfill end user requirements and expectations more effectively.

It is mainly intended for the Developers and the Business users.

Get Started

Set up SAP Web IDE by subscribing to it in the cloud, creating destinations, configuring Git, and connecting remote systems.

Prerequisites:

Account Types you must first sign up for an SAP HANA Cloud Platform developer account.

Cockpit in the SAP HANA Cloud Platform cockpit, you can add users who develop and maintain HTML5 applications as account members.

In this section:

Opening SAP Web IDE You open SAP Web IDE in a web browser.
https://account.hanatrial.ondemand.com/cockpit

Entering Git Settings If you want to use source control in your SAP Web IDE project, your user name and email address must be set for  your Git account.

Optional – Connecting Remote Systems Establish a connection to an ABAP back-end system by creating one destination for multi-usage.

Develop

Creating Projects

SAP Web IDE Developer Guide

• You can create a new project for an application based on a specific template.

Creating Projects from a Sample Application

• You can create a new project based on an existing application which is used as a reference

Importing ProjectsImporting Projects from an Archive

• You can import a project and its resources from the local file system into the SAP Web IDE workspace.

Importing Applications from SAP HANA Cloud Platform

• You can import an existing application from SAP HANA Cloud Platform into the SAP Web IDE workspace.

Importing Applications from the SAPUI5 ABAP Repository

• You can import an existing application from the SAPUI5 ABAP repository into the SAP Web IDE workspace.

Create an Extension Project

Create an extension project based on the original application.

The original application can be located either on the remote ABAP frontend server or in the SAP Web IDE workspace.

Download the source code of the SAP Fiori reference application Approve Purchase Orders from the remote ABAP system.

Create an extension project. This allows you to make changes without touching the original application.
During the exercise you will:

• Download the SAP Fiori sample project directly from SAP Web IDE
• Create a SAP Fiori extension project
• Run the extension project in SAP Web IDE

Extend a view
You want to remind users about your company’s policy whenever they approve purchase orders. To do this, you need to add a text or link to the existing UI.

Find the UI extension points on the existing view

Extend the extension points to add your own code(either from right click context menu or tool options)

Use SAP Web IDE Layout Editor to speed up your UI implementation 

Hide a UI Control

In the following exercise, you will learn how to hide a UI control in an existing view.

Your company doesn’t allow mass approvals. The Approve All button on the existing UI S3_PurchaseOrderSummary needs to be hidden.

During the exercise you will:

• Locate the UI control in the existing view
• Hide the UI control(either from right click context menu or tool options)
• Reverse the change to show the UI control again

Extend a Controller

In the following exercise, you will learn how to extend an existing controller.

Scenario: Your company allows mass approvals only under a specific condition (for example, the total gross amount of the purchase orders to be approved must be below 10,000.00 USD). The Approve All button needs to be shown or hidden, depending on this condition.

During the exercise you will:

• Find the UI controller hooks for an existing controller
• Extend the UI controller hook to add your own code(either from right click context menu or tool options)

Deploy Extension Project

There are 2 ways of deploy your application through SAP Web IDE

• Deploy to SAP ABAP Repository
• Deploy to SAP HANA Platform

The Deploy to SAP ABAP Repository option will deploy the extension project back to the ABAP frontend server directly from SAP Web IDE.

The Deploy to SAP HANA Platform option will deploy the extension project directly with version history maintenance.

Once the successful deploy, the application will ask you to Register Application with SAP Fiori Launchpad.

Try out and Enjoy !