Extend SAP-Delivered Standard Application

Implement the View Extension (Add Fields)

In this step, you implement the extension in the application project. Here you have the necessary steps to find an extension point and make the changes you want.

In this example, you add the new labels and text fields in the extension point which, were already described in chapter Extend OData service (that is, the field Title or/and the two fields for the Incoterms).

Procedure

1. 
   In the project folder of the original project (created in chapter Create the Extension Application Project), you can open the view file (in this example S3.view.xml) by expanding the folders WebContent -> view where you want to make the changes.
   

In the Find/Replace window, make the following entry:

Field Name	Entry Value
Find:	ExtensionPoint

Get the name of the ExtensionPoint (for example extQuotationDetailsInfoTop) for later use.

This extension point is connected to the information area of the app.

Choose Close (to close the Find/Replace window).

In the extention project folder (created in chapter Create the Extension Application Project), select the folder WebContent, right-click, and choose New → Folder.

In the New Folder window, make the following entry:

Field Name	Entry Value
Folder name	view

In the view folder, right-click and choose New → File.

In the New File window, make the following entry:

Field Name	Entry Value
File name	extQuotationDetailsInfoTop.fragment.xml

In the content of the file insert the following code:

You have now created an extension of the original SAP delivered view.

In the WebContent folder, right-click and choose New → Folder.

In the New Folder window, make the following entry:

Field Name	Entry Value
Folder name	i18n

This is the language folder where the different languages for the extentions are maintained. In case you have performed the previous chapter Change a Field Label, this folder was already created.

In the i18n folder, right-click and choose New → File.

In the New File window, make the following entry:

Field Name	Entry Value
File name	i18n_custom.properties

In case you have carried out the steps in the previous chapter Change a Field Label, this file was already created.

In the content of the file insert the following code:

Example 1: Title

EXT_TITLE=Title

INCO1=Inco1 INCO2=Inco2

After this step, you must create the custom properties files for all the languages needed. See these steps next.

In the i18n folder, right-click and choose New → File.

In the New File window, make the following entry:

Field Name	Entry Value
File name	<i18n_custom_XX.properties> (replace XX with the language needed, for example de for Germany)  Note Make sure you use small characters!

In case you have carried out the steps in the previous chapter Change a Field Label, this file was already created.

In the content of the file insert the following code:

Example 1: Title

EXT_TITLE=XXXXXX  Note (replace the XXXXXX for the property in the language of the selected file)

INCO1=Inco1 INCO2=Inco2  Note (replace the values Inco1 and Inco2 for the property in the language of the selected file)

Repeat these steps for all the languages needed.

Open the Component.js file.

Merge the code with the following code (or overwrite it in case this is the only scenario implemented):

jQuery.sap.declare("zcus.sd.myquotations.Component"); sap.ui.component.load({ name:"cus.sd.myquotations", url:jQuery.sap.getModulePath("zcus.sd.myquotations")+"/../SD_MYQUOTES" }); cus.sd.myquotations.Component.extend("zcus.sd.myquotations.Component",{ metadata:{ "customizing":{ "sap.ui.viewExtensions":{ "cus.sd.myquotations.view.S3":{ "extQuotationDetailsInfoTop":{ className:"sap.ui.core.Fragment", fragmentName: "zcus.sd.myquotations.view.extQuotationDetailsInfoTop", type:"XML" } } } }, config:{ "sap.ca.i18Nconfigs":{ "bundleName":"zcus.sd.myquotations.i18n.i18n_custom" }, "sap.ca.serviceConfigs":[{ name:"lord_my_quotation_srv", serviceId:"/sap/opu/odata/sap/Z_LORD_MY_QUOTATION_SRV", isDefault:true }] } } });

The URL in the serviceID above reflects the name of the OData service created in chapter Extend OData Service. You must adapt it accordingly in case you gave the service ID a different name as Z_LORD_MY_QUOTATION_SRV.

Choose Save.

Result

Once the quotation header is changed in this adapted app, an error shows up once the user tries to save the changes. The reason for this is that within the change process a different view is used which still uses the original OData service LORD_MY_QUOTATION.

Implement a View Replacement

Use

In this step, you implement a view replacement in the application project. You can replace a view in a standard Fiori app with a custom view.

 Note

Since in this example here in chapter Implement the View Extension (Add Fields) and in this chapter Implement a View Replacement the same views are used, you can either implement the one or the other example in the same app.

 Note

As a prerequisite for this little scenario, you must create an extension application project as described in chapter Create the Extension Application Project. The other chapters Extend OData Service, Change a Field Label, Hide a Field and Implement the View Extension (Add Fields) need not be carried out for the examples described in this chapter.

Procedure

1. 
   In the extension project folder (created in chapter Create the Extension Application Project), select the folder WebContent, right-click and choose New → Folder.
   

In the New Folder window, make the following entry:

Field Name	Entry Value
Folder name	view

Choose Finish.

In the view folder, press the right button and choose New → File

In the New File window, make the following entry:

Field Name	Entry Value
File name	Z_S3.view.xml

Choose Finish.

In the content of the file, you copy the complete coding of the S3.view.xml from the original app.

 Note

The code below shows some changes from the S3 view. If you cannot use the extension points or you must change more things, this is a good way to perform your changes without modifying the original coding delivered by SAP.

The following coding explains two different small cases.

Example 1: Change sequence of fields

Here you change the order of the fields, in this case, the field Ship-To Party ‘shipTo>/Name1’ field moves down the below the Quotation Reference field ‘quotation>/PurchaseOrder’.

 Syntax

The result will look like this:

Example 2: Hiding the item table

Here you can hide the complete table at the bottom just by setting the property visible to false.

 Syntax

Choose Save.  Note You have now created a replacement of the original SAP delivered view. In the extension project folder (created in chapter Create the Extension Application Project), select the folder WebContent , open the file Component.js. In the content of the file, inside the customizing tag, insert the following code:  Syntax cus.sd.myquotations.Component.extend("zcus.sd.myquotations.Component", { metadata : { "customizing" : { "sap.ui.viewReplacements" : { "cus.sd.myquotations.view.S3" : { viewName : "zcus.sd.myquotations.view.Z_S3", type : "XML" } }, }, } }); Choose Save.  Note You have now defined that the Z_S3 view replaces the original S3 view from the original SAP delivered app.

Directory: ~sapidp -> 012002523100011849052014E -> SAP BP -> BBLibrary -> Documentation
Documentation -> Configuration and personalization of central ui component of sap fiori (EE3)

Download 392.93 Kb.

Share with your friends: