Now Available: SAP Fiori elements add-on for OpenUI5

With OpenUI5 1.85, we have released the SAP Fiori elements add-on for OpenUI5. It includes the open.fe library, which is the OData V4 stack of SAP Fiori elements contained in the commercial SAPUI5 version. The open.fe library contains the List Report / Object Page floorplans and leverages the SAP Fiori elements metadata- and template-driven approach to SAP Fiori app development.

SAP Fiori elements makes it fast and easy to build enterprise-grade SAP Fiori apps. Making SAP Fiori elements available for OpenUI5 addresses a request that many customers and partners have voiced: to make SAP Fiori elements available to a wider community.

Highlights of the SAP Fiori elements floorplans for OData V4 include:

• SAP Fiori elements floorplans for OData V4 generates a complete application based on the data structure exposed by an OData V4 service
• Developers can add supplemental annotations, which provide additional semantics, and thus adopt the user experience
• SAP Fiori elements applications automatically adhere to the latest SAP Fiori design guidelines
• Thanks to the flexible programming model, it is possible to add custom UI5 freestyle coding on different levels of the application (page, section, actions, columns, selection fields).

Check SAP Fiori elements now supports OData V4 for additional information on the SAP Fiori elements functionality for OData V4. The SAP Fiori elements add-on for OpenUI5 is a full-fledged, unlimited deployment of the SAP Fiori elements for OData V4 functionality, but it can of course only leverage functionality that is available in the OpenUI5 library. This means there will be some constraints, e.g. no SAP Fiori launchpad services, no charting, but this is gracefully handled through the resilient architecture of the SAP Fiori elements floorplans for OData V4.

I hope I got you interested, so read on if you are ready to try it!

Building a SAP Fiori elements app leveraging the SAP Fiori elements add-on for OpenUI5 using an OData V4 service

Prerequisites

• You must have Node.js installed. You can download it here: https://nodejs.org/en/download/
• Download and install Visual Studio Code (VSC) from the VSC website: https://code.visualstudio.com/download
• Install SAP Fiori tools from Visual Studio Code marketplace: https://marketplace.visualstudio.com/items?itemName=SAPSE.sap-ux-fiori-tools-extension-pack
• And you also need git: https://git-scm.com/downloads

Step 1: Provide an OData V4 service

First you need to provide an OData V4 service. Ideally, you should use your own OData V4 service, but for these setup instructions we’ll use a CAP node.js project which is provided via the SAP Samples github.

1. Open a terminal in VSC and clone the Git repo as
   git clone https://github.com/sap-samples/cloud-cap-samples remote-odata-service​
2. Change to the recently cloned repository
   cd remote-odata-service
3. Run the following commands one by one
   npm i
npm i -g @sap/cds-dk
cds watch fiori
4. The services are now accessible at http://localhost:4004/

Step 2: Generate a SAP Fiori elements List Report Object Page (LROP) app with Fiori tools

Now you will generate a SAP Fiori elements app of type List Report Object Page (LROP) based on the OData V4 service.

1. In VSC open the command palette (ctrl+shift+p on Windows, cmd+shift+p on Mac) and start the SAP Fiori tools application generator (>Fiori: Open Application Generator)
   
2. Choose SAP Fiori elements application – start
3. Select List Report Object Page – next
4. Select Connect to an OData Service as Data source and enter as URL http://localhost:4004/browse – next
5. Choose Books as the Main entity and texts as Navigation entity – next
6. Complete the mandatory information module name (e.g. bookshop) and Project folder path for storing your app. Of course, you can also fill in the optional information. – finish

The SAP Fiori elements app has now been generated, but you are not quite done yet. If you were using SAPUI5 this would give you an already functioning app that could now be adopted and enhanced. But since you want to leverage OpenUI5, you have to do a few post-generation steps.

Step 3: Make changes in package.json and ui5.yaml required for using OpenUI5

You need to make a few changes in the package.json and the ui5.yaml files in order to switch the app to run with OpenUI5. The package.json file includes the dependencies like open.fe module which is a required library to run an OData V4-based List Report/Object Page application, while the ui5.yaml file is needed to use the UI5 Tooling configuration.

In the ui5.yaml, you have to add OpenUI5 as framework to switch the framework to OpenUI5 and install additional libraries from OpenUI5 like sap.m, sap.ui.core, sap.uxap etc.

1. Go to your project folder (which was created in step 2) using the cd command or by right-clicking on the folder in the explorer in VSC and selecting open in terminal
2. Open the package.json file and add @sap/open.fe under ui5/dependencies
   

   	"ui5": {
   		"dependencies": [
   			"@sap/ux-ui5-tooling",
   			"@sap/open.fe"
   		]
   	}

3. Add @sap/open.fe as dependencies

   	"dependencies": {
   		"@sap/open.fe": "1.85.0"
   	}

4. Open the ui5.yaml file to use the UI5 Tooling configuration to switch to the OpenUI5 framework and do the following changes:
   1. Change the specVersion to 2.2
   2. Remove the entry ui5Theme: sap_fiori_3
   3. Remove the complete ui5 configuration under server/customMiddleware (6 lines)
   4. Add the following framework entry right after the type entry:

      …  
      type: application  
      framework:  
        name: OpenUI5  
        version: "1.85.0"  
        libraries:   
        - name: sap.m  
        - name: sap.ui.core  
        - name: sap.uxap
        - name: themelib_sap_fiori_3

Step 4: Run the V4 application:

2. Go to your project folder
   Run the following commands one by one to install dependencies and start the application. ‘npm i’ will install the node modules including open.fe. ‘npm start’ will install the OpenUI5 framework.
   npm i
npm start
3. The List Report and Object Page application is now available at the URL http://localhost:8080/index.html
   Note: Clicking on the Go button in List Report application might request  user and password. Please enter user alice, no password.
   
   

We are very much interested in your feedback! Add a comment below or email me to let me know how you are using SAP Fiori elements with OpenUI5.

Special thanks to Vinod S Nair and Shrinivasan Neelamegam who were instrumental to creating this blog.
For the SAP Fiori elements product team, Stefanie Hager.