@ui5/mcp-server 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/LICENSE +201 -0
- package/LICENSES/Apache-2.0.txt +73 -0
- package/README.md +131 -0
- package/bin/ui5mcp.js +2 -0
- package/lib/Context.d.ts +28 -0
- package/lib/Context.js +71 -0
- package/lib/Context.js.map +1 -0
- package/lib/api.d.ts +3 -0
- package/lib/api.js +3 -0
- package/lib/api.js.map +1 -0
- package/lib/cli.d.ts +1 -0
- package/lib/cli.js +12 -0
- package/lib/cli.js.map +1 -0
- package/lib/registerTools.d.ts +133 -0
- package/lib/registerTools.js +59 -0
- package/lib/registerTools.js.map +1 -0
- package/lib/resources/documentation/getDocumentation.d.ts +18 -0
- package/lib/resources/documentation/getDocumentation.js +70 -0
- package/lib/resources/documentation/getDocumentation.js.map +1 -0
- package/lib/server.d.ts +10 -0
- package/lib/server.js +113 -0
- package/lib/server.js.map +1 -0
- package/lib/tools/create_ui5_app/ODataMetadata.d.ts +55 -0
- package/lib/tools/create_ui5_app/ODataMetadata.js +99 -0
- package/lib/tools/create_ui5_app/ODataMetadata.js.map +1 -0
- package/lib/tools/create_ui5_app/createSuccessMessage.d.ts +13 -0
- package/lib/tools/create_ui5_app/createSuccessMessage.js +45 -0
- package/lib/tools/create_ui5_app/createSuccessMessage.js.map +1 -0
- package/lib/tools/create_ui5_app/create_ui5_app.d.ts +8 -0
- package/lib/tools/create_ui5_app/create_ui5_app.js +273 -0
- package/lib/tools/create_ui5_app/create_ui5_app.js.map +1 -0
- package/lib/tools/create_ui5_app/index.d.ts +3 -0
- package/lib/tools/create_ui5_app/index.js +58 -0
- package/lib/tools/create_ui5_app/index.js.map +1 -0
- package/lib/tools/create_ui5_app/isValidUrl.d.ts +16 -0
- package/lib/tools/create_ui5_app/isValidUrl.js +59 -0
- package/lib/tools/create_ui5_app/isValidUrl.js.map +1 -0
- package/lib/tools/create_ui5_app/schema.d.ts +135 -0
- package/lib/tools/create_ui5_app/schema.js +67 -0
- package/lib/tools/create_ui5_app/schema.js.map +1 -0
- package/lib/tools/create_ui5_app/templateProcessor.d.ts +67 -0
- package/lib/tools/create_ui5_app/templateProcessor.js +59 -0
- package/lib/tools/create_ui5_app/templateProcessor.js.map +1 -0
- package/lib/tools/create_ui5_app/ui5Version.d.ts +2 -0
- package/lib/tools/create_ui5_app/ui5Version.js +6 -0
- package/lib/tools/create_ui5_app/ui5Version.js.map +1 -0
- package/lib/tools/get_api_reference/createUriForSymbol.d.ts +2 -0
- package/lib/tools/get_api_reference/createUriForSymbol.js +49 -0
- package/lib/tools/get_api_reference/createUriForSymbol.js.map +1 -0
- package/lib/tools/get_api_reference/getApiReference.d.ts +10 -0
- package/lib/tools/get_api_reference/getApiReference.js +51 -0
- package/lib/tools/get_api_reference/getApiReference.js.map +1 -0
- package/lib/tools/get_api_reference/index.d.ts +3 -0
- package/lib/tools/get_api_reference/index.js +38 -0
- package/lib/tools/get_api_reference/index.js.map +1 -0
- package/lib/tools/get_api_reference/lib/ApiReferenceProvider.d.ts +85 -0
- package/lib/tools/get_api_reference/lib/ApiReferenceProvider.js +452 -0
- package/lib/tools/get_api_reference/lib/ApiReferenceProvider.js.map +1 -0
- package/lib/tools/get_api_reference/lib/apiReferenceResources.d.ts +18 -0
- package/lib/tools/get_api_reference/lib/apiReferenceResources.js +138 -0
- package/lib/tools/get_api_reference/lib/apiReferenceResources.js.map +1 -0
- package/lib/tools/get_api_reference/lib/formatSymbol.d.ts +24 -0
- package/lib/tools/get_api_reference/lib/formatSymbol.js +109 -0
- package/lib/tools/get_api_reference/lib/formatSymbol.js.map +1 -0
- package/lib/tools/get_api_reference/schema.d.ts +16 -0
- package/lib/tools/get_api_reference/schema.js +12 -0
- package/lib/tools/get_api_reference/schema.js.map +1 -0
- package/lib/tools/get_guidelines/guidelines.d.ts +1 -0
- package/lib/tools/get_guidelines/guidelines.js +6 -0
- package/lib/tools/get_guidelines/guidelines.js.map +1 -0
- package/lib/tools/get_guidelines/index.d.ts +3 -0
- package/lib/tools/get_guidelines/index.js +30 -0
- package/lib/tools/get_guidelines/index.js.map +1 -0
- package/lib/tools/get_project_info/getProjectInfo.d.ts +2 -0
- package/lib/tools/get_project_info/getProjectInfo.js +205 -0
- package/lib/tools/get_project_info/getProjectInfo.js.map +1 -0
- package/lib/tools/get_project_info/index.d.ts +3 -0
- package/lib/tools/get_project_info/index.js +28 -0
- package/lib/tools/get_project_info/index.js.map +1 -0
- package/lib/tools/get_project_info/schema.d.ts +87 -0
- package/lib/tools/get_project_info/schema.js +28 -0
- package/lib/tools/get_project_info/schema.js.map +1 -0
- package/lib/tools/get_version_info/getVersionInfo.d.ts +8 -0
- package/lib/tools/get_version_info/getVersionInfo.js +41 -0
- package/lib/tools/get_version_info/getVersionInfo.js.map +1 -0
- package/lib/tools/get_version_info/index.d.ts +9 -0
- package/lib/tools/get_version_info/index.js +33 -0
- package/lib/tools/get_version_info/index.js.map +1 -0
- package/lib/tools/get_version_info/schema.d.ts +66 -0
- package/lib/tools/get_version_info/schema.js +16 -0
- package/lib/tools/get_version_info/schema.js.map +1 -0
- package/lib/tools/get_version_info/types.d.ts +5 -0
- package/lib/tools/get_version_info/types.js +2 -0
- package/lib/tools/get_version_info/types.js.map +1 -0
- package/lib/tools/run_ui5_linter/index.d.ts +3 -0
- package/lib/tools/run_ui5_linter/index.js +86 -0
- package/lib/tools/run_ui5_linter/index.js.map +1 -0
- package/lib/tools/run_ui5_linter/migrationGuides.d.ts +6 -0
- package/lib/tools/run_ui5_linter/migrationGuides.js +88 -0
- package/lib/tools/run_ui5_linter/migrationGuides.js.map +1 -0
- package/lib/tools/run_ui5_linter/resultContext.d.ts +3 -0
- package/lib/tools/run_ui5_linter/resultContext.js +236 -0
- package/lib/tools/run_ui5_linter/resultContext.js.map +1 -0
- package/lib/tools/run_ui5_linter/runUi5Linter.d.ts +2 -0
- package/lib/tools/run_ui5_linter/runUi5Linter.js +72 -0
- package/lib/tools/run_ui5_linter/runUi5Linter.js.map +1 -0
- package/lib/tools/run_ui5_linter/schema.d.ts +340 -0
- package/lib/tools/run_ui5_linter/schema.js +55 -0
- package/lib/tools/run_ui5_linter/schema.js.map +1 -0
- package/lib/utils/cdnHelper.d.ts +9 -0
- package/lib/utils/cdnHelper.js +50 -0
- package/lib/utils/cdnHelper.js.map +1 -0
- package/lib/utils/dataStorageHelper.d.ts +2 -0
- package/lib/utils/dataStorageHelper.js +65 -0
- package/lib/utils/dataStorageHelper.js.map +1 -0
- package/lib/utils/ui5Framework.d.ts +4 -0
- package/lib/utils/ui5Framework.js +6 -0
- package/lib/utils/ui5Framework.js.map +1 -0
- package/lib/utils.d.ts +10 -0
- package/lib/utils.js +87 -0
- package/lib/utils.js.map +1 -0
- package/npm-shrinkwrap.json +7880 -0
- package/package.json +121 -0
- package/resources/docs/1.136.7/00737d6c1b864dc3ab72ef56611491c4.md +155 -0
- package/resources/docs/1.136.7/0187ea5e2eff4166b0453b9dcc8fc64f.md +164 -0
- package/resources/docs/1.136.7/032be2cb2e1d4115af20862673bedcdb.md +12 -0
- package/resources/docs/1.136.7/28fcd55b04654977b63dacbee0552712.md +317 -0
- package/resources/docs/1.136.7/676b636446c94eada183b1218a824717.md +135 -0
- package/resources/docs/1.136.7/a87ca843bcee469f82a9072927a7dcdb.md +355 -0
- package/resources/docs/1.136.7/b0fb4de7364f4bcbb053a99aa645affe.md +126 -0
- package/resources/docs/1.136.7/fe1a6dba940e479fb7c3bc753f92b28c.md +670 -0
- package/resources/docs/1.136.7/index.json +58 -0
- package/resources/guidelines.md +104 -0
- package/resources/migrationGuides/deprecated-controller-factory.md +116 -0
- package/resources/migrationGuides/deprecated-getLibraryResourceBundle.md +62 -0
- package/resources/migrationGuides/deprecated-jquery-sap-require.md +141 -0
- package/resources/migrationGuides/deprecated-messagePage.md +162 -0
- package/resources/migrationGuides/deprecated-table-table-property.md +154 -0
- package/resources/template-js/LICENSE +201 -0
- package/resources/template-js/README.md +87 -0
- package/resources/template-js/_.editorconfig +22 -0
- package/resources/template-js/_.gitignore +17 -0
- package/resources/template-js/eslint.config.js +68 -0
- package/resources/template-js/karma-ci-cov.conf.js +20 -0
- package/resources/template-js/karma-ci.conf.js +9 -0
- package/resources/template-js/karma.conf.js +9 -0
- package/resources/template-js/package.json +34 -0
- package/resources/template-js/ui5-dist.yaml +18 -0
- package/resources/template-js/ui5.yaml +24 -0
- package/resources/template-js/webapp/Component.js +41 -0
- package/resources/template-js/webapp/controller/App.controller.js +10 -0
- package/resources/template-js/webapp/controller/BaseController.js +67 -0
- package/resources/template-js/webapp/controller/Main.controller.js +14 -0
- package/resources/template-js/webapp/i18n/i18n.properties +3 -0
- package/resources/template-js/webapp/i18n/i18n_en.properties +3 -0
- package/resources/template-js/webapp/index-cdn.html +34 -0
- package/resources/template-js/webapp/index.html +34 -0
- package/resources/template-js/webapp/manifest.json +103 -0
- package/resources/template-js/webapp/model/formatter.js +9 -0
- package/resources/template-js/webapp/model/models.js +11 -0
- package/resources/template-js/webapp/test/Test.qunit.html +16 -0
- package/resources/template-js/webapp/test/integration/HelloJourney.js +85 -0
- package/resources/template-js/webapp/test/integration/opaTests.qunit.js +1 -0
- package/resources/template-js/webapp/test/integration/pages/Main.js +112 -0
- package/resources/template-js/webapp/test/testsuite.qunit.html +18 -0
- package/resources/template-js/webapp/test/testsuite.qunit.js +37 -0
- package/resources/template-js/webapp/test/unit/controller/Main.qunit.js +11 -0
- package/resources/template-js/webapp/test/unit/unitTests.qunit.js +1 -0
- package/resources/template-js/webapp/test-lt1_124/integration/HelloJourney.js +85 -0
- package/resources/template-js/webapp/test-lt1_124/integration/opaTests.qunit.html +31 -0
- package/resources/template-js/webapp/test-lt1_124/integration/opaTests.qunit.js +11 -0
- package/resources/template-js/webapp/test-lt1_124/integration/pages/Main.js +112 -0
- package/resources/template-js/webapp/test-lt1_124/testsuite.qunit.html +13 -0
- package/resources/template-js/webapp/test-lt1_124/testsuite.qunit.js +9 -0
- package/resources/template-js/webapp/test-lt1_124/unit/controller/Main.qunit.js +11 -0
- package/resources/template-js/webapp/test-lt1_124/unit/unitTests.qunit.html +30 -0
- package/resources/template-js/webapp/test-lt1_124/unit/unitTests.qunit.js +12 -0
- package/resources/template-js/webapp/view/App.view.xml +9 -0
- package/resources/template-js/webapp/view/Main.view.xml +90 -0
- package/resources/template-ts/LICENSE +201 -0
- package/resources/template-ts/README.md +101 -0
- package/resources/template-ts/_.editorconfig +23 -0
- package/resources/template-ts/_.gitignore +18 -0
- package/resources/template-ts/_.nycrc.json +7 -0
- package/resources/template-ts/_tsconfig.json +21 -0
- package/resources/template-ts/eslint.config.mjs +27 -0
- package/resources/template-ts/package.json +40 -0
- package/resources/template-ts/ui5-coverage.yaml +40 -0
- package/resources/template-ts/ui5-dist.yaml +18 -0
- package/resources/template-ts/ui5.yaml +27 -0
- package/resources/template-ts/webapp/Component.ts +49 -0
- package/resources/template-ts/webapp/controller/App.controller.ts +11 -0
- package/resources/template-ts/webapp/controller/BaseController.ts +83 -0
- package/resources/template-ts/webapp/controller/Main.controller.ts +19 -0
- package/resources/template-ts/webapp/i18n/i18n.properties +3 -0
- package/resources/template-ts/webapp/i18n/i18n_en.properties +3 -0
- package/resources/template-ts/webapp/index-cdn.html +35 -0
- package/resources/template-ts/webapp/index.html +35 -0
- package/resources/template-ts/webapp/manifest.json +105 -0
- package/resources/template-ts/webapp/model/formatter.ts +5 -0
- package/resources/template-ts/webapp/model/models.ts +15 -0
- package/resources/template-ts/webapp/test/Test.qunit.html +16 -0
- package/resources/template-ts/webapp/test/integration/HelloJourney.ts +84 -0
- package/resources/template-ts/webapp/test/integration/opaTests.qunit.ts +2 -0
- package/resources/template-ts/webapp/test/integration/pages/MainPage.ts +112 -0
- package/resources/template-ts/webapp/test/testsuite.qunit.html +18 -0
- package/resources/template-ts/webapp/test/testsuite.qunit.ts +33 -0
- package/resources/template-ts/webapp/test/unit/controller/Main.qunit.ts +8 -0
- package/resources/template-ts/webapp/test/unit/unitTests.qunit.ts +2 -0
- package/resources/template-ts/webapp/test-lt1_124/integration/HelloJourney.ts +86 -0
- package/resources/template-ts/webapp/test-lt1_124/integration/opaTests.qunit.html +34 -0
- package/resources/template-ts/webapp/test-lt1_124/integration/opaTests.qunit.ts +8 -0
- package/resources/template-ts/webapp/test-lt1_124/integration/pages/MainPage.ts +112 -0
- package/resources/template-ts/webapp/test-lt1_124/testsuite.qunit.html +13 -0
- package/resources/template-ts/webapp/test-lt1_124/testsuite.qunit.ts +9 -0
- package/resources/template-ts/webapp/test-lt1_124/unit/controller/Main.qunit.ts +8 -0
- package/resources/template-ts/webapp/test-lt1_124/unit/unitTests.qunit.html +37 -0
- package/resources/template-ts/webapp/test-lt1_124/unit/unitTests.qunit.ts +8 -0
- package/resources/template-ts/webapp/view/App.view.xml +9 -0
- package/resources/template-ts/webapp/view/Main.view.xml +90 -0
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"shortIdentifier": "0187ea5",
|
|
4
|
+
"identifier": "0187ea5e2eff4166b0453b9dcc8fc64f",
|
|
5
|
+
"uri": "https://ui5.sap.com/1.136.7/topic/0187ea5e2eff4166b0453b9dcc8fc64f",
|
|
6
|
+
"title": "Component Metadata",
|
|
7
|
+
"filePath": "0187ea5e2eff4166b0453b9dcc8fc64f.md"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"shortIdentifier": "00737d6",
|
|
11
|
+
"identifier": "00737d6c1b864dc3ab72ef56611491c4",
|
|
12
|
+
"uri": "https://ui5.sap.com/1.136.7/topic/00737d6c1b864dc3ab72ef56611491c4",
|
|
13
|
+
"title": "Best Practices for Loading Modules",
|
|
14
|
+
"filePath": "00737d6c1b864dc3ab72ef56611491c4.md"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"shortIdentifier": "28fcd55",
|
|
18
|
+
"identifier": "28fcd55b04654977b63dacbee0552712",
|
|
19
|
+
"uri": "https://ui5.sap.com/1.136.7/topic/28fcd55b04654977b63dacbee0552712",
|
|
20
|
+
"title": "Best Practices for Developers",
|
|
21
|
+
"filePath": "28fcd55b04654977b63dacbee0552712.md"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"shortIdentifier": "a87ca84",
|
|
25
|
+
"identifier": "a87ca843bcee469f82a9072927a7dcdb",
|
|
26
|
+
"uri": "https://ui5.sap.com/1.136.7/topic/a87ca843bcee469f82a9072927a7dcdb",
|
|
27
|
+
"title": "Deprecated Themes and Libraries",
|
|
28
|
+
"filePath": "a87ca843bcee469f82a9072927a7dcdb.md"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"shortIdentifier": "676b636",
|
|
32
|
+
"identifier": "676b636446c94eada183b1218a824717",
|
|
33
|
+
"uri": "https://ui5.sap.com/1.136.7/topic/676b636446c94eada183b1218a824717",
|
|
34
|
+
"title": "Use Asynchronous Loading",
|
|
35
|
+
"filePath": "676b636446c94eada183b1218a824717.md"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"shortIdentifier": "fe1a6db",
|
|
39
|
+
"identifier": "fe1a6dba940e479fb7c3bc753f92b28c",
|
|
40
|
+
"uri": "https://ui5.sap.com/1.136.7/topic/fe1a6dba940e479fb7c3bc753f92b28c",
|
|
41
|
+
"title": "Content Security Policy",
|
|
42
|
+
"filePath": "fe1a6dba940e479fb7c3bc753f92b28c.md"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"shortIdentifier": "b0fb4de",
|
|
46
|
+
"identifier": "b0fb4de7364f4bcbb053a99aa645affe",
|
|
47
|
+
"uri": "https://ui5.sap.com/1.136.7/topic/b0fb4de7364f4bcbb053a99aa645affe",
|
|
48
|
+
"title": "Handling Events in XML Views",
|
|
49
|
+
"filePath": "b0fb4de7364f4bcbb053a99aa645affe.md"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"shortIdentifier": "032be2c",
|
|
53
|
+
"identifier": "032be2cb2e1d4115af20862673bedcdb",
|
|
54
|
+
"uri": "https://ui5.sap.com/1.136.7/topic/032be2cb2e1d4115af20862673bedcdb",
|
|
55
|
+
"title": "Test Starter",
|
|
56
|
+
"filePath": "032be2cb2e1d4115af20862673bedcdb.md"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# UI5 Development Guidelines
|
|
2
|
+
|
|
3
|
+
> *This document outlines the fundamental rules and best practices an AI agent must follow when developing or modifying SAPUI5 projects. Adherence to these guidelines is critical for creating modern, maintainable, and performant applications.*
|
|
4
|
+
|
|
5
|
+
## 1. Coding Guidelines
|
|
6
|
+
|
|
7
|
+
- **NEVER** use global variables to access UI5 framework objects (e.g., `sap.m.Button`). Instead, explicitly declare all dependencies, so that they are loaded asynchronously before your code executes.
|
|
8
|
+
- in JavaScript: Using `sap.ui.define` at the top of the file (which also registers the file as a UI5 module) or dynamically using `sap.ui.require`
|
|
9
|
+
- in TypeScript: Using ES6 `import` statements
|
|
10
|
+
- in XML:
|
|
11
|
+
- For controls it is sufficient to declare the corresponding XML tag (e.g. `<m:Button></m:Button>`). The XML Template engine will load the corresponding resource automatically.
|
|
12
|
+
- However, when referring to programmatic API like formatters or types, those must be "imported" using a `core:require` directive
|
|
13
|
+
- Example
|
|
14
|
+
```xml
|
|
15
|
+
<ObjectListItem
|
|
16
|
+
core:require="{
|
|
17
|
+
Currency: 'sap/ui/model/type/Currency'
|
|
18
|
+
}"
|
|
19
|
+
title="{invoice>Quantity} x {invoice>ProductName}"
|
|
20
|
+
number="{
|
|
21
|
+
parts: [
|
|
22
|
+
'invoice>ExtendedPrice',
|
|
23
|
+
'view>/currency'
|
|
24
|
+
],
|
|
25
|
+
type: 'Currency',
|
|
26
|
+
formatOptions: {
|
|
27
|
+
showMeasure: false
|
|
28
|
+
}
|
|
29
|
+
}"
|
|
30
|
+
numberUnit="{view>/currency}"/>
|
|
31
|
+
```
|
|
32
|
+
- Find more information on the UI5 documentation page "Require Modules in XML View and Fragment"
|
|
33
|
+
- **ALWAYS** use the `sap/ui/core/ComponentSupport` module to initialize a UI5 application/component in an HTML page
|
|
34
|
+
- Example:
|
|
35
|
+
```html
|
|
36
|
+
<!-- index.html -->
|
|
37
|
+
<script id="sap-ui-bootstrap"
|
|
38
|
+
src="resources/sap-ui-core.js"
|
|
39
|
+
data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
|
|
40
|
+
data-sap-ui-async="true"
|
|
41
|
+
data-sap-ui-resource-roots='{ "my.app": "./" }'
|
|
42
|
+
data-...="...">
|
|
43
|
+
</script>
|
|
44
|
+
```
|
|
45
|
+
- Find more information on the UI5 documentation page "Declarative API for Initial Components"
|
|
46
|
+
- **ALWAYS** use data binding in views to connect UI controls to data or i18n models.
|
|
47
|
+
- When binding data from OData services, **NEVER** use custom formatters for standard data types (e.g., dates, numbers, currencies). The built-in types handle these cases automatically.
|
|
48
|
+
- When making changes to `*.properties` files, **ALWAYS** apply the changes to all relevant locales. This ensures consistency across different language versions of the application.
|
|
49
|
+
- **Example:** If you add a new key to `i18n.properties`, also add it to existing translation files like e.g `i18n_en.properties`, `i18n_de.properties`, etc.
|
|
50
|
+
- **NEVER** use inline script in HTML
|
|
51
|
+
- All application logic must reside in dedicated JS or TS files. Inline `<script>` would violate the recommended CSP settings for UI5 applications.
|
|
52
|
+
- Find more information on the UI5 documentation page "Content Security Policy"
|
|
53
|
+
|
|
54
|
+
### TypeScript: Special Handling for Control Event Handlers
|
|
55
|
+
|
|
56
|
+
- **Rule:** For any control event handler, import and use the specific event type from the control's module. The type is typically named `<ControlName>$<EventName>Event`. Notice the "Event" suffix.
|
|
57
|
+
- **Example:** For the `press` event of `sap.m.Button`, use `import {Button$PressEvent} from "sap/m/Button"`.
|
|
58
|
+
- The event handler then may look like this: `onPress(event: Button$PressEvent): void { [...]`.
|
|
59
|
+
- **Benefit:** This provides static type checking and autocompletion for event parameters (e.g., `event.getParameter(...)`) without needing manual casting or comments.
|
|
60
|
+
- **Version Compatibility:**
|
|
61
|
+
- **UI5 >= 1.115.0:** This feature is available and **MUST** be used.
|
|
62
|
+
- **UI5 < 1.115.0:** These specific types are **NOT** available. Use the generic `import Event from "sap/ui/base/Event"` as the fallback type.
|
|
63
|
+
|
|
64
|
+
**Example (UI5 >= 1.115.0):**
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
// Import the specific event type from the control's module
|
|
68
|
+
import { Table$RowSelectionChangeEvent } from "sap/ui/table/Table";
|
|
69
|
+
import Table from "sap/ui/table/Table";
|
|
70
|
+
|
|
71
|
+
// ... inside a controller class
|
|
72
|
+
public onRowSelectionChange(event: Table$RowSelectionChangeEvent): void {
|
|
73
|
+
// Correctly typed: getParameter is known and its return value can be inferred
|
|
74
|
+
const selectedContext = event.getParameter("rowContext");
|
|
75
|
+
// ...
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## 2. Tooling and Environment Interaction
|
|
80
|
+
|
|
81
|
+
An AI agent must understand how to use and interpret the standard UI5 development tools, primarily through the available MCP tools.
|
|
82
|
+
|
|
83
|
+
- **API Lookup:** To get information on UI5 controls and APIs, **ALWAYS** use the `get_api_reference` tool. This provides direct access to the official UI5 API Reference. Provide it with a path to the current project and it will provide the correct API reference for the UI5 version in use.
|
|
84
|
+
- **Code Validation:** To identify issues, **ALWAYS** use the `run_ui5_linter` tool. It detects deprecated APIs, accessibility issues, and other potential bugs.
|
|
85
|
+
- **Code Fixes:** To apply fixes suggested by the linter, always confirm with the user first. Then use the `fix` parameter of the `run_ui5_linter` tool. This will automatically correct _some_ of the identified issues. The tool can also provide context information that can be used to manually fix the remaining issues when tasked to do so.
|
|
86
|
+
- **Local Server Behavior:** When interacting with the UI5 CLI's development server, understand that it does **NOT** serve a default index file. You **MUST ALWAYS** reference files by their full path when using the browser (e.g., `http://localhost:8080/index.html`, not `http://localhost:8080/`).
|
|
87
|
+
|
|
88
|
+
## 3. CAP (Cloud Application Programming Model) Integration
|
|
89
|
+
|
|
90
|
+
When creating a new UI5 project within a CAP project, a specific set of rules apply to ensure seamless integration.
|
|
91
|
+
|
|
92
|
+
- **Project Location:** **ALWAYS** create UI5 projects within the `app/` directory of the CAP project root.
|
|
93
|
+
- **Service Information:**
|
|
94
|
+
- If CDS tools are available to you, **ALWAYS** use them to get information about the definitions, services and their endpoints.
|
|
95
|
+
- If no CDS tools are available to you, **ALWAYS** run `cds compile '*'` to get information about the definitions and `cds compile '*' --to serviceinfo` to get information about the services and their endpoints.
|
|
96
|
+
- **Service Integration:** When creating the UI5 project, **ALWAYS** provide the absolute OData V4 service URL and the target entity set when prompted by the tooling.
|
|
97
|
+
- **Plugin Installation:** **ALWAYS** run `npm i -D cds-plugin-ui5` in the CAP project root directory to ensure the latest version of `cds-plugin-ui5` is installed. This plugin automatically handles serving the UI5 applications.
|
|
98
|
+
- **Running the Server:**
|
|
99
|
+
- **NEVER** run a separate `ui5 serve` or `npm start` command inside the UI5 project folder.
|
|
100
|
+
- **ALWAYS** run `cds watch` (or `cds run`) from the **root** of the CAP project. This single command serves both the backend services and all UI5 applications.
|
|
101
|
+
- **Data Connection:**
|
|
102
|
+
- **NEVER** configure a `ui5-middleware-simpleproxy` in the `ui5.yaml` file to connect to the local CAP service.
|
|
103
|
+
- **Why:** The `cds watch` command ensures the UI and the service are served from the same origin (`http://localhost:4004`), making a proxy unnecessary.
|
|
104
|
+
- **Accessing the App:** Check the CAP launch page (typically `http://localhost:4004`) for a list of available services and links to the UI5 applications.
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
# Guide for Migrating the Deprecated `sap.ui.controller` Function
|
|
2
|
+
|
|
3
|
+
> *This guide provides instructions for AI-based development tools to perform a critical API migration in SAPUI5 projects. The focus is on replacing the deprecated `sap.ui.controller` with modern, asynchronous-friendly equivalents.*
|
|
4
|
+
|
|
5
|
+
## 1. Core Concepts of the Migration
|
|
6
|
+
|
|
7
|
+
The global function `sap.ui.controller` was used for two distinct purposes: defining a controller class and synchronously instantiating a controller. Both use cases are now deprecated and must be replaced to align with modern UI5 development standards, which emphasize Asynchronous Module Definition (AMD) for improved performance and modularity.
|
|
8
|
+
|
|
9
|
+
The migration path involves these primary steps:
|
|
10
|
+
|
|
11
|
+
1. **Adopt `sap.ui.define`:** All controller definitions must be wrapped in a `sap.ui.define` block. This ensures that dependencies, like the base controller, are loaded asynchronously before the controller module is executed.
|
|
12
|
+
2. **Import `sap/ui/core/mvc/Controller`:** The modern base class for all controllers must be explicitly imported.
|
|
13
|
+
3. **Choose the Correct Replacement:**
|
|
14
|
+
* To **define a controller class**, use `Controller.extend()`. This is the most common use case and is typically found in `.controller.js` files.
|
|
15
|
+
* To **create an instance of a controller** programmatically (a less common scenario), use the factory function `Controller.create()`. This function returns a `Promise`.
|
|
16
|
+
|
|
17
|
+
## 2. Migration Scenarios
|
|
18
|
+
|
|
19
|
+
### Scenario A: Defining a Controller Class (Most Common)
|
|
20
|
+
|
|
21
|
+
This scenario applies to the standard definition of a view's controller. The goal is to convert the old `sap.ui.controller()` definition into a modern AMD-style module that returns a controller class.
|
|
22
|
+
|
|
23
|
+
**Key Characteristics of "Before" Code:**
|
|
24
|
+
|
|
25
|
+
* Uses `sap.ui.controller('my.name.space.ControllerName', { ... });`
|
|
26
|
+
* The code is often in the global scope, not inside a `sap.ui.define`.
|
|
27
|
+
* Contains lifecycle methods like `onInit`, `onAfterRendering`, etc.
|
|
28
|
+
|
|
29
|
+
#### Migration Steps
|
|
30
|
+
|
|
31
|
+
1. Wrap the entire code in a `sap.ui.define` call.
|
|
32
|
+
2. Add `"sap/ui/core/mvc/Controller"` to the dependency array.
|
|
33
|
+
3. Pass a corresponding argument (e.g., `Controller`) to the factory function.
|
|
34
|
+
4. Replace `sap.ui.controller(...)` with `return Controller.extend(...)`.
|
|
35
|
+
5. It's a best practice to add `"use strict";` as the first statement inside the factory function. This should only be done if this practice is done in other controller files in the project.
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
#### Example: Controller Class Migration
|
|
39
|
+
|
|
40
|
+
**Before:**
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
sap.ui.controller('myApp.controller.Main', {
|
|
44
|
+
onInit: function () {
|
|
45
|
+
// Initialization code
|
|
46
|
+
},
|
|
47
|
+
onPress: function () {
|
|
48
|
+
// Button press handler
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
**After:**
|
|
54
|
+
|
|
55
|
+
```js
|
|
56
|
+
sap.ui.define([
|
|
57
|
+
"sap/ui/core/mvc/Controller"
|
|
58
|
+
], (Controller) => {
|
|
59
|
+
"use strict";
|
|
60
|
+
|
|
61
|
+
return Controller.extend("myApp.controller.Main", {
|
|
62
|
+
onInit() {
|
|
63
|
+
// Initialization code
|
|
64
|
+
},
|
|
65
|
+
onPress() {
|
|
66
|
+
// Button press handler
|
|
67
|
+
},
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Scenario B: Instantiating a Controller Programmatically
|
|
73
|
+
|
|
74
|
+
This is a rarer use case where a controller instance is created manually in application logic, often for use without a corresponding view (e.g., a "headless" controller for managing application-wide logic).
|
|
75
|
+
|
|
76
|
+
**Key Characteristics of "Before" Code:**
|
|
77
|
+
|
|
78
|
+
* Uses `var oController = sap.ui.controller('my.name.space.ControllerName');`
|
|
79
|
+
* The call is intended to immediately return a controller object.
|
|
80
|
+
|
|
81
|
+
#### Migration Steps
|
|
82
|
+
|
|
83
|
+
1. The modern replacement `Controller.create()` is **asynchronous** and returns a `Promise`. This is a critical change from the old synchronous API.
|
|
84
|
+
2. Any code that relies on the controller instance must be placed within an `async` function and use the `await` keyword, or use the `.then()` Promise chain.
|
|
85
|
+
3. The `Controller.create()` factory takes an object with a `name` property for the controller to be instantiated.
|
|
86
|
+
|
|
87
|
+
#### Example: Controller Instance Migration
|
|
88
|
+
|
|
89
|
+
**Before:**
|
|
90
|
+
|
|
91
|
+
```js
|
|
92
|
+
function createController() {
|
|
93
|
+
return sap.ui.controller('myApp.controller.Main');
|
|
94
|
+
}
|
|
95
|
+
const oController = createController();
|
|
96
|
+
...
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
**After (using `async/await`):**
|
|
100
|
+
|
|
101
|
+
The calling code must be adapted to handle the asynchronous operation.
|
|
102
|
+
|
|
103
|
+
```js
|
|
104
|
+
async function createController() {
|
|
105
|
+
return await Controller.create({name: "myApp.controller.Main"});
|
|
106
|
+
}
|
|
107
|
+
const oController = await createController();
|
|
108
|
+
...
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### Important Considerations for the Agent
|
|
112
|
+
|
|
113
|
+
* **Do not confuse `extend` and `create`**. `extend` is for defining a controller class blueprint. `create` is for manufacturing an object from that blueprint. The vast majority of migrations will involve `Controller.extend`.
|
|
114
|
+
* **Respect Asynchronicity:** When encountering `Controller.create`, the agent must recognize the shift from synchronous to asynchronous programming. Simply replacing the call is not enough; the surrounding logic must be adapted to wait for the `Promise` to resolve. This might involve converting the enclosing function to an `async` function.
|
|
115
|
+
* **Base Controllers:** If a controller is already using `sap.ui.define` but extending a custom base controller, ensure the path to the base controller is correct in the dependency array and that the base controller itself is properly defined using `Controller.extend`.
|
|
116
|
+
* For more information, search the UI5 documentation for the topic "Controller".
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# Guide for Migrating `Core.getLibraryResourceBundle` to `Lib.getResourceBundleFor`
|
|
2
|
+
|
|
3
|
+
> *This guide provides instructions for AI-based development tools to perform a critical API migration in SAPUI5 projects. The focus is on replacing the deprecated call `sap.ui.getCore().getLibraryResourceBundle` with the modern API `Lib.getResourceBundleFor`.*
|
|
4
|
+
|
|
5
|
+
## 1. Core Concepts of the Migration
|
|
6
|
+
|
|
7
|
+
The legacy method `sap.ui.getCore().getLibraryResourceBundle` provided access to a library's resource bundle. This API is deprecated in favor of a new API located in the `sap/ui/core/Lib` module.
|
|
8
|
+
|
|
9
|
+
The migration involves three key changes:
|
|
10
|
+
|
|
11
|
+
1. **Switching Modules:** Instead of accessing the global `Core` object, the dedicated `sap/ui/core/Lib` module must be imported.
|
|
12
|
+
2. **Use the new API**: Replace any call of `sap.ui.getCore().getLibraryResourceBundle` with `Lib.getResourceBundleFor`.
|
|
13
|
+
3. **Mandatory Library Name:** The new API requires a library name. The old API would default to `"sap.ui.core"` if no argument was provided. This case must be handled explicitly during migration.
|
|
14
|
+
|
|
15
|
+
## 2. Migration Steps
|
|
16
|
+
|
|
17
|
+
To replace the module, follow these steps:
|
|
18
|
+
|
|
19
|
+
1. Import module `sap/ui/core/Lib` in the corresponding `sap.ui.define` dependency array.
|
|
20
|
+
2. Replace `sap.ui.getCore().getLibraryResourceBundle` with `Lib.getResourceBundleFor`.
|
|
21
|
+
* **Explicitly Handle the Default Case:** If you encounter `getLibraryResourceBundle()` with no arguments, you **must** replace it with `Lib.getResourceBundleFor("sap.ui.core")`. Do not assume a default.
|
|
22
|
+
* **Validate the Library Name:** The provided name must refer to a standard UI5 library that includes a `manifest.json` file. The API does not support resolving resource bundles for sub-components of libraries or arbitrary module paths.
|
|
23
|
+
* Both APIs are synchronous, so no asynchronous handling needs to be added.
|
|
24
|
+
|
|
25
|
+
#### Example: Library Name is Provided
|
|
26
|
+
|
|
27
|
+
**Before:**
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
sap.ui.define([
|
|
31
|
+
"sap/ui/core/mvc/Controller"
|
|
32
|
+
], (Controller) => {
|
|
33
|
+
"use strict";
|
|
34
|
+
|
|
35
|
+
return Controller.extend("myApp.controller.Main", {
|
|
36
|
+
onSomeAction() {
|
|
37
|
+
var oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");
|
|
38
|
+
var sText = oResourceBundle.getText("myI18nKey");
|
|
39
|
+
// ...
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
**After:**
|
|
46
|
+
|
|
47
|
+
```js
|
|
48
|
+
sap.ui.define([
|
|
49
|
+
"sap/ui/core/mvc/Controller",
|
|
50
|
+
"sap/ui/core/Lib" // <-- Add new dependency
|
|
51
|
+
], (Controller, Lib) => { // <-- Add Lib to function arguments
|
|
52
|
+
"use strict";
|
|
53
|
+
|
|
54
|
+
return Controller.extend("myApp.controller.Main", {
|
|
55
|
+
onSomeAction() {
|
|
56
|
+
const oResourceBundle = Lib.getResourceBundleFor("sap.m");
|
|
57
|
+
const sText = oResourceBundle.getText("myI18nKey");
|
|
58
|
+
// ...
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
```
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
# Guide for Migrating `jQuery.sap.declare` and `jQuery.sap.require`
|
|
2
|
+
|
|
3
|
+
> *This guide provides instructions for AI-based development tools to migrate legacy SAPUI5 dependency management. The focus is on replacing the deprecated, synchronous functions `jQuery.sap.declare` and `jQuery.sap.require` with the modern, asynchronous `sap.ui.define` and `sap.ui.require` APIs. This migration is exclusively for JavaScript-based UI5 projects.*
|
|
4
|
+
|
|
5
|
+
## 1. Core Migration Principles
|
|
6
|
+
|
|
7
|
+
The legacy `jQuery.sap` namespace provided a synchronous way to declare modules and manage dependencies. This is now deprecated in favor of the standard Asynchronous Module Definition (AMD) syntax used by UI5, which improves performance and code modularity.
|
|
8
|
+
|
|
9
|
+
The migration follows these key principles:
|
|
10
|
+
|
|
11
|
+
1. **From `declare` to File-Based Modules:** `jQuery.sap.declare("my.module.name")` is obsolete. In modern UI5, the module's name is inferred from its path in the project structure. The `declare` statement should be removed entirely.
|
|
12
|
+
2. **From `require` to `define` Dependencies:** Dependencies, typically listed at the top of a file with `jQuery.sap.require(...)`, must be converted into an array of dependencies in a `sap.ui.define` call.
|
|
13
|
+
3. **Module Export:** The core object defined in the file (e.g., a controller, a helper class) must be the **return value** of the `sap.ui.define` factory function.
|
|
14
|
+
4. **Dependency Notation:** The module name notation must change from dot-separated (`"sap.m.Button"`) to path-separated (`"sap/m/Button"`).
|
|
15
|
+
5. **Dynamic Loading:** For dependencies required dynamically or conditionally (e.g. inside a function or if-clause), the global `jQuery.sap.require` is replaced by the asynchronous `sap.ui.require`.
|
|
16
|
+
|
|
17
|
+
For more information, search the UI5 documentation on the topic "Modules and Dependencies".
|
|
18
|
+
|
|
19
|
+
## 2. Pre-Migration Analysis: Rules for the Agent
|
|
20
|
+
|
|
21
|
+
Before modifying a file, the agent must perform these checks to prevent incorrect migrations:
|
|
22
|
+
|
|
23
|
+
* **Rule 1: Detect Existing `sap.ui.define`:**
|
|
24
|
+
* **Condition:** The file already contains a `sap.ui.define` wrapper.
|
|
25
|
+
* **Action:** Do **not** wrap the file again. Instead, find any remaining `jQuery.sap.require` calls within the file and merge their dependencies into the existing `sap.ui.define` array.
|
|
26
|
+
* **Rule 2: Identify a Single, Clear Module Export:**
|
|
27
|
+
* **Condition:** The file contains multiple `jQuery.sap.declare` calls, or defines multiple distinct classes/objects at the top level (e.g., multiple `.extend` calls), or has no clear object to `return`.
|
|
28
|
+
* **Action:** **Abort migration for this file.** These complex legacy files require manual review. A valid candidate for migration typically has one primary purpose, such as defining a single controller or helper class.
|
|
29
|
+
* **Rule 3: JavaScript Only:**
|
|
30
|
+
* **Condition:** The project or file is identified as TypeScript (`.ts`).
|
|
31
|
+
* **Action:** **Abort migration.** TypeScript uses standard ES module `import`/`export` syntax, and this migration logic does not apply.
|
|
32
|
+
|
|
33
|
+
## 3. Migration Scenarios
|
|
34
|
+
|
|
35
|
+
### Scenario A: Standard Module Definition (Most Common)
|
|
36
|
+
|
|
37
|
+
This scenario covers files that declare a single module and its static dependencies. The goal is to convert the entire file into a `sap.ui.define` block.
|
|
38
|
+
|
|
39
|
+
#### Example A.1: Legacy Module with `jQuery.sap.declare`
|
|
40
|
+
|
|
41
|
+
**Before:**
|
|
42
|
+
|
|
43
|
+
```js
|
|
44
|
+
jQuery.sap.declare("my.app.util.Formatter");
|
|
45
|
+
jQuery.sap.require("sap.ui.core.format.DateFormat");
|
|
46
|
+
|
|
47
|
+
my.app.util.Formatter = { // Note: This is an example of creating a global object
|
|
48
|
+
formatDate: function(oDate) {
|
|
49
|
+
var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance();
|
|
50
|
+
return oDateFormat.format(oDate);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
**After:**
|
|
56
|
+
|
|
57
|
+
The migration wraps the code, converts the dependency, and returns the Formatter object.
|
|
58
|
+
|
|
59
|
+
```js
|
|
60
|
+
sap.ui.define([
|
|
61
|
+
"sap/ui/core/format/DateFormat" // <-- Dependency converted to path notation
|
|
62
|
+
], (DateFormat) => { // <-- Dependency passed as argument
|
|
63
|
+
"use strict";
|
|
64
|
+
|
|
65
|
+
// The object is now returned instead of being assigned to a global variable
|
|
66
|
+
return {
|
|
67
|
+
formatDate(oDate) {
|
|
68
|
+
const oDateFormat = DateFormat.getDateTimeInstance();
|
|
69
|
+
return oDateFormat.format(oDate);
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
});
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
#### Example A.2: Legacy Controller Definition
|
|
76
|
+
|
|
77
|
+
**Before:**
|
|
78
|
+
|
|
79
|
+
```js
|
|
80
|
+
// Note: Some legacy files might omit jQuery.sap.declare
|
|
81
|
+
jQuery.sap.require("my.app.controller.BaseController");
|
|
82
|
+
|
|
83
|
+
my.app.controller.BaseController.extend("my.app.controller.Main", {
|
|
84
|
+
onInit: function() {
|
|
85
|
+
// [...]
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
**After:**
|
|
91
|
+
|
|
92
|
+
The migration identifies the base class from the `.extend` call as a dependency.
|
|
93
|
+
|
|
94
|
+
```js
|
|
95
|
+
sap.ui.define([
|
|
96
|
+
"my/app/controller/BaseController" // <-- Dependency from .extend()
|
|
97
|
+
], (BaseController) => {
|
|
98
|
+
"use strict";
|
|
99
|
+
|
|
100
|
+
// The result of the .extend() call is returned
|
|
101
|
+
return BaseController.extend("my.app.controller.Main", {
|
|
102
|
+
onInit() {
|
|
103
|
+
// [...]
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
});
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Scenario B: Dynamic Dependency Loading
|
|
110
|
+
|
|
111
|
+
This scenario applies when `jQuery.sap.require` is used inside a function to load a dependency on demand. This must be replaced with the asynchronous `sap.ui.require`.
|
|
112
|
+
|
|
113
|
+
**Before:**
|
|
114
|
+
|
|
115
|
+
```js
|
|
116
|
+
// In some controller method...
|
|
117
|
+
onOpenDialog() {
|
|
118
|
+
// Dependency is loaded synchronously just before it is needed
|
|
119
|
+
jQuery.sap.require("sap.m.MessageBox");
|
|
120
|
+
sap.m.MessageBox.show("This is a dynamically loaded message box!");
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**After:**
|
|
125
|
+
|
|
126
|
+
The consuming function must be adapted to handle the asynchronous loading by using a callback.
|
|
127
|
+
|
|
128
|
+
```js
|
|
129
|
+
onOpenDialog() {
|
|
130
|
+
// Use sap.ui.require with a callback
|
|
131
|
+
sap.ui.require(["sap/m/MessageBox"], (MessageBox) => {
|
|
132
|
+
MessageBox.show("This is a dynamically loaded message box!");
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## 4. Post-Migration Step: Re-run UI5 Linter
|
|
138
|
+
|
|
139
|
+
After the file is successfully wrapped in `sap.ui.define`, further detections as well as automated fixes may become possible.
|
|
140
|
+
|
|
141
|
+
**Action:** Execute the UI5 linter again, if requested before, with the auto-fix functionality enabled again. It can often resolve further issues now that a proper module definition is in place.
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
# Guide for Migrating the Deprecated `sap/m/MessagePage` Control
|
|
2
|
+
|
|
3
|
+
> *This guide provides instructions for AI-based development tools to migrate the deprecated `sap.m.MessagePage` to the modern and more flexible `sap.m.IllustratedMessage` control.*
|
|
4
|
+
|
|
5
|
+
## 1. Core Concept: From a Static Page to a Flexible Component
|
|
6
|
+
|
|
7
|
+
The `sap.m.MessagePage` was a monolithic control designed to display a full-screen message. It is deprecated in favor of `sap.m.IllustratedMessage`, which offers a more flexible and modern user experience.
|
|
8
|
+
|
|
9
|
+
The key differences are:
|
|
10
|
+
* **Illustrations over Icons:** `IllustratedMessage` uses rich SVG illustrations (`illustrationType`) instead of simple font icons (`icon`).
|
|
11
|
+
* **Structured Content:** Content is more structured. There is a dedicated slot for a description and an `additionalContent` aggregation for custom controls like buttons, which were previously handled by specific properties.
|
|
12
|
+
* **Flexibility:** `IllustratedMessage` is not a full "page" but a component that can be used more flexibly within various layouts.
|
|
13
|
+
|
|
14
|
+
## 2. Pre-Migration Analysis & Rules
|
|
15
|
+
|
|
16
|
+
Before modifying code, the agent must verify the migration's feasibility.
|
|
17
|
+
|
|
18
|
+
* **Rule 1: JavaScript Implementation Check**
|
|
19
|
+
* **Condition:** The `MessagePage` has complex custom logic associated with it in the controller that goes beyond simple property setting or event handling (e.g., dynamically replacing aggregations).
|
|
20
|
+
* **Action:** **Abort migration.** A complex implementation requires manual refactoring. This automated guide is intended for declaratively used or simply configured controls.
|
|
21
|
+
|
|
22
|
+
## 3. Property and Aggregation Mapping
|
|
23
|
+
|
|
24
|
+
This table provides the definitive mapping from `MessagePage` to `IllustratedMessage`. The agent must follow these rules precisely.
|
|
25
|
+
|
|
26
|
+
| Old `MessagePage` Property/Aggregation | New `IllustratedMessage` Property/Aggregation | Migration Rule / Action |
|
|
27
|
+
| :------------------------------------- | :-------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
28
|
+
| `title` | `title` | **Direct Mapping:** Transfer the value directly. |
|
|
29
|
+
| `text` & `description` | `description` | **Combine:** Concatenate the `text` and `description` properties, separated by a newline (`\n`). If only one is present, use it directly. Set the result to the new `description`. |
|
|
30
|
+
| `icon` | `illustrationType` | **Semantic Mapping & Fallback:** Map the `sap-icon://` to a `sap.m.IllustratedMessageType` enum value. Use a generic fallback if no clear semantic match is found. See **Section 4** for mapping strategy. |
|
|
31
|
+
| `titleLevel` | (Does not exist) | **Remove:** This property has no equivalent and must be removed. |
|
|
32
|
+
| `showNavButton` & `navButtonPress` | `additionalContent` aggregation | **Create Button:** If `showNavButton` is `true` OR `navButtonPress` is defined, create a `sap.m.Button` inside the `additionalContent` aggregation. Assign the `navButtonPress` handler to the button's `press` event. |
|
|
33
|
+
| `buttons` (aggregation) | `additionalContent` aggregation | **Move Content:** Move any controls from the `buttons` aggregation directly into the `additionalContent` aggregation. |
|
|
34
|
+
| `customText` (aggregation) | `additionalContent` aggregation | **Move Content:** Move any controls from the `customText` aggregation directly into the `additionalContent` aggregation. |
|
|
35
|
+
| `customDescription` (aggregation) | `additionalContent` aggregation | **Move Content:** Move any controls from the `customDescription` aggregation directly into the `additionalContent` aggregation. |
|
|
36
|
+
|
|
37
|
+
## 4. Icon-to-Illustration Mapping Strategy
|
|
38
|
+
|
|
39
|
+
The `icon` property (`sap-icon://...`) does not have a one-to-one mapping to `illustrationType`. The agent must use the following strategy:
|
|
40
|
+
|
|
41
|
+
1. **Attempt Semantic Match:** Look for an illustration that matches the icon's meaning.
|
|
42
|
+
2. **Use Fallback:** If no clear match is found, use a generic, context-appropriate illustration as a fallback.
|
|
43
|
+
|
|
44
|
+
Use the `sap.m.IllustratedMessageType` enum to access the available illustrations. **Note:** In XML views, the string value of the enum needs to be used, e.g., `"sapIllus-Achievement"`.
|
|
45
|
+
|
|
46
|
+
The following is a table of commonly used illustration types and their string value
|
|
47
|
+
|
|
48
|
+
| Enum | String Value |
|
|
49
|
+
| :--------------------- | :------------------------ |
|
|
50
|
+
| sap.m.IllustratedMessageType.NoData | `sapIllus-NoData` |
|
|
51
|
+
| sap.m.IllustratedMessageType.NoEntries | `sapIllus-NoEntries` |
|
|
52
|
+
| sap.m.IllustratedMessageType.PageNotFound | `sapIllus-PageNotFound` |
|
|
53
|
+
| sap.m.IllustratedMessageType.UnableToLoad | `sapIllus-UnableToLoad` |
|
|
54
|
+
| sap.m.IllustratedMessageType.NoSearchResults | `sapIllus-NoSearchResults` |
|
|
55
|
+
| sap.m.IllustratedMessageType.KeyTask (indicates the success of a task) | `sapIllus-KeyTask` |
|
|
56
|
+
|
|
57
|
+
Check the API reference of `sap.m.IllustratedMessageType` for the full list of available illustrations. Make sure not to use any that are marked as deprecated.
|
|
58
|
+
|
|
59
|
+
## 5. Migration Scenario: XML View
|
|
60
|
+
|
|
61
|
+
### Example
|
|
62
|
+
|
|
63
|
+
This comprehensive example demonstrates the combination of text and the creation of the navigation button.
|
|
64
|
+
|
|
65
|
+
**Before:**
|
|
66
|
+
|
|
67
|
+
```xml
|
|
68
|
+
<mvc:View
|
|
69
|
+
xmlns="sap.m"
|
|
70
|
+
xmlns:mvc="sap.ui.core.mvc">
|
|
71
|
+
<MessagePage
|
|
72
|
+
id="notFoundPage"
|
|
73
|
+
title="{i18n>notFoundTitle}"
|
|
74
|
+
text="{i18n>notFoundText}"
|
|
75
|
+
description="{i18n>notFoundDescription}"
|
|
76
|
+
icon="sap-icon://error"
|
|
77
|
+
showNavButton="true"
|
|
78
|
+
navButtonPress=".onNavBack" />
|
|
79
|
+
</mvc:View>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
**After:**
|
|
83
|
+
|
|
84
|
+
```xml
|
|
85
|
+
<mvc:View
|
|
86
|
+
xmlns="sap.m"
|
|
87
|
+
xmlns:mvc="sap.ui.core.mvc">
|
|
88
|
+
<IllustratedMessage
|
|
89
|
+
id="notFoundPage"
|
|
90
|
+
title="{i18n>notFoundTitle}"
|
|
91
|
+
description="{i18n>notFoundText} {i18n>notFoundDescription}"
|
|
92
|
+
illustrationType="sapIllus-NoData">
|
|
93
|
+
<!-- The navigation button is now explicitly created in additionalContent -->
|
|
94
|
+
<additionalContent>
|
|
95
|
+
<Button text="{i18n>backButtonText}" press=".onNavBack" />
|
|
96
|
+
</additionalContent>
|
|
97
|
+
</IllustratedMessage>
|
|
98
|
+
</mvc:View>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## 6. Migration Scenario: JavaScript Instantiation
|
|
102
|
+
|
|
103
|
+
### Example
|
|
104
|
+
|
|
105
|
+
**Before:**
|
|
106
|
+
|
|
107
|
+
```javascript
|
|
108
|
+
sap.ui.define([
|
|
109
|
+
"sap/m/MessagePage",
|
|
110
|
+
"sap/ui/core/mvc/Controller"
|
|
111
|
+
], (MessagePage, Controller) => {
|
|
112
|
+
"use strict";
|
|
113
|
+
return Controller.extend("my.app.Controller", {
|
|
114
|
+
createMyPage: function() {
|
|
115
|
+
const oPage = new MessagePage({
|
|
116
|
+
title: "An Error Occurred",
|
|
117
|
+
text: "The requested data could not be loaded.",
|
|
118
|
+
icon: "sap-icon://error",
|
|
119
|
+
showNavButton: true,
|
|
120
|
+
navButtonPress: this.onNavBack.bind(this)
|
|
121
|
+
});
|
|
122
|
+
return oPage;
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
});
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
**After:**
|
|
129
|
+
|
|
130
|
+
```javascript
|
|
131
|
+
sap.ui.define([
|
|
132
|
+
"sap/m/IllustratedMessage",
|
|
133
|
+
"sap/m/Button",
|
|
134
|
+
"sap/m/library",
|
|
135
|
+
"sap/ui/core/mvc/Controller"
|
|
136
|
+
], (IllustratedMessage, Button, mobileLibrary, Controller) => {
|
|
137
|
+
"use strict";
|
|
138
|
+
|
|
139
|
+
// For illustrationType enum
|
|
140
|
+
const { IllustratedMessageType } = mobileLibrary;
|
|
141
|
+
|
|
142
|
+
return Controller.extend("my.app.Controller", {
|
|
143
|
+
createMyPage: function() {
|
|
144
|
+
const oMessage = new IllustratedMessage({
|
|
145
|
+
title: "An Error Occurred",
|
|
146
|
+
description: "The requested data could not be loaded.", // text becomes description
|
|
147
|
+
illustrationType: IllustratedMessageType.UnableToLoad // Mapped from icon
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
// Button is created and added to aggregation
|
|
151
|
+
const oNavButton = new Button({
|
|
152
|
+
text: "Back", // Note: text must be provided
|
|
153
|
+
press: this.onNavBack.bind(this)
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
oMessage.addAdditionalContent(oNavButton);
|
|
157
|
+
|
|
158
|
+
return oMessage;
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
});
|
|
162
|
+
```
|