Extending SAP Fiori apps through SAPUI5
SAP Fiori apps are built by using the SAPUI5 framework. The customization of existing SAP Fiori apps are executed through a process known as extending SAP Fiori apps.
SAP Fiori app deployment:
To deploy SAP Fiori apps, you need to install the mandatory SAP Fiori components and configure all the services that allow you to access SAP Fiori Launchpad, SAP Fiori Launchpad Designer, and SAP Fiori apps. Here are the prerequisites for extending an SAP Fiori app:
- Eclipse installation with the latest version of SAPUI5 Application Development
- Target SAP ERP and Netweaver Gateway components
- SAP GUI
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 the SAP 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 a 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 the SAPUI5 framework.
Customization to existing apps can be done through the concept called “Extending Fiori apps”. This is where SAPUI5 comes into the 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 onto the appropriate SAP system and go to the SE38transaction.
2.Type /UI5/UI5_REPOSITORY_LOAD in the Program field and click Run(F8) to run the SAPUI5 repository synchronization program.
3. Specify the SAPUI5 application you wish to download. For example, to download SAP Fiori Web App for purchase order approval, type ui5_mm_po_apv in Name of SAPUI5 Application. Ensure that the Download option is selected. Click Run(F8)
4. Select the local directory into which the Web App source files should be saved. Ensure that the directory you choose is empty. Select and confirm a target directory.
5. Depending on your system configuration, you may see a security prompt. To grant permanent file system access, select Remember My Decision and click Allow.
6. Now, you can see a summary of actions that are about to be taken. Scroll down and click Click here to Download.
7. Do not specify an External Codepage. To confirm the download, click the check mark button. The download process is initiated.
8. The download process may take a couple of minutes. When the process is completed, the SAP Frontend status bar displays a success message.
Step 2 : Importing Fiori app source code into Eclipse:
Now, you will import the source code into Eclipse and modify the SAP Fiori app with SAPUI5 controls and libraries:
1. Start Eclipse and go to File → New → Project
2. Choose SAPUI5 Application Development → Application Project and click “Next”
3. Now, in the Project Name field, type Purchase_Group and in the Target Device field, type Mobile. Clear the Create an Initial View check box. Click Finish.
4. You can now see the newly created project in the Project Explorer. Eclipse created the basic boiler plate SAPUI5 folder structure. To import the SAP Fiori source code, expand the newly created project, right-click on the Web Content folder, and click Import.
5. Choose General → File System and click OK
6. Select the import directory into which you downloaded the SAP Fiori app source code. Select 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.
7. Click Yes to All when prompted to overwrite the files.You have successfully imported the source code into the Eclipse environment.
Step 3 : Modifying a SAP Fiori App source code
You may 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.In this example, you will be adding the Purchasing Group field and it will be placed above the Purchase Order ID field. Within the PurchaseOrderInformationview, copy the source code that yields the Purchase Order ID field and inserts it, so that it produces another field. As of now, the Purchase Order ID field appears twice.
2. Change the newly inserted code, so that it represents the Purchasing Group instead of the Purchase Order ID:
a. Change the label text to Purchasing Group in the appropriate logon language. As this is a translation relevant task, you 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.Labelto{i18n>view.PurchaseOrder.zPurchasingGroup}.
b. Change the text view, so that the content is bound to the field in your data model that contains the Purchase Group. Change the data-text attribute of sap.m.Text to {ZPurchasingGroup}.
3. As the Purchasing Group term is translatable, it has to be added to the internationalization (i18n) resource files, instead of being written directly in the view’s source code. Add the view.PurchaseOrder.zPurchasingGroup a term with the appropriate translation to all i18n resource files.
These files can be viewed under the i18n folder.Now, test it locally to view the changes.
Step 4 : Uploading the customized SAP Fiori App code
You can upload the customized source code to the server.
1. Run the SE38 transaction.
2. Type /UI5/UI5_REPOSITORY_LOAD in the Program field and click Run (F8) to run theSAPUI5 repository synchronization program.
3. Type a name for the application in Name of SAPUI5 Application. In this example, the application name starts with Z. Ensure that the Upload option is selected. Click Run(F8).
4. Select the source directory for upload. Find and select the location of the WebContent folder of your Eclipse project.
5. If you are prompted to grant access to the files, select Remember My Decision and click Allow.
6. Now, you can view 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 for some additional parameters, such as transport request and package name. Provide the appropriate values and click Confirm.You have successfully uploaded the code to the server.
Step 5 : Testing your application
1. Run the SE80 transaction and navigate to the package specified during the upload process.
2. Find the application that you uploaded in the repository browser. In the object tree, you will find it under BSP Library >BSP Application>(Name of your SAPUI5 application).
3. Right-click the application name and select 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 Purchasing Group field in the details view for a purchase order. So, this is how you can extend Fiori apps. This is just a simple example; the customization options are highly scalable, based on your business requirements and processes. Once you get started, you will definitely realize the immense potential of SAP Fiori apps and its impact on your business.
SAPUI5 Demokit
If you are still unsure of how to extend a Fiori app or need additional resources about SAP UI5, visit the SAPUI5 Demokit page. You can find numerous resources, such as API reference, technical documentation, code samples, and SAPUI5 demo apps.
https://sapui5.hana.ondemand.com/sdk/