Thursday, 15 April 2021 19:22

Adding custom fields in WebClient UI apps

Written by Saminder Kaur
Rate this item
(0 votes)
“© 2020. SAP SE or an SAP affiliate company. All rights reserved.” “Used with permission of SAP SE”

WebClient UI applications support extensibility by adding custom fields created in ‘Custom Fields and Logic’ app in SAP S/4HANA.

It enables customers and partners to adopt standard applications to their business needs by a way of adding extension fields for pre-defined business contexts.


Key user needs to have a front-end business role “DLM_FIORI_EXTENSIBILITY” to access the application “Custom Fields and Logic”. This is used to create new custom field extensions.

Logon to the SAP Fiori launchpad(FLP) and access the app “Custom Fields and Logic” to add a new field.

Click on button to create new field.

Select the business context for your application.

Eg: Service_Header or Service_Item for extending service applications.

In this blog, I am going to add custom fields in Service Contract application.

Add a label/description, tooltip, datatype for the extension field.

Create and Publish the newly created field.

To add this field in WebClient UI application, launch the Service Contract application.

You can use the Standalone mode or Fiori Launchpad Integrated mode.

For Fiori Launchpad Integrated mode, assign business role SAP_BR_CUSTOMER_SERVICE_MGR to your user.

Launch application ‘Search Service Contracts’ from the FLP Home and open any Service Contract.

Choose button ‘Show Configurable Areas’ from the object page toolbar to launch the View Configuration tool.


WebClient UI application toolbar

If the configuration buttons are not available, go to the Personalize Settings and enable the Configuration Mode.

In FLP Integrated mode, the Personalize Settings are available in ‘My Dashboard’ which can be accessed from the object page toolbar as shown above. In standalone mode, you can access Personalize Settings from the User Menu on the top right side.

After opening the View Configuration tool, choose the header details section.

Edit the required view configuration to add the extension field from the list of available fields.

Click on the button ‘Show Available Fields’ and add your field to the required group.

You can also create a Responsive layout.

Click on ‘Show Field Properties’ button to change properties, add a field label to the newly added custom field and save the changes. Exit from the ‘Show Configurable Area’ mode by clicking outside the configurable areas. The newly added extension field is now available in the overview page.

The custom fields of type Email Address, Phone Number or Web Address

Continue reading here
Read 89 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.