adapt-the-ui-af9747f.md

Adapt the UI

Make changes to the UI elements of the adaptation project.

Contents

1. Overview

2. Procedure

3. UI Editing Options

4. Embedding Content

5. Preview in a Separate Browser Tab

Overview

SAPUI5 adaptation project uses the editing capabilities of the SAPUI5 Visual Editor tool. The SAPUI5 Visual Editor is a design-time editor that provides an intuitive user interface to modify SAPUI5 adaptation project applications. For example, you can add, remove, or move fields and groups. You can also view all properties of the controls in the application and change the configurable properties.

If you have created your project with Safe Mode, you cannot change properties, add fragments, or add controller extensions. To turn off Safe Mode, deselect the Safe Mode switch in the Visual Editor. Note once you switch it off, you cannot switch it on again.

Tip:

The SAPUI5 Visual Editor will show you your project using the SAPUI5 version that you have set during generation. You can preview your project using another SAPUI5 version by setting it in the project`s settings and relaunch SAPUI5 Visual Editor. Perform the following steps:

1. Open the ui5.yaml file in the root of your project.

2. Find the framework/version parameter and change its value to point to the desired SAPUI5 version.

3. Find the ui5/version property and change its value to the same desired SAPUI5 version.

4. Find the ui5/url property and change its value to point to the URL for the same desired SAPUI5 version.

Do not change other settings in this file because it will cause errors in your project.

The editor has an Outline pane, a Canvas (application preview), and a Properties pane.

If the application page is based on an SAP Fiori elements list report or an object page floorplan, a quick actions list is displayed above the Properties pane. This quick actions list provides an easy way for you to create the most commonly used adaptation changes. The available actions depend on the page floorplan and the SAPUI5 version. For more information, see Quick Actions Availablity Matrix

The buttons on the SAPUI5 Visual Editor toolbar allow you to:

• Navigate through and preview the application using the Navigation mode.

• Change the application using the Edit mode. In this mode, if you click a UI element in the Canvas, the element is selected and highlighted in the Outline pane and the same if you click a UI element in the Canvas. You can deselect the UI element by clicking it again in the Canvas. The Properties pane displays the properties of the UI element.

• Change the device format of the canvas to smartphone, tablet, or desktop view.

  Note:

  If you switch between device formats, your changes are saved to the workspace.

• Expand and collapse the panes to the right and left of the canvas.

Procedure

1. In your workspace, еxpand the webapp folder and right click the manifest.appdescr_variant file and choose Open SAPUI5 Visual Editor. SAPUI5 Visual Editor launches and the application loads in the editor for you to make the changes when you switch to Edit mode from Navigation mode.
2. Navigate to the page containing the UI element you want to change.
3. From the editor header, click Edit.

UI Editing Options

Change properties	Select the UI element you want to change. Change the element's properties as needed. Note: Not all properties can be changed.
Add new fields	Hover over or select a group or a field and click Add Field from the context menu. 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 adaptations, click OK.
Add a new group	Hover over or select a group or select the form it’s contained in and click Add Group from the context menu. The default group title is New Group, and you can rename it to whatever you want. To apply your adaptations, press [Enter] or select another element.
Add sections to an object page	Hover over or select a section and click Add Section from the context menu. Note: If all available sections are already 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 adaptations, click OK.
Rename fields and groups	Double-click a field or group. You can also hover over or select it and click Rename Field or Rename Group from the context menu. Rename the field label or group title. To apply your adaptations, press [Enter]. To quit, press [ESC].
Drag and drop fields and groups	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.
Cut and paste fields and groups	Hover over or select a field or group and clicke Cut from the context menu. 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. Move fields, groups, and object page sections. To paste a cut field, hover over or select a highlighted group or a field in a highlighted group and click Paste. To paste a cut group, hover over or select a group in the highlighted forms and click Paste from the context menu. Note: To remove the highlighting and exit pasting, press [ESC].
Combine fields	You can combine up to three fields so that they’re displayed in a single line. Select a field. Press and hold [CTRL]. Move fields, groups, and object page while selecting the other fields you want to combine with this field. Click Combine from the context menu of one of the selected fields where you want the combined fields to be displayed.
Split combined fields	Hover over or select the combined fields. Click Split from the context menu.
Remove fields, groups, or object page sections	Hover over or select the field, group, or section that you want to remove from the UI. Click Remove Field, Remove Group, or Remove Section from the context menu 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.

Embedding Content

To embed content, perform the following steps in Embedding Content.

Preview in a Separate Browser Tab

You can preview your project in a separate browser tab. For more information, see Preview the Adaptation Project.