Show TOC

Making UI ChangesLocate this document in the navigation structure

Choose Adapt UI from your options menu or Me Area (or from the upper right corner of the browser if you’re practicing in the SAPUI5 Demo Kit).

Context

You’ll see a black header and footer bar; these indicate that you’re now in the adaptation mode of UI adaptation at runtime (RTA).

A black header and footer bar indicate the UI adaptation mode.

And once you’re there, this is what you can do:

Tip

If you need tips and solutions to the most common problems, check Something Isn’t Working like It Should?.

Add fields

  1. Hover over or select a group or a field and choose Add Field from the context menu (right-click).

  2. Select the fields from the list of available fields that you want to add to the user interface.

    You can also search for field labels and tooltips, or sort the fields in alphabetical order.

  3. Choose OK.
Note

If you can’t find a field that suits your purposes, you can create a custom field (SAP S/4HANA backend required). To use this field in RTA, you have to restart the app and the UI adaptation mode. Here's more information:

  • If you use RTA on premise, see SAP Library for SAP NetWeaver 7.5 on SAP Help Portal. Under Application Help, open Function-Oriented View and search for Custom Fields and Logic.

  • If you use RTA with SAP S/4HANA Cloud, see Product Assistance for SAP S/4HANA on SAP Help Portal. Choose your cloud edition and under Additional Information, open Start of the navigation path Product Assistance Next navigation step Generic Information Next navigation step General Functions for the Key User Next navigation step Extensibility Next navigation step Custom Fields and Logic End of the navigation path.

Add groups

  1. Hover over or select a group or select the form it’s contained in and choose Add Group from the context menu (right-click).

    A group with the default title New Group is added. You can rename it to whatever you want or press Esc to quit the renaming.

  2. Press Enter.

Add sections

  1. Hover over or select a section and choose Add Section from the context menu (right-click).

  2. Select the sections from the list of available sections that you want to add to the UI.

    You can also search for sections or sort them in alphabetical order.

  3. Choose OK.

Rename fields and groups

  1. Double-click a field or group. You can also hover over or select it and choose Rename Field or Rename Group from the context menu (right-click).

  2. Rename the field label or group title.

  3. Press Enter.

Move fields, groups, and sections

  1. Drag a field, group, or section.

  2. Drop it on its new location.

    A space appears where you can drop it. You can drop a field above or below any of the highlighted fields or in any group marked with a dashed box; you can drop a group or section on any of the highlighted groups or sections.

    If you drop the field, group, or section outside a dashed box, or press Esc, it's moved to this space and you exit the dragging mode.

Note

You can also move fields, groups and sections by cutting and pasting them.

If you use a computer or laptop with a touchscreen and want to use drag and drop in Google Chrome, you can try out the following experimental feature: Go to chrome://flags, set Enable touch events to Disabled, and restart your browser.

Cut and paste fields, groups and sections

  1. Hover over or select a field, group, or section and choose Cut from the context menu (right-click). The groups where you can paste the cut field, the forms where you can paste the cut group, and the area where you can paste the cut section get highlighted using dashed boxes.

  2. To paste a cut field, hover over or select a highlighted group or a field in a highlighted group and choose Paste from the context menu. To paste a cut group, hover over or select a group in the highlighted forms and choose Paste from the context menu. To paste a cut section, hover over or select a section in the highlighted area and choose Paste from the context menu.

Combine fields
You can combine up to three fields so that they’re displayed in a single line.

  1. Select a field.

  2. Press and hold Ctrl while selecting the other fields.

  3. Choose Combine from the context menu of one of the selected fields where you want the combined fields to be displayed.

Select the fields and combine them.

The combined fields are displayed in a single line.

Split combined fields

  1. Hover over or select the combined fields.

  2. Choose Split from the context menu (right-click).

Remove fields, groups, or sections

  1. Hover over or select the field, group, or section that you want to remove from the user interface.

  2. Either choose Remove Field, Remove Group, or Remove Section from the context menu (right-click) or press Del.

    Note

    The fields and sections are only removed from the UI, not permanently deleted. They're still available in the list of available fields or sections, and you can add them again at any point. Also, you can't remove mandatory fields (also those contained in groups) by accident as the system will ask you to confirm.

Undo and redo UI changes

With the arrow buttons in the middle of the footer bar you can undo and redo your UI changes.

Discard all UI changes

If at any point you want to discard all your UI changes and reset the app to the standard version, choose Reset from the header bar and follow the dialog boxes.

Note

This resets the app in the productive system and, if used, in the test system.

To exit the UI adaptation mode, choose Exit from the header bar.