Extending a Fiori App - Simple Use case - Part 2

[Murali_Shanmu]

In my previous article, I wrote about extending the OData service. This article will be around the steps required to extend the SAPUI5 “My Appointment” app to accommodate the additional fields. Do refer this document containing important links to SAPUI5 extension.

In order to work on SAPUI5 extensions, I have downloaded Eclipse Juno and installed SAPUI5/Fiori Toolkit plugins. For more info - check this document.

From the SAP help documentation, find the technical name of the application which is required to be extended.

Launch the report /UI5/UI5_REPOSITORY_LOAD in SE38 and provide the name of the application as “CRM_MYCAL” with download option.

Download the source code to a local folder

Create a new Application Project in Eclipse as shown below

Provide the project name and uncheck “Create an Initial View”.

This should create an empty project as shown below

Import the contents (downloaded to your local folder in the previous step). From WebContent > Import > File System

select all the folder

You should find the complete structure as shown below. This is the representation of the standard code. You can open the view/controllers to explore the standard code. We would not be modifying any of these files.

Notice that for each .js file there is a –dbg.js file. There are two versions of the files for a reason. The –dbg (debug) version contains easily readable source code for us. The minimized version is used for runtime and is much smaller in file size. If you need to debug the standard application and view the .js files, you would have to add a parameter sap-ui-debug=true to the URL

Next, we create a “SAP Fiori Extension Project” as shown below. This feature is part of the Fiori Toolkit plugin

Provide a project name which represents the extension and select the checkbox to replace the OData service. Since we have a new OData service, we have to ensure this service is used by our new project.

Navigate to the “ZCRM_MYAPPOINTMENTS_SRV” OData service which was created earlier

This should generate the project and the component.js file would be updated with the new OData Service as the ServiceURL.

Next, we need to enhance the detail view to display additional fields. Refer to the SAP Help documentation to find the extension points which are provided for each view. Extension points are placeholders within the Standard code where customer code can be inserted (Similar to BADI/user exits).

You can also open the standard code to see where these extension points are located within the Appointment Details view. Look for <core:ExtensionPoint>

  >

From the context menu of the extension project, select “Add SAP Fiori Extension”

Select the view or controller to enhance

The below screen lists all the extension points available for this particular view.

Since we need to add fields at the bottom of the screen, “extensionDetail3” would be the best fit. After you finish this step, you will notice the Component.js file being enhanced with this information

A new fragment XML file is also created

Add all the additional fields in this XML file as shown below

Tip: Use Ctrl + Shift + Alt + S to launch the SAPUI5 Diagnostic. You can turn on the Debug sources to see more log messages (in console). More info found here.

Now we are ready to deploy the application., From the context menu of the extension project, select Team > Share Project

Select the repository as "SAPUI5 ABAP Repository". Provide the name of the BSP Application (which will contain the SAPUI5 project)

Finally, submit the project from the conext menu > Team >Submit

You should be able to find your project with the code in the BSP application and services created in SICF

With this the enhancement to the SAPUI5 application is complete.In the next article, I will show how this application can be integrated with the new Launchpad.

[masa_139]

Very good contents. We are looking forward to reading part 3.

[Murali_Shanmu]

Thanks Masa.

[Former Member]

Very well explained tutorial! Any idea when part 3 will be published?

[Murali_Shanmu]

Thanks Robbe. I have published Part 3.

[Former Member]

Thanks Murali!

[Former Member]

Hello Murali ,

Firstly , its very well explained .

We tried following the same steps for  UI5_MM_PO_APV - PO approval , however it does not work :sad: .

The extension app just cannot find the Component.js of the parent app .

We have posted a query on SCN  @ Extending Fiori PO Approval standard app

however we haven't received any response yet. It been over a week now ..

Can you please have a look and suggest what could be the issue ?

Thanks,

Anu

[former_member147563]

Thanks, I'm think it special article for ABAP people (like me) :smile:

[AnilV]

Good one Murali !

[Former Member]

Hi Murali,

Could you please share how we can debug the standard fiori application in detail.

I want to debug MY PURCHASING Documents (mm_purdoc_list) Application.

As mentioned in the blog, we have to add sap-ui-debug=true to the url for debugging the application.

I have tried adding the parameter sap-ui-debug=true to the url, which we get after navigation to the that application in Fiori launchpad. but nothing happened.

I tried like below:

http://<>:<>/**flp/shells/abap/Fiorilaunchpad.html?#PurchasingDocumentItem-display&sap-ui-debug=true

Regards

Shyam.

[Murali_Shanmu]

Hi Shyam, Put the parameter before the hashtag - #PurchasingDocumentItem-display. You should see all the standard source code in the Sources tab of chrome browser. Put a breakpoint in any of those files and see if it stops.

[rajendrengovend]

Excellent blog Murali! Just curios, would it be easier to extend UI5 apps i.e. Fiori via SAP Web IDE?

[Murali_Shanmu]

Thanks Raj. Its for sure easier. All the existing wizards in Fiori Toolkit are made available in Web IDE and it also offers other features like Layout Editor, code completion etc.. which would make our life easier. But with both the tools the developers would still need to know SAPUI5 when they are to make non-cosmetic changes in XML views or Controllers

[Former Member]

Very nice explanation.

[HemendraS]

Thanks for sharing.

Warm Regards

Hemendra

[raina_goyal]

Really helpful document. Thank you for sharing.

Warm Regards

Raina

[markus_reich]

Hi, great tutoria, but I have a problem, in my Eclipse (MARS) I can't find the entry "SAP Fiori Extension Project" in the context menu?

regards

Markus

[Murali_Shanmu]

Thanks Markus. Its been a long time since I used Eclipse :smile: May be you can raise a discussion in the Forums for people to assist. We used to have Fiori Toolkit add on (as a download on SCN) which could be installed within Eclipse. This particular add-on would give additional menu options around Fiori extensions. Not sure if it works with MARS. Try using SAP WebIDE as the extension framework is pretty good.

[markus_reich]

Thank you for the information.

I already found the page where the Fiori Toolkit could be downloaded. I found out that it's completly deprecated, and can't be downloaded anymore. So the only way to extend is to use the WEB IDE

best regards

Markus

[Former Member]

Hello and ty for the great tutorial.

I'd like to ask you one question. After extending Sales Order Create standard application I've pupolated a new z-field and added it to SalesOrderCreateCart.view.xml. After pressing checkout button and moving to SalesOrderCreatePriceAndAvailabilityCheck.view.xml standard odata service is called instead of z-odata service . How is it possible for z-odata service to be called in the first view and standard to be called in the next one? any ideas ?

 

Ty in advance sir

[Former Member]

Following step can't be performed due to lack of the menu item for SAP Fiori Extension Project.  Can you help with this problem?

 

we create a “SAP Fiori Extension Project” as shown below. This feature is part of the Fiori Toolkit plugin

[former_member266277]

Nice blog Murali! Pretty helpful..