Skip to content

Commit

Permalink
Update from SAP DITA CMS (squashed):
Browse files Browse the repository at this point in the history
commit bf582285086b1857881cf204d0d16e7326e448fa
Author: REDACTED
Date:   Fri Nov 8 07:22:55 2024 +0000

    Update from SAP DITA CMS 2024-11-08 07:22:55

    Project: dita-all/dkl1587758022827
    Project map: bf20decceb934e9492c420e6138a2410.ditamap
    Output: loio042b51923fc64122ac4c1627fb4b42c2
    Language: en-US
    Builddable map: 65817585a1874e8296d5ee9b43edb30f.ditamap

commit 050fca9aa4cfb6431650ab6c9a71d6ae6585fede
Author: REDACTED
Date:   Thu Nov 7 23:53:34 2024 +0000

    Update from SAP DITA CMS 2024-11-07 23:53:33

    Project: dita-all/dkl1587758022827
    Project map: bf20decceb934e9492c420e6138a2410.ditamap
    Output: loio042b51923fc64122ac4c1627fb4b42c2
    Language: en-US
    Builddable map: 65817585a1874e8296d5ee9b43edb30f.ditamap

commit 7cef65994b9882a655aaa15370d2f116be406480
Author: REDACTED
Date:   Thu Nov 7 13:01:55 2024 +0000

    Update from SAP DITA CMS 2024-11-07 13:01:55
    Project: dita-all/dkl1587758022827
    Project map: bf20decceb934e9492c420e6138a2410.ditamap
    Output: loio042b51923fc64122ac4c1627fb4b42c2

##################################################
[Remaining squash message was removed before commit...]
  • Loading branch information
ditaccms-bot committed Nov 8, 2024
1 parent f2f8de4 commit a858564
Show file tree
Hide file tree
Showing 43 changed files with 449 additions and 294 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

Developers can configure the SAP Fiori elements applications by using manifest settings and SAPUI5 flexibility changes \(`OData V2`\) in the *Page Editor*. The configuration properties available for UI-based maintenance are provided by the <code><a href="https://www.npmjs.com/package/@sap/ux-specification">@sap/ux-specification</a></code> node module, which is installed in the application's root folder.

There are different module versions that correspond to the different SAPUI5 versions. You can find the right version by checking the UI5-\* tags at [@sap/ux-specification](https://www.npmjs.com/package/@sap/ux-specification?activeTab=versions). In case you need to change the **minUI5version** please see, [Application Minimum SAPUI5 Version](../Project-Functions/application-minimum-sapui5-version-009f43e.md).
There are different module versions that correspond to the different SAPUI5 versions. You can find the right version by checking the UI5-\* tags at [@sap/ux-specification](https://www.npmjs.com/package/@sap/ux-specification?activeTab=versions). In case you need to change the **minUI5version** please see, [Application SAPUI5 Version](../Project-Functions/application-sapui5-version-009f43e.md).

An overview of the available manifest and **UI5** flexibility properties can be accessed in the [Application Information](../Project-Functions/application-information-c3e0989.md) page. In addition, you can access the Configuration Documentation by right-clicking on your project in the tree view of the application modeler.

Expand Down

This file was deleted.

120 changes: 120 additions & 0 deletions docs/Project-Functions/application-sapui5-version-009f43e.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!-- loio009f43e381234626b41e542dd7335672 -->

# Application SAPUI5 Version



<a name="loio009f43e381234626b41e542dd7335672__section_dk3_c11_cdc"/>

## Minimum SAPUI5 Version

The minimum SAPUI5 version declares the version which is required at runtime to support the features used in application development. It is set via the `minUI5Version` property in the `manifest.json` file:

> ### Sample Code:
> JSON
>
> ```
> {
> "sap.ui5": {
> "dependencies": {
> "minUI5Version": "1.120.4"
> }
> }
> }
> ```
If the target system does not have the required minimum SAPUI5 version, a warning message appears when deploying your application. For more information, see [Deploying an Application](../Deploying-an-Application/deploying-an-application-1b7a3be.md). The minimum SAPUI5 version is set during generation when selecting a version for the project and can also be changed using the *Fiori: Change Minimum SAPUI5 Version* command.
It is also used to determine which version of the [@sap/ux-specification](https://www.npmjs.com/package/@sap/ux-specification) module is installed to provide the matching feature set in Application Modeler and Guided Development. Changing the minimum SAPUI5 version with the *Fiori: Change Minimum SAPUI5 Version* command will update the `@sap/ux-specification` module if needed.
<a name="loio009f43e381234626b41e542dd7335672__section_m1n_3c1_cdc"/>
## SAPUI5 Preview Version
The application's minimum SAPUI5 version is used by default for previewing an application in the development environment. You can use a different version by creating a run configuration. For more information, see [Previewing an Application](../Previewing-an-Application/previewing-an-application-b962685.md).
The SAPUI5 preview version is fetched by default from `https://ui5.sap.com`. If the requested version is not found, the next higher available version is used. You can set different source paths and different default SAPUI5 preview versions by configuring `@sap/ux-ui5-tooling`. For more information, see [@sap/ux-ui5-tooling](https://www.npmjs.com/package/@sap/ux-ui5-tooling?activeTab=readme).
<a name="loio009f43e381234626b41e542dd7335672__section_tbd_gd1_cdc"/>
## SAPUI5 Deployed Version
The SAPUI5 version used for a deployed application depends on the target platform and whether an application is running standalone or embedded in the SAP Fiori launchpad.
### ABAP Environment
**SAP Fiori launchpad**
SAP Fiori applications deployed to an ABAP environment and embedded in SAP Fiori launchpad will use the SAPUI5 version deployed in the backend.
**Standalone**
If the application is running standalone using a deployed `index.html`, then the version depends on the configuration in the `index.html` file. Applications generated with the SAP Fiori generator contain an `index.html` file with a relative path to the host:
> ### Sample Code:
> HTML
>
> ```
> <script id="sap-ui-bootstrap" src="resources/sap-ui-core.js">
> ```
These applications will also use the SAPUI5 version installed in the backend system. Their path can be modified to load resources directly from `https://ui5.sap.com` or a specific SAPUI5 version:
> ### Sample Code:
> HTML
>
> ```
> <script id="sap-ui-bootstrap" src="https://ui5.sap.com/1.114.12/resources/sap-ui-core.js">
> ```
### Cloud Foundry Environment
**Launchpad Service**
SAP Fiori applications deployed to Cloud Foundry run in an iFrame using the SAPUI5 version of the backend. For more information about the launchpad service. For more information, see [SAP Build Work Zone](https://help.sap.com/docs/build-work-zone-standard-edition/sap-build-work-zone-standard-edition/what-is-sap-build-work-zone-standard-edition).
**Standalone**
If the application is running standalone, the *Fiori: Add Deployment Configuration* command adds a route to a destination for SAPUI5 resources to the `xs-app.json`:
> ### Sample Code:
> JSON
>
> ```
> {
> "routes": [
> {
> "source": "^/resources/(.*)$",
> "target": "/resources/$1",
> "authenticationType": "none",
> "destination": "ui5"
> }
> ]
> }
> ```
Also, an instance based destination pointing to `https://ui5.sap.com` is added to the `mta.yaml`:
> ### Sample Code:
> YAML
>
> ```
> instance:
> destinations:
> - Authentication: NoAuthentication
> Name: ui5
> ProxyType: Internet
> Type: HTTP
> URL: https://ui5.sap.com
> ```
By default, the application uses the latest SAPUI5 version. This can be changed in the `mta.yaml` or by configuring the generated destination service using SAP Business Technology Platform \(SAP BTP\). You can also replace the instance based destination with an account level destination. For more information, see [SAP Cloud Portal Service on Cloud Foundry](https://help.sap.com/docs/cloud-portal-service/sap-cloud-portal-service-on-cloud-foundry/configure-application-routing-xs-app-json).
54 changes: 28 additions & 26 deletions docs/adapt-the-ui-af9747f.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,26 +29,28 @@ Make changes to the UI elements of the adaptation project.

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 switched on, you will not be able to do some of the actions described in this section. More specifically you will not be able to change properties, add fragments, or add controller extensions. If you think you want to turn Safe Mode off, so you can use these features, you can do this by selecting the switch named *Safe Mode* in the Visual Editor. Be aware that if you switch it off once, it is not possible to switch it on again.
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 its generation. If you want, you can preview your project using another SAPUI5 version, but you need to set it in the project\`s settings prior the next launch of the SAPUI5 Visual Editor. It can be easily done following these steps:
> 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 placed in the root of your project.
> 1. Open the `ui5.yaml` file in the root of your project.
>
> 2. Find the `framework/version` parameter and change their value to point to the desired SAPUI5 version.
> 3. Find the `ui5/version` property, and change its value to the same desired SAPUI5 version.
> 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.
>
> Have in mind that changing other settings in this file will result in undesirable changes in the behavior of your project, and it is strongly advised not to make such changes.
> 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.

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

- Navigate through and preview the application using the *Preview* mode.
- 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 vice versa. 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 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.

Expand All @@ -64,9 +66,9 @@ The buttons on the SAPUI5 Visual Editor toolbar allow you to:

## 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 Preview mode.
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, select *Edit*.
3. From the editor header, click *Edit*.



Expand Down Expand Up @@ -102,12 +104,12 @@ The buttons on the SAPUI5 Visual Editor toolbar allow you to:
</td>
<td valign="top">

1. Hover over or select a group or a field and choose *Add Field* from the context menu.
1. Hover over or select a group or a field and click *Add Field* from the context menu.
2. 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.

3. To apply your adaptations, choose *OK*.
3. To apply your adaptations, click *OK*.



Expand All @@ -121,11 +123,11 @@ The buttons on the SAPUI5 Visual Editor toolbar allow you to:
</td>
<td valign="top">

1. Hover over or select a group or select the form it’s contained in and choose *Add Group* from the context menu.
1. 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.

2. To apply your adaptations, press [ENTER\] or select another element.
2. To apply your adaptations, press [Enter\] or select another element.



Expand All @@ -139,7 +141,7 @@ The buttons on the SAPUI5 Visual Editor toolbar allow you to:
</td>
<td valign="top">

1. Hover over or select a section and choose *Add Section* from the context menu.
1. 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.
Expand All @@ -148,7 +150,7 @@ The buttons on the SAPUI5 Visual Editor toolbar allow you to:

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

3. To apply your adaptations, choose *OK*.
3. To apply your adaptations, click *OK*.



Expand All @@ -162,9 +164,9 @@ The buttons on the SAPUI5 Visual Editor toolbar allow you to:
</td>
<td valign="top">

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.
1. 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.
2. Rename the field label or group title.
3. To apply your adaptations, press [ENTER\]; to quit, press [ESC\].
3. To apply your adaptations, press [Enter\]. To quit, press [ESC\].



Expand All @@ -181,7 +183,7 @@ The buttons on the SAPUI5 Visual Editor toolbar allow you to:
1. Drag a field, group, or section.
2. 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.
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.



Expand All @@ -196,8 +198,8 @@ The buttons on the SAPUI5 Visual Editor toolbar allow you to:
</td>
<td valign="top">

1. Hover over or select a field or group and choose *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.
2. To paste a cut field, hover over or select a highlighted group or a field in a highlighted group and choose *Paste*. To paste a cut group, hover over or select a group in the highlighted forms and choose *Paste* from the context menu.
1. 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.
2. 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\].
Expand All @@ -218,7 +220,7 @@ 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\]. Move fields, groups, and object page while selecting the other fields you want to combine with this field.
3. Choose *Combine* from the context menu of one of the selected fields where you want the combined fields to be displayed.
3. Click *Combine* from the context menu of one of the selected fields where you want the combined fields to be displayed.



Expand All @@ -233,7 +235,7 @@ You can combine up to three fields so that they’re displayed in a single line.
<td valign="top">

1. Hover over or select the combined fields.
2. Choose *Split* from the context menu.
2. Click *Split* from the context menu.



Expand All @@ -248,7 +250,7 @@ You can combine up to three fields so that they’re displayed in a single line.
<td valign="top">

1. Hover over or select the field, group, or section that you want to remove from the UI.
2. Choose *Remove Field*, *Remove Group*, or *Remove Section* from the context menu or press [DEL\].
2. 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.

Expand All @@ -265,13 +267,13 @@ You can combine up to three fields so that they’re displayed in a single line.

## Embedding Content

Embedding content is done the same way, as in the key user scenario. You can follow the procedure described in [Embedding Content](https://help.sap.com/viewer/0f8b49c4dfc94bc0bda25a19aa93d5b2/latest/en-US/bfdf15154f16419fb60ce598b21fe515.html).
To embed content, perform the following steps in [Embedding Content](https://help.sap.com/viewer/0f8b49c4dfc94bc0bda25a19aa93d5b2/latest/en-US/bfdf15154f16419fb60ce598b21fe515.html).



<a name="loioaf9747fdd5e04ac38faefe535c4c6789__PreviewSepertaeTab"/>

## Preview in a Separate Browser Tab

See [Preview the Adaptation Project](preview-the-adaptation-project-64cc15b.md).
You can preview your project in a separate browser tab. For more information, see [Preview the Adaptation Project](preview-the-adaptation-project-64cc15b.md).

Loading

0 comments on commit a858564

Please sign in to comment.