Add a custom field: An example on SAP Fiori Demo Cloud Edition

Extending selected SAP standard apps is available on SAP Fiori Demo Cloud Edition.

Adding custom fields is one of the most common use cases for extending app. Because customers have extended applications by including custom fields in their ERP backend. Most of cases, those custom fields are required on Fiori app UI.

Here are steps for implementation.

*HCP: HANA Cloud Platform.

Landscape environment:

• Launchpad and Fiori apps UI are on HCP.
• Gateway and ERP backend servers are onPremise.

Connections:

• Users access to Fiori launchpad on HCP.
• HCP and onPremise servers are connected via HANA Cloud Connector

Steps:

1. Extend the OData service for including custom fields in ERP backend
2. Replace the OData services from standard to your extended OData service
3. Extended a view and include required custom fields using UI extension point
4. Deploy the app on HCP and create a tile on HCP launchpad

The Best Practice Content for Enhance has only 2 examples. (Hide an Object and Change a Label)

Here is the 3rd example, “Add a Field”.

This example gives detail steps for the above step 3. (We use existing properties in this example to make it simple)

Add a Field

You can add a missing field or a custom field in a view. Using the example app “Approve Purchase Order”, this section showcases how to add a field. In this example, we are going to add Payment Term in the PO Object Header. Payment Term is not a custom field but let’s assume it is a custom field configured by above step 1 and 2.   

Prerequisite

You have already entered SAP Web IDE as described in Start.

Procedure

1. Go to Extend mode on Demo Cloud Edition

Go to the SAP Fiori Demo Cloud Edition and run the “Approve Purchase Order” app.

Select the Extend icon on the top and select the option Develop Apps.

You are going to create an extension project in SAP Web IDE. Select the “Launch SAP Web IDE”

2. Open Extensibility Pane and Find UI extension points

     Extension project was created.You can find UI extension points in the Extensibility Pane.

Select Tools -> Extensibility Pane.

Change the Preview mode to the Extensibility Mode.

You see several wrench icons which are UI extension points. You can insert fields in the UI extension points.

Let’s add the “Payment Term” field in the PO header object. The extension point name is “exHeaderInfo”.

Select the extension point “exHeaderInfo”. Extend -> Extend View/Fragment. View extension will be created.

3. Add a field using Layout Editor

     Selected the generated extension view in the left pane. Right-click -> Open With -> Layout Editor

Specify a Data Set for the view. Payment Tern is a part of HeaderDetailCollection.

Select the HeaderDetailCollection in the Data Set pull down.

Add a control by Drag& Drop. Find the Object Attribute control in the Display control group.

Press<Ctrl> key and Drag & Drop the “Object Attributes” control to the extended view.

Set the tile as Payment Term. Active = true. Select the link icon on the right hand side of “Text” field. You are going to map Payment Term value tothis.

Repeat the step and add the “PaymentTermDescription”.

Save the changes. If you see the * at the beginning of the file name, it means changes have not been saved.

4. Test the extended app.

Select the index.html and Run.

You see the Payment Term 002. In this environment, Payment Term Description was not maintained in this system.

Result

The Payment Term value is available in the PO header view. For deploying your changes to the SAP HANA Cloud platform and to deploy the app on the Fiori Launchpad, carry out the steps in ‘Deploy’.