SAP FIORI standard application extension part II

• In Eclipse, create a new project select File->New->Project. Select SAPUI5 Application Development ->Application Project and Click Next. 

• Uncheck the Create an Initial View check box and click finish.

• To import source code of standard app, right click on the web content folder of the project, click on Import. 

• In the dialog box that appears, click on File System and click next. 

• Now browse for the folder in which downloaded source code is present, select it and click on Finish to import it into the project.

• The source code is now present in the project.

To hide or modify an element, we need to figure out the corresponding ID of the element from the views. The extension points details in description of the app in FIORI app library can help get an idea of the location view of the element. The form in which field is to be added as well as pricing conditions table is present in the POItem view. 

• Now to make any changes to the standard app, we should always create the extension project as directly modifying the source code is not a good practice.

• Right click on the original project containing the source code create in above steps and then click on SAP Fiori Extension Project.

• Create a New extension project and give it a name preferably starting with Z.

SAP FIORI standard application extension part I

In this tutorial we will learn how to extend the SAP Fiori standard application and the steps for app extension are as follows:

The implementation and extensibility information of every standard app is provided in the FIORI apps library. We can check the name of BSP application and the extension points listed in the application information provided on the FIORI app library.

Check LPD_CUST Role and SAPUI5 application name under Technical configuration section.

On the SAP system, execute transaction LPD_CUST for Launchpad application details.
Search the LPD_CUST value for the application noted earlier in previous step and double click on the searched selected line containing app info.

Double click on Track Purchase Order, the application to be extended and make a note of the URL value specified in the Application Parameter section.

Now download the source code of the application, go to transaction SE38 and execute the program /UI5/UI5_REPOSITORY_LOAD. Specify the UI5 name for the application, select the download radio button and execute the program. Scroll to bottom and click on the download link to export the source code of the application.

SAP FIORI Types of Extensions

FIORI User Interface extensibility can help modify SAP Fiori standard applications as per customer’s needs without altering their source code.

To enable extensions, SAP has provided extension points in the standard code of the application which can be used to customize the apps.

There are four properties which can be used to extend the standard FIORI application– 

• Sap.ui.viewExtensions: It provides custom view content at a specified extension in standard SAP delivered application. User can add new fields or images at extension points.

• Sap.ui.viewModifications: This is used for overriding certain control properties of SAP-delivered application. The user can use it to modify, hide or show the existing element.

• Sap.ui.viewReplacements:  This is used for replacing standard SAP-delivered view with custom view. User can use this property if there is no extension point provided and build a separate view with the required modifications.

• Sap.ui.controllerExtensions: Replacing standard SAP-delivered application controller with custom controller. User can change the business logic using this property if required.

Prerequisites for extension of standard SAP Fiori applications

• Download and install eclipse IDE. 
• Install SAP Plugins on Eclipse using the link https://tools.hana.ondemand.com/version -name. 

• Install SAP Fiori toolkit on eclipse to download ZIP file. 

• For eclipse versions newer than Juno the toolkit might not install due to Graphiti version error. To resolve this error install Graphiti from https://tools.hana.ondemand.com/juno and then install the toolkit
• Check for installations before proceeding.
• Open eclipse and go to Help -> About Eclipse and then click on Installations details to check all installed plugins.

How to create HTML5 Module SAP Cloud Foundry

In this tutorial we will explain how to create and run the HTML5 module within a MTA project in SAP Cloud Foundry environment.  

• Open Web IDE for trial account and right click on the workspace root folder.
• Choose "New" and click on "Project from Template"

• Pop up with Template Selection screen appears, select Multi Target Application project and choose Next.

• Enter the Project Name and choose Next.

• Enter the description and select the check box for "Use HTML5 Application Repository", press next and click finish. It will create the MTA project with a name "HTML5_tutorial".

• Right click on the MTA project and choose "New" and then select "HTML5 Module".

• Template selection pop will appear, select SAP UI5 Application and click on Next button.

• Enter SAP UI5 Application name in the Module Name field and enter demo.ui in the Namespace field and click next.

• Select XML from the View Type dropdown and enter the View Name as "First View" and press next and finish.

• It will create the UI5 application with the name "HTML5App" in HTML5 module. In the View folder open the FirstView.view.xml file and create the text element in the content as per below screenshot and save the changes.

• We have created our first sample Hello World UI5 application. To test the application right click on the created UI5 application "HTML5App" and choose "Run" and then "Run as Web Application". A pop will appear to choose the file to run, select the index.html file and press OK

• It will open up the new browser tab displaying "Hello World" text.