Customizing Standard Fiori applications in WEBIDE

[former_member70726]

Standard SAP applications and web portal design templates are not always accepted by customers as is. Developers need to extend or modify an application and the User Interface according to the customer's requirements.  

• The development and design can be customized, for example, with an additional field using the cloud tool of SAP Web IDE. SAP Fiori app can be customized with the SAP Fiori Theme Designer.


• Nowadays SAP customers are used to being able to get a customized end user screens to their specific use cases and to their company’s This is also valid for Fiori apps. 


• The SAP Fiori apps can be extended as per user requirements using pre-defined extension points.


• A standard Fiori application can be extended using Extension project method from WEBIDE template as well. 

 The following can be customized using WebIDE: 

• Adding or removing a field (including how to extend the OData service, if required) 


• change a field name


• hide fields


• customizing your own themes

For improving the User Experience, SAP cloud platform also provides SAP cloud platform portal for standard Fiori like portal sites and freestyle sites.

Now let us take a sample Standard Fiori application for example: My Leave Requests from our ABAP repository and see how to customize it as needed.  

Steps to be followed: 

1. Import the Standard application from SAPUI5 ABAP Repository


2. Test the application before customizing.


3. Customize the application by adding new UI control.


4. Run the application and test for extended behavior. 

Now let us see each of these steps in detail. 

Import the Standard Fiori application from SAPUI5 ABAP Repository: 

Decide the standard Fiori application which you want to import into SAP WEBIDE. Here I’m choosing Fiori application to be ‘My Leave Request’. 

1. Go to SAP Web IDE and choose 

File  Import  Application from SAPUI5 ABAP Repository . The Select Application from SAPUI5 ABAP Repository dialog box is displayed like below. 

2. Select the desired system.

3. Browse for the standard Fiori application that you want to import, or find it using the search mechanism. 

4. Select the application. You can see the Target Folder field populated with the selected application's name. You can edit this name if required.


5. Choose It will display a popup like below. Click on OK to proceed further. 

6. The application is displayed in the workspace under the root folder.

 

Test the application before customizing:

Now test the imported application by clicking on the Component file. 

1. Navigate as  js Run  Run as Web Application  and you will get the Error popup like below. Click on open Run configuration. 

 

2. Run configuration popup will open like below. Now click on the + (plus) icon and select Run as SAP Fiori Launchpad Sandbox. 

        

3. Now the screen will change as shown in the below figure. Now click on Save and Run button to proceed further. 

 

4. Now your app will start running in anew window. Click on the tile to open the app. 

Customize the application by adding new UI control: 

Now let us customize the application by adding a new UI control (for example: Button ) to any of the view.  

Here in ‘My Leave Request’ app, let us add the button in S1.view.xml view. 

Add the code for button like below: 

<Button id="id_newbtn" text="NEW UI Button" press="newbuttonaction"/> 

 

Run the application and test for additional behavior: 

Now if you run your application again, it will display the app with the new button added below the ComboBox as shown. 



Conclusion:

Similarly, any new feature can be added and can extend the Standard Fiori application as per your requirement. 

Beginners can refer SAP cloud platform portal for an overview.

 

[natarajan_srikanta]

Hi Sabina,

Have you checked this url https://blogs.sap.com/2016/12/26/cant-see-your-sap-web-ide-deployed-changes-at-runtime-maybe-you-are...

As in the above blog, we should not import the standard fiori application and make changes.

[daniele17277]

Hello, thank you for sharing.
Whai if we don't have an personal ABAP repository ?
We have SCP subscriptions for different customers, but we usually use SCP HANA db and other resources.

Can we extend standard SAP FIORI APPs with no ABAP repository ??