Making Changes to an App

Choose Adapt UI from your options menu (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 UI adaptation mode.

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

Add new fields	Hover over or select a group or a field and choose Add Field from the context menu (right-click). Select the fields from the list of available fields that you want to add to the UI. You can also search for field labels and tooltips, or sort the fields in alphabetical order. To apply your changes, 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). For more information, see Custom Fields and Logic.
Add new groups	Hover over or select a group or select the form it’s contained in and choose Add Group from the context menu (right-click). Its default title is New Group, but you can rename it to whatever you want. To apply your changes, press `ENTER` or `ESC`.
Add sections to an object page	Hover over or select a section and choose Add Section from the context menu (right-click). Note If all available sections are placed on the object page, you cannot use this function and it’s grayed out in the context menu. 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. To apply your changes, choose OK.
Rename fields and groups	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). Rename the field label or group title. To apply your changes, press `ENTER`; to quit, press `ESC`.
Move fields, groups, and object page sections	Drag a field, group, or section. Drop the field, group, or section 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, it's moved to this space and you exit the dragging mode. Note 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. You can also move fields and groups by cutting and pasting them.
Cut and paste fields and groups	Hover over or select a field or group and choose Cut from the context menu (right-click). The cut field or group gets highlighted. Also, the groups where you can paste the cut field or the forms where you can paste the cut group get highlighted using dashed boxes. 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. Note To get rid of the highlighting and exit pasting, press `ESC`.
Combine fields	You can combine two or more fields so that they’re displayed in a single line using only the label of the first field. Select a field. Press and hold `CTRL` while selecting the other fields you want to combine with this field. Choose Combine from the context menu of one of the selected fields.
Split combined fields	Hover over or select the combined fields. Choose Split from the context menu (right-click).
Remove fields, groups, or object page sections	Hover over or select the field, group, or section that you want to remove from the UI. Either choose Remove Field, Remove Group, or Remove Section from the context menu (right-click) or press `DEL`. 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. You cannot remove mandatory fields (also those contained in groups) by accident as the system will ask you to confirm.
Undo and redo changes	With the arrow buttons in the middle of the footer bar you can undo and redo your changes.
Discard all changes	If at any point you want to restore the UI to its initial state, just choose Restore from the header bar and follow the dialog boxes.

Many functions are also available in the Adapt Form dialog box. To access it, select a group or a field and choose More ... from the context menu (right-click). For more information, see SAPUI5 Flexibility Services.

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