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.

/wp-content/uploads/2014/05/1_451610.jpg

Download the source code to a local folder

/wp-content/uploads/2014/05/2_451611.jpg

Create a new Application Project in Eclipse as shown below

/wp-content/uploads/2014/05/3_451612.jpg

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

/wp-content/uploads/2014/05/4_451617.jpg

This should create an empty project as shown below

/wp-content/uploads/2014/05/5_451616.jpg

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

/wp-content/uploads/2014/05/6_451618.jpg


select all the folder

/wp-content/uploads/2014/05/7_451619.jpg

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.

/wp-content/uploads/2014/05/8_451620.jpg

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

/wp-content/uploads/2014/05/9_451625.jpg

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.

/wp-content/uploads/2014/05/10_451626.jpg

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

/wp-content/uploads/2014/05/11_451628.jpg

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

/wp-content/uploads/2014/05/12_451629.jpg

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>

  >

/wp-content/uploads/2014/05/13_451630.jpg

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

/wp-content/uploads/2014/05/14_451637.jpg

Select the view or controller to enhance

/wp-content/uploads/2014/05/15_451638.jpg

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

/wp-content/uploads/2014/05/16_451639.jpg

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

/wp-content/uploads/2014/05/17_451640.jpg

A new fragment XML file is also created

/wp-content/uploads/2014/05/18_451641.jpg

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

/wp-content/uploads/2014/05/19_451643.jpg

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

/wp-content/uploads/2014/05/20_451642.jpg

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

/wp-content/uploads/2014/05/22_451644.jpg

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

/wp-content/uploads/2014/05/24_451645.jpg

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.

To report this post you need to login first.

20 Comments

You must be Logged on to comment or reply to a post.

  1. Anuradha Krishnarao

    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 🙁 .

    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

    (0) 
  2. Shyam Raj

    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.

    (0) 
    1. Murali Shanmugham Post author

      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.

      (0) 
    1. Murali Shanmugham Post author

      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

      (0) 
  3. 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

    (0) 
    1. Murali Shanmugham Post author

      Thanks Markus. Its been a long time since I used Eclipse 🙂 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.

      (0) 
      1. 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

        (0) 
        1. Jonathan Choi

          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

          (0) 
  4. Ioannis Sigalas

    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

    (0) 

Leave a Reply