Skip to Content
Author's profile photo Masayuki Sekihara

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.    /wp-content/uploads/2015/07/demo_cloud_ext18_758831.png

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.
/wp-content/uploads/2015/07/demo_cloud_ext3_757933.png

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

/wp-content/uploads/2015/07/demo_cloud_ext4_757943.png

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.

/wp-content/uploads/2015/07/demo_cloud_ext5_758106.png

Change the Preview mode to the Extensibility Mode.

/wp-content/uploads/2015/07/demo_cloud_ext6_758107.png

 

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

/wp-content/uploads/2015/07/demo_cloud_ext7_758123.png

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.

/wp-content/uploads/2015/07/demo_cloud_ext8_758124.png

3. Add a field using Layout Editor

 

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

/wp-content/uploads/2015/07/demo_cloud_ext9_758121.png

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

Select the HeaderDetailCollection in the Data Set pull down.

/wp-content/uploads/2015/07/demo_cloud_ext12_758819.png

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.

/wp-content/uploads/2015/07/demo_cloud_ext13_758820.png

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.

/wp-content/uploads/2015/07/demo_cloud_ext14_758821.png

/wp-content/uploads/2015/07/demo_cloud_ext15_758822.png

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.

/wp-content/uploads/2015/07/demo_cloud_ext16_758823.png

4. Test the extended app.

 

Select the index.html and Run.

/wp-content/uploads/2015/07/demo_cloud_ext17_758829.png

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

/wp-content/uploads/2015/07/demo_cloud_ext18_758831.png

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’.

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Navin Mittal
      Navin Mittal

      Thanks for Sharing, it is very helpful 😎

      Author's profile photo Sanket Chimalwar
      Sanket Chimalwar

      Finally i got some time to do and it was really fast to add an extensibility field.

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      thank you . this is something I needed 🙂 awesome

      Author's profile photo Michael Appleby
      Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG