Adding custom fields in WebClient UI apps

[saminder]

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.

Prerequisites:

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.

 

 

 

[former_member686738]

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.

Regards,

Sabarish

[saminder]

Hi sabarish_sab

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

Best Regards,

Saminder

[former_member689555]

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

Stéphane

[saminder]

Hi steph78 ,

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,

Saminder

[saminder]

Hi steph78 ,

The description for code list is already displayed as of OP2022.

Best Regards,

Saminder

 

 

[ramzi_benabdallah]

Hi saminder.kaur

 

Thanks for this blog, it's really helpfull.

I wonder how can I transport this custom view to the quality  system ?  how can I save my personilaziton into TR ?

 

Thanks in advance,

Ramzi

[saminder]

Hi ramzi.benabdallah

When you save the configuration, you will get a prompt for transport request. It will be a normal transport that can be transported to Q-systems. The personalization cannot be transported, only configuration can be transported.

Best Regards,

Saminder

[ramzi_benabdallah]

Hi saminder.kaur

Thanks for your kind answer, but unfortunately the prompt does not show up after clicking on save button like you'll see below :

Am I missing something? 

How to set this custom configuration view like by default to all the users and all contracts servcie ? beceause when I change the contract my custom field disappeared.

Sorrry for this beginner question, I just discovered this technologie 😕 

Thanks for your help in advance,

Ramzi

[saminder]

Hi ramzi.benabdallah

There are two view configurations in your screenshot: Display Mode Configuration and Edit Mode Configuration. You will have to update the edit configuration for edit mode. For the transports, please make sure you are using development system.

For more details you can check the help documentation for UI Configuration Tool.

Best Regards,

Saminder

[tprekel]

Hi saminder.kaur

thanks for the interesting blog post. We have used this approach in multiple service processes. Now we wanted to build custom fields for opportunities.



Unfortunately, those fields aren't available in 'Show available fields'. They were also not added in the context node in BSP_WD_CMPWB.. same for Activities like Tasks.

Do you have any idea how to achieve this approach for other than service WebClient UI Apps?

Best regards
Thomas

[saminder]

Hi tprekel

I would suggest to create an incident for further investigation.

The context nodes with custom fields are not available in the mentioned applications.

Best Regards,

Saminder

[tprekel]

Hi saminder.kaur

thanks for your reply! Yes, I already did that and I was told to enhance view BT111H_OPPT with context node "Customer_H" on my own. It works perfectly fine now. I don't understand why the context node is not assigned to opportunity views in the newest S/4 releases. It seems to have been forgotten. Especially, since it is possible to create custom fields for opportunity header business context.

Best regards,

Thomas