- Find data in the OData service to be displayed
- Start the extension using the extension pane in SAP Web IDE
- Implement extension coding in SAP Web IDE
- Test the app
Step 1: Log into the SAP Fiori Demo Cloud Edition
Please make sure that you have worked through the tutorial Getting started with the SAP Fiori, Demo Cloud Edition. Log into the SAP Fiori Demo Cloud Edition and locate the group CRM. Click on the My Opportunities tile.
Step 2: View the Standard app
Open the Standard app and familiarize yourself with how it appears.
Step 3: See data provided by the My Opportunities OData service
Open your browser’s developer tools (Instructions for Chrome, Firefox, Safari (https://developer.apple.com/safari/tools/) and Internet Explorer. In the developer tool switch to the network tab.
To determine which data is provided by the My Opportunities OData service, you can view the network traffic. In the My Opportunities app, touch on the next opportunity from the list on the left which will send a request. Then check the response in the developer tools network tab. The example below is from Firefox:
Step 4: View JSON as XML
As Chrome does not display the data in a JSON format, you can right click and then choose Open Link in New Tab
You will see a nice display of the XML returned by the OData service and you can determine the data which is not yet displayed:
Step 5: Compare the XML with the app view
Comparing the XML with the app view, you will see that there are two fields not yet displayed in the “Info” tab of the application:
SalesOrganizationDescription
DistributionChannelDescription
You will add these two fields to your application.
Step 6: Start the extension
To start this extension click on the gear wheel icon on the top right beside your name and choose Develop Apps:
Step 7: Launch SAP Web IDE
You will be forwarded to a screen called “Create App Extension” where you find instructions for the next steps. Click the Launch SAP Web IDE button. You may have to click this button twice as the new tab may remain empty on the first attempt.
Log in when prompted.
Step 8: Specify project name
On the next screen specify a Project Name, you can use the default name provided.
Step 9: Open the Extensibility Pane
Open the “Extensibility Pane” via Tools > Extensibility Pane.
Open the node opportunityInfoTabContentTopExtension
in the Outline pane on the right.
Step 10: Extend view
After the selection click on Extend > Extend View/Fragment:
A confirmation dialog box will appear. Please confirm that by clicking on Open Extension Code:
Step 11: Replace generated code
Replace the generated code with:
<core:FragmentDefinition
xmlns:core="sap.ui.core"
xmlns:ui="sap.ui.layout"
xmlns:layout="sap.ui.layout"
xmlns:ca="sap.ca.ui"
xmlns="sap.m"
xmlns:form="sap.ui.layout.form"
xmlns:crm="sap.cus.crm.lib.reuse.controls">
<ui:form.SimpleForm xmlns:ui="sap.ui.layout" id="opportunityID_form_clone">
<ui:content>
<Label xmlns="sap.m"
id="opportunitySalesOrganization_label"
text="{i18n>SalesOrganization}">
</Label>
<Text xmlns="sap.m"
id="opportunitySalesOrganization_Text"
text="{json>/SalesOrganizationDescription}"/>
</ui:content>
<ui:content>
<Label xmlns="sap.m"
id="opportunityDistributionChannel_label"
text="{i18n>DistributionChannel}">
</Label>
<Text xmlns="sap.m"
id="opportunityDistributionChannel_Text"
text="{json>/DistributionChannelDescription}"/>
</ui:content>
</ui:form.SimpleForm>
</core:FragmentDefinition>
Save your edits.
Step 12: Run the app
To test the application, right-click on the project name and choose Run > Run as > Web Application:
Step 13: View Sales Organization and Distribution Channel details
In the Info tab of the Opportunity detail screen you should now directly see the information about Sales Organization and Distribution Channel:
Congratulations, you’ve successfully extended an SAP standard Fiori app.
Next Steps