Add custom fields to a standard SAP Fiori app

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.

Open the Standard app and familiarize yourself with how it appears.

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:

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:

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.

To start this extension click on the gear wheel icon on the top right beside your name and choose Develop Apps:

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.

On the next screen specify a Project Name, you can use the default name provided.

Open the “Extensibility Pane” via Tools > Extensibility Pane.

Open the node opportunityInfoTabContentTopExtension in the Outline pane on the right.

After the selection click on Extend > Extend View/Fragment:

A confirmation dialog box will appear. Please confirm that by clicking on Open Extension 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.

To test the application, right-click on the project name and choose Run > Run as > Web Application:

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.