SAP Fiori and SAPUI5 applications

SAPUi5 | SAPUI5 Demokit | SAPUI5 demo

SAP Fiori and SAPUI5 applications

This blog emphasis on “What is SAP Fiori? ” and “What is the bonding between SAP Fiori and SAPUI5 applications?”

What is SAP Fiori?

SAP Fiori is a new user experience offered by SAP to improve user productivity with simplified SAP Fiori apps, encourage user adoption with an attractive user experience fitted to key tasks and activities, reduce training cost as this follows a certain design technique that makes user understand easily and extend custom Fiori apps with SAP developer tools and technology.

SAP Fiori is role-based, responsive to multiple device screens, coherent, simple and delightful.SAP has offered 900+ standard Fiori apps. Refer to theSAP Fiori app library to see the list of apps. Currently available. Use the implementation information tab provided with each app to try to deploy the standard SAP Fiori on your system.

For deployment of SAP Fiori apps, you will need to install the mandatory Fiori components and configure all the services which allow you to access SAP Fiori Launchpad, SAP Fiori Launchpad Designer and SAP Fiori apps.

You may find lot of blogs on What is Fiori? So, let me get into the most important part of this blog.You might ask how SAP Fiori and SAPUI5 are related to each other ?Here’s the answer.SAP Fiori apps are build using SAPUI5 framework.

Customization to existing apps can be done through the concept called “Extending Fiori apps”. This is where SAPUI5 comes into picture.

How to Extend Fiori apps ?
Pre-requisites:
Eclipse installation with latest version of SAPUI5 Application Development
Knowing the target SAP ERP and Netweaver Gateway Components
Knowledge on how to use SAP GUIHere are 5 simple steps that allow you to extend existing fiori apps.

Step 1 : Downloading Fiori App Source Code (SAPUI5)

1.Log into the appropriate SAP system and go to transaction SE38

2.Enter/UI5/UI5_REPOSITORY_LOAD in the Program field and click Run (F8) to run the SAPUI5 repository synchronization program

SAP Ui5 App

3. Next, specify the SAPUI5 application you wish to download. In order to download the SAP Fiori Web App for purchase order approval, use “ui5_mm_po_apv” as Name of SAPUI5 Application. Ensure that the Download option is selected. Click Run (F8).

SAP Ui5 apps and SAP Fiori & SAP ui5 Applications

4. You will be prompted to select the local directory into which the Web App source files should be saved. Please ensure that the directory you choose is empty. Choose and confirm a target directory.

5. Depending on your system configuration, you may see a security prompt. Grant permanent file system access by checking “Remember My Decision” and clicking “Allow”

6. Next, you will see a summary of actions that are about to be taken. Scroll down and click “Click here to Download”

SAP Ui5 Apps

7. You will be prompted to specify an External Codepage. Leave the field empty and confirm by clicking on the checkmark button . The download process will be initiated.

8. The download process may take a couple of minutes. When the process has finished, the SAP Frontend status bar will display a success message.

Ui5 App Development

Step 2 : Importing Fiori app source code into Eclipse

Now, you will be importing the source code into eclipse and modify the Fiori app with SAPUI5 controls and libraries.

1. Start Eclipse and select File → New → Project
2. Choose SAPUI5 Application Development → Application Project and click “Next”

SAP Fiori apps and SAP Ui5 Apps

3. Next, configure the new project as follows:
Project Name: “Purchase_Group”
Target Device: “Mobile”
Deselect Create an Initial View.
Click Finish.

SAP Ui5 Applications

4. You should see the newly created project in the Project Explorer. Eclipse created the basic boilerplate SAPUI5 folder structure. We will now import the SAP Fiori source code. Expand the newly created project, right-click on the WebContent folder and click Import.

Ui5 SAP App

5. Choose General → File System and click OK.

SAP Fiori UX

6. Select the import directory into which you downloaded the SAP Fiori App source code . Check the checkbox next to the top folder in the selection screen to ensure that all files and subfolders are imported. Click Finish to initiate the import process.

SAP Fiori App

7. Please click Extending SAP Fiori Apps “ Yes to All” when asked whether you would like to overwrite these files.

You have successfully imported the source code to Eclipse environment.

Step 3 : Modifying a SAP Fiori Apps source code

Suppose you want to add another field to the details view of a purchase order. Adding a field only requires making changes to a view, not a controller.

To add a field to the UI you have to make changes to “PurchaseOrderInformation.view.html”

1. Open “PurchaseOrderInformation.view.html” in Eclipse. The “Purchasing Group” field that we would like to add will be placed above the “Purchase Order ID” field and look similar to it. Within the PurchaseOrderInformation view, copy the source code that yields the “Purchase Order ID” field and insert said code so it produces another field. As of now, you have the “Purchase Order ID” field twice.

SAP Mobile Apps

2. Change the newly inserted code so it will represent the Purchasing Group instead of the Purchase Order ID.

Do the following changes to the code:

a. Change the label text so it will read “Purchasing Group” in the appropriate logon language. As this is a translation relevant task, you will have to create a new translation entry in the appropriate resource files later. (i18n file)

For now, change the data-text attribute of sap.m.Label to {i18n>view.PurchaseOrder.zPurchasingGroup}.

b. Change the text view so its contents will be bound to the field in your data model which contains the Purchase Group. To do so, change the data-text attribute of sap.m.Text to {ZPurchasingGroup}

3. Since the term “Purchasing Group” is translatable, it needs to be added to the internationalization (i18n) resource files instead of being written out directly in the view’s source code. Add the term “view.PurchaseOrder.zPurchasingGroup” with the appropriate translation to all i18n resource files. These files can be seen under i18n folder.

Now, test it locally to see the changes reflected to the edited code.

Step 4 : Uploading customized SAP Fiori App code

You can upload the customized source code to the server.

1. Run transaction SE38

2. Enter /UI5/UI5_REPOSITORY_LOAD in the Program field and click Run (F8) to run the

SAPUI5 repository synchronization program

SAP Ui5 ABAP Editor

3. Enter a name for the application you are uploading into the field Name of SAPUI5 Application. The application name starts with “Z”. Ensure that the Upload option is selected. Click Run (F8).

SAP Fiori Material

4. You will be prompted to choose the source directory for upload. Find and select the location of the WebContent folder of your Eclipse project.

5. You might be asked whether you want to grant access to your files. Choose “Remember My Decision” and click on “Allow”

6. Next, you will see a summary of actions that are about to be taken. Scroll down and click .“Click to upload”

7. Before the upload process begins, you will be asked a few additional parameters like transport request and package name. Give the appropriate values and click “Confirm” button. You have successfully uploaded the code to the server. Next step is to test the application.

Step 5 : Testing your application

1. Run transaction SE80 and navigate to the package which you specified during the upload process.

2. Find the application you just uploaded in the repository browser. In the object tree, you will find it under BSP Library → BSP Application → (Name of your SAPUI5 application).

SAP Fiori Ui5 App

3. Right-click the application name and choose “Test”

4. SAP GUI will attempt to open the application in your web browser. This may lead to another security prompt which you can safely confirm.

5. Your application should now feature the field “Purchasing Group” in the details view for a purchase order, as shown in the below figure.

SAP Ui5 Application

Conclusion
I hope the above information was useful to you. If you are looking for additional details that is not covered here, please leave your thoughts and I shall get back to you the sooner possible. Feel free to follow up or raise any doubts regarding SAP Fiori functional or technical aspects. You can also read more about Mobolutions, SAP Partner, on https://www.mobolutions.com where we specialize in HANA Cloud Platform Support and deployment of standard and customized HCP apps. You can also connect with us on Facebook and LinkedIn

Leave a Reply