Extension of Standard View with Custom fields in My Opportunities Standard App

[SupriyaG]

Hello All,

I Hope everyone doing well! 🙂

Introduction:

Recently, We have a requirement to add new fields in create new opportunities in My opportunities standard application. To achieve this functionality we have opted for Standard app extension. So, I would like give a brief description of how I achieved this requirement(Standard Fiori App extension).

This blog post will be very useful for the consultants who have the similar kind of requirements.

In this blog, I am going to explain you how to Add additional fields at the time of Opportunity create screens as in below screenshot

In order to achieve the above requirement I have followed below steps.

Frontend application UI5 Extension:

View Design:

To add new section Classification info with new fields Opportunity Group and origin in create screen replaced S5.view with S5Custom.View.xml   and added the code as below.

<la:form.SimpleForm id="form21" minWidth="1024" title="Classification Info" maxContainerCols="2" editable="true"

				layout="ResponsiveGridLayout" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1" class="editableForm">

					<la:content>

				<Label id="opportunityGroup_Label" text="Opportunity Group"></Label>

			

					<Select id="opportunityGroup" items="{json>/OpptGroupSet}" >

						<items>

							<core:Item key="{json>OpptGroupCode}" text="{json>Description}"></core:Item>

						</items>

					</Select>

			

				<Label id="originLabel" text="Origin"></Label>

				

						<Select id="origin" items="{json>/OriginSet}" >

						<items>

							<core:Item key="{json>OriginCode}" text="{json>Description}"></core:Item>

						</items>

					</Select>

						</la:content>

			</la:form.SimpleForm>

 

Controller Extension:

In Create extended extHookGetAdditionalCustomizing, extHookHandleBatchResponses to get and bind the dropdown values to newly added fields.

 

extHookGetAdditionalCustomizing:

	extHookGetAdditionalCustomizing: function() {

		// Place your hook implementation code here 

		var that = this;

		var oModel = that.getView().getModel();

			var sStatusPath1 = "OpptGroupSet";

		if (this.processType && this.processType !== "") {

			var sFilterValue1 = jQuery.sap.encodeURL("OpptType  eq '" + this.processType + "'");

			sStatusPath1 = sStatusPath1 + "?$filter=" + sFilterValue1;

		}	

		var a = [];

		a.push(that.getView().getModel().createBatchOperation("OriginSet", "GET"));

		a.push(that.getView().getModel().createBatchOperation(sStatusPath1, "GET"));

		

		oModel.addBatchReadOperations(a);

		return oModel;

	},

 

	extHookHandleBatchResponses: function(r) {

		// Place your hook implementation code here 

	

		var s = {

			OpptGroupSet: [],

			OriginSet: [],

			

		};

		var o = new sap.ui.model.json.JSONModel();

		var oppgrp = new sap.ui.model.json.JSONModel();

		

		//Opportunity group binding

		if (r.__batchResponses[5].statusCode === "200") {

			s.OpptGroupSet = r.__batchResponses[5].data.results;

		} else

			this.handleErrors(r, true);

		var opptGrp = {

			OpptGroupSet: [{

				Description: "",

				LanguageCode: "",

				OpptType: this.processType,

				OpptGroupCode: ""

			}]

		};

		if (s.OpptGroupSet.length !== undefined) {

			for (var j = 0; j < s.OpptGroupSet.length; j++) {

				if (s.OpptGroupSet[j].OpptType === this.processType) {

					opptGrp.OpptGroupSet.push(s.OpptGroupSet[j]);

				}

			}

			oppgrp.setData(opptGrp);

			this.byId("opportunityGroup").setModel(oppgrp, "json");

			this.byId("opportunityGroup").setSelectedKey(0);

		}

		//origin set binding

		if (r.__batchResponses[4].statusCode === "200") {

			s.OriginSet = r.__batchResponses[4].data.results;

		} else

			this.handleErrors(r, true);

		var origin = {

			OriginSet: [{

				Description: "",

				OriginCode: ""

			}]

		};

		if (s.OriginSet.length !== undefined) {

			for (var i = 0; i < s.OriginSet.length; i++) {

				origin.OriginSet.push(s.OriginSet[i]);

			}

			o.setData(origin);

			this.byId("origin").setModel(o, "json");

			this.byId("origin").setSelectedKey(0);

		}

	},

 

Extended extHookSaveOentry to get and add new fields data to save

	extHookSaveOentry: function(E) {

		// Place your hook implementation code here 

		var that = this;

		// Place your hook implementation code here 

		E.OpptGroupText = that.getView().byId("opportunityGroup")._getSelectedItemText();

		E.OpptGroupCode = that.getView().byId("opportunityGroup").getSelectedKey();

		E.OriginText = that.getView().byId("origin")._getSelectedItemText();

		E.Origin = that.getView().byId("origin").getSelectedKey();

		return E;

	},

 

OData extension in Gateway System:

Step 1: Created a new OData project (ZCRM_OPPT_EXTN) in SEGW Transaction code and redefined. Standard OData Service (SAP GW). Technical Service name: CRM_OPPORTUNITY.

Step 2: Selected all the entity types from the screenshot below

Summary:

By following the above steps, we can enhance the standard Fiori application with custom fields.

Hope this blog will be helpful 🙂

Thanks for reading .

Please provide your valuable feedback on comment section.

Thanks and regards

G Supriya