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.
- SAP Managed Tags:
21 Comments
