Skip to Content
Technical Articles
Author's profile photo Saminder Kaur

Adding custom fields in WebClient UI apps

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 that contains business catalog 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 will be displayed as hyperlinks.

You can also add custom fields of type ‘Association to Business Object’, these fields will be displayed as hyperlinks. The link will allow the user to navigate to the business object.

If you use standalone mode, the navigation to the business object will be in a separate window. In the FLP Integrated mode, the navigation happens in-place and the business object application replaces the current one.

The navigation to the business object will work with default implementation if the semantic object is same as custom business object name and action is ‘maintain’.

If the semantic object is not same as the field name, you can redefine method HANDLE_ASCBO_EVENT in the implementation class of your view and adjust as needed.

For example, I have added a custom field of type ‘Association to Business Object’.

Business Object ID: ZZ_TEAM1

In the default navigation, the url will launch the business object with:

Semantic Object: ZZ_TEAM1

Action: maintain

To change this navigation, I have to locate my view by pressing F2 button on the field. You can also get the component and view name from the View Configuration Tool.

Open UI component via BSP component workbench(Transaction: BSP_WD_CMPWB)

Enhance the Details view and redefine method HANDLE_ASCBO_EVENT in the view Implementation class. You need to copy the code from standard method and adjust intent and parameters as needed.

Example below:

With this, you can navigate to the Custom Business Object from the WebClient UI Application.

The different field types including code list, email, phone etc. with their meta data are supported with OP2020. The fields of type ‘Association to Business Object’ are supported with SAP S/4HANA OP2020 FPS1.

For more information check SAP Help link  Integration with Custom Fields and Logic Tool.




Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Sabarish K C
      Sabarish K C

      Hi Saminder,

      I have a similar requirement to add a custom field to Manage master agreement application. I've created the custom field using CFL but the field is not available in 'Show available fields' list under show configurable area of the application. Is there anything I'm missing.



      Author's profile photo Saminder Kaur
      Saminder Kaur
      Blog Post Author

      Hi Sabarish K C

      Please check if the custom fields are available in the context node within the view using transaction BSP_WD_CMPWB.

      Best Regards,


      Author's profile photo Stephane Nicolas
      Stephane Nicolas

      Hi Saminder,

      Thanks for your very interesting article.

      Concerning custom fields with code list, is it possible to have the code and the description of code value (In your case 101 following by code 101) in the overview page ?

      It's not really user friendly to have only the code value 🙁

      Best Regards


      Author's profile photo Saminder Kaur
      Saminder Kaur
      Blog Post Author

      Hi Stephane Nicolas ,

      Thanks for the feedback. This improvement is already in our roadmap. For now, you can extend the getter method of your custom attribute to display the description.

      Best Regards,