In-App Extensibility in S/4 HANA Cloud | Part 1 – Adding a custom field on the UI
This blog intends to demonstrate in-app extensibility in S/4 HANA cloud, with focus on how a custom field can be added on a Fiori application. Extensibility in S/4 HANA cloud spans across multiple options and possibilities and this is just one of the scenarios. This is the first blog in the In-App extensibility series and more scenarios will be covered in subsequent blogs in this series.
The customer needs to add a custom field on the “Purchase Order” screen, as they need to see some specific information (in this field) and the available standard fields don’t suffice this requirement.
A custom field needs to be created in the system and subsequently added to the purchase order screen. Data entered in this field will be saved in the database and subsequently retrieved later when the purchase order is viewed/edited.
The following steps are to be followed for adding the custom field.
1) Access the “Custom fields and Logic” app
This app is meant to create custom fields in the system. It can be located by either searching directly in the search box or in the “Extensibility” catalog.
2) Once in the App, make sure you are in the “Custom fields” tab. Click on the “+” icon to start creating a new custom field
3) On the subsequent popup, you will need to enter the details for creating the new custom field. One of the most important aspect of these details is to select the correct business context under which the field needs to be created. Upon choosing the business context, the field can be added to the relevant apps/screens/forms etc which fall under this context. Since for this demo, we want to add a custom field to the Purchase order screen, we will choose the business context as “Procurement: Purchasing Document”
Enter the rest of the details as appropriate for the field – the label, tooltip and data type of the custom field.
In our case, we are adding a field “Special request to supplier”. This will be a text field having a maximum length of 20 characters.
Click on “Create and Edit” to move into further processing of this new field.
4) Depending on the business context chosen on the previous screen, the system presents different options where this new field can be used in the system. This includes UIs and Reports, Email templates, form templates and so on.
For our demo, we want to add the field on a UI so navigate to the “UIs and Reports” tab.
5) Since we want to add the new field on the Purchase order screen, scroll down within the “UIs and Reports” tab to locate the “Manage purchase order”. Click on the “Enable Usage” button against this option. This will mean that the new field is now enabled to be used on this UI.
Note that once “Enable usage” is clicked, the field usage column should have changed to “Enabled”.
6) Click on “Save” to save the changes
7) The field is now saved but for changes to take effect and the field to be available for addition in the UI, it needs to be published. Click on the “Publish” button to publish the field.
It may take a few minutes for the field to be published. The status will display as “Published” once this is complete.
8) Now that the newly added custom field is published, it needs to be added on the relevant UI application screen. Navigate to the “Manage Purchase orders” app to add the custom field on that screen.
9) You may choose to create a new purchase order or open an existing one. In this case, we search for an existing purchase order and open it on the screen.
10) To add the new field, click on the User icon on the top-right corner of the screen and choose “Adapt UI”
11) You will now be in the Edit mode on the UI screen. Choose an appropriate area to add the custom field, right-click on the area and select “+ Add: Field”. In our case, we will add the new field in the “Further information” section.
12) Clicking on “Add field” will bring up a popup which shows a list of fields that are available to be added on this screen. Search for the field “Special request to supplier” that was created earlier. Choose the field once available and click “OK”
13) The field will now be added on the screen.
14) Click on “Save and Exit” to save the changes and exit the UI adaptation mode.
15) The new field is now available in the screen. You can enter data into this field as you would normally do on a purchase order create/edit screen and the relevant changes will be saved in the backend along with the other purchase order information. The same data will be retrieved once you open the relevant purchase order for viewing/editing.
It is possible to add a custom field to a Fiori UI screen as demonstrated above.
It should be noted that while any Fiori screen will allow addition of such custom fields, there may still be some transactions/screens in the system which may not allow such addition. While it can be expected that with subsequent releases, all relevant transactions will allow this type of extensibility, you are advised to ensure that the concerned application supports extensibility before attempting to add a field as advised above.