You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
-
##abap2UI5-docs
1
+
# abap2UI5-docs
2
2
3
3
Welcome! 👋
4
4
5
5
This repository contains the source files for the [abap2UI5 documentation](https://abap2ui5.github.io/docs/).
6
6
7
-
####Contributing
7
+
## Contributing
8
8
9
9
We appreciate your help! If you spot a typo, want to improve existing content, or have ideas for new topics, feel free to open a pull request or issue.
Copy file name to clipboardExpand all lines: docs/advanced/downporting.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,16 +3,16 @@ outline: [2, 4]
3
3
---
4
4
# Downporting
5
5
6
-
abap2UI5 works out of the box with ABAP version 750. If you're using a lower release, you can install the downported version, which is compatible with R/3 NetWeaver >702.
6
+
abap2UI5 works right away on ABAP 7.50 and later. On an earlier release, install the downported version, which supports R/3 NetWeaver 7.02 and later.
7
7
8
8
#### Branch
9
-
To install the project on an older system, use the `702` branch:
10
-
| Branch | System |
9
+
To install on an older system, use the `702` branch:
10
+
| Branch | System |
11
11
|-----------| ----------------------------|
12
-
| main | S/4 Public Cloud, BTP ABAP Environment, S/4 Private Cloud, S/4 On-Premise, R/3 NetWeaver >750|
13
-
| 702 | R/3 NetWeaver >702|
12
+
| main | S/4 Public Cloud, BTP ABAP Environment, S/4 Private Cloud, S/4 On-Premise, R/3 NetWeaver ≥7.50|
13
+
| 702 | R/3 NetWeaver ≥7.02|
14
14
15
-
Some sample projects and additional repositories also have a downported version. Simply check whether a `702` branch is available.
15
+
Some sample projects and other repositories also ship a downported version. Check whether a `702` branch is available.
16
16
17
17
#### Functionality
18
-
For more details on downport functionality, check out the blog post [Running abap2UI5 on older R/3 Releases](https://www.linkedin.com/pulse/running-abap2ui5-older-r3-releases-downport-compatibility-abaplint-mjkle).
18
+
For more on the downport feature, see the blog post [Running abap2UI5 on older R/3 Releases](https://www.linkedin.com/pulse/running-abap2ui5-older-r3-releases-downport-compatibility-abaplint-mjkle).
Write the JS code for your new custom control. Copy an existing control from [App.controller.js](https://github.com/abap2UI5/abap2UI5/blob/main/app/webapp/controller/App.controller.js) and adapt it.
14
13
15
-
#### Backend
16
-
Extend the custom control view class by adding an additional method and defining the properties of your custom control here:
14
+
#### Backend
15
+
Extend the custom control view class by adding a method and defining the new control's properties:
If the standard UI5 framework functionalities do not fulfill all your requirements, you can define and call your own custom JavaScript functions. For example, this approach is used in the scanner section to play a sound after scanning.
6
+
If the standard UI5 framework doesn't cover all your needs, define and call your own JavaScript functions. [Barcode Scanning](/development/specific/barcodes), for example, uses this approach to play a sound after a scan.
7
7
8
-
The idea is to send the custom JavaScript function along with the view to the frontend and invoke it later when an event is triggered.
8
+
The idea: send the JavaScript function with the view to the frontend, then call it later when an event fires.
9
9
10
-
Below is a working example that you can use as a starting point. The `_generic` method creates an arbitrary XML/HTML element — here an HTML `<script>` tag (namespace `html`). The `_cc_plain_xml` method injects raw content into that element, in this case the JavaScript function definition. On the backend side, `client->follow_up_action` then executes the function by name on the frontend:
10
+
Below is a starting point that works. The `_generic` method creates a custom XML/HTML element — here an HTML `<script>` tag (namespace `html`). The `_cc_plain_xml` method inserts raw content into that element — in this case, the JavaScript function definition. On the backend, `client->follow_up_action` then runs the function by name on the frontend:
11
11
12
12
```abap
13
13
METHOD z2ui5_if_app~main.
@@ -16,7 +16,7 @@ Below is a working example that you can use as a starting point. The `_generic`
Point all three files to your ABAP backend system:
17
15
16
+
<imgwidth="400"alt="Frontend config files where the backend system URL must be replaced"src="https://github.com/user-attachments/assets/155c9a3f-8a0a-494b-8fc4-a4bba2bf0e90">
18
17
19
-
#### Develop & Test
20
-
Set the correct backend system in the yamls <br>
21
-
Replace "/sap/bc/z2ui5" with your endpoint in the manifest
22
-
```
18
+
#### Build & Test
19
+
Set the backend system in the YAML files.<br>
20
+
Replace `/sap/bc/z2ui5` with your endpoint in the manifest, then run:
<imgwidth="1000"alt="npm run start-noflp output showing the local dev server running"src="https://github.com/user-attachments/assets/3e0118e8-d05f-48d1-bcc0-28073adf6e47">
abap2UI5 contains predefined user exits which can be used to modify the standard behavior. The user exits are exposed by the interface [`Z2UI5_IF_EXIT`](https://github.com/abap2UI5/abap2UI5/blob/main/src/02/z2ui5_if_exit.intf.abap). To use them in your system you have to create a new class which implements the interface and its methods. They're called dynamically by abap2UI5 class [`Z2UI5_CL_EXIT`](https://github.com/abap2UI5/abap2UI5/blob/main/src/02/z2ui5_cl_exit.clas.abap). You should **not** include your class into abap2UI5 packages but in any other custom package.
7
-
8
-
The interface provides two exit methods:
9
-
***`set_config_http_get`** — called during the initial HTTP GET request (page load). Use it to customize frontend settings like the page title, UI5 theme, or UI5 version.
10
-
***`set_config_http_post`** — called on every subsequent HTTP POST request (each roundtrip). Use it to configure backend behavior like the draft expiration time.
11
-
12
-
Both methods receive a `cs_config` changing parameter whose fields you can set as needed. The following example changes the title, theme and the time drafts are saved in the backend:
13
-
14
-
```abap
15
-
CLASS zcl_a2ui5_user_exit DEFINITION PUBLIC.
16
-
17
-
PUBLIC SECTION.
18
-
INTERFACES z2ui5_if_exit.
19
-
20
-
ENDCLASS.
21
-
22
-
CLASS zcl_a2ui5_user_exit IMPLEMENTATION.
23
-
24
-
METHOD z2ui5_if_exit~set_config_http_get.
25
-
26
-
cs_config-title = `my title`.
27
-
cs_config-theme = `sap_belize`.
28
-
29
-
ENDMETHOD.
30
-
31
-
METHOD z2ui5_if_exit~set_config_http_post.
32
-
33
-
cs_config-draft_exp_time_in_hours = 8.
34
-
35
-
ENDMETHOD.
36
-
37
-
ENDCLASS.
38
-
```
4
+
# User Exits
5
+
6
+
abap2UI5 offers predefined user exits for tweaking the standard behavior. The interface [`Z2UI5_IF_EXIT`](https://github.com/abap2UI5/abap2UI5/blob/main/src/02/z2ui5_if_exit.intf.abap) exposes the user exits. To use them on your system, build a class that implements the interface and its methods. The abap2UI5 class [`Z2UI5_CL_EXIT`](https://github.com/abap2UI5/abap2UI5/blob/main/src/02/z2ui5_cl_exit.clas.abap) calls them dynamically. Put your class in a custom package — **not** in the abap2UI5 packages.
7
+
8
+
The interface exposes two exit methods:
9
+
-**`set_config_http_get`** — called on the initial HTTP GET request (page load). Use it to set frontend properties like the page title, UI5 theme, or UI5 version.
10
+
-**`set_config_http_post`** — called on every later HTTP POST request (each roundtrip). Use it to set backend behavior like the draft expiration time.
11
+
12
+
Both methods take a `cs_config` changing parameter whose fields you can set as needed. The example below changes the title, the theme, and how long the backend keeps drafts:
Copy file name to clipboardExpand all lines: docs/advanced/fiori.md
+7-10Lines changed: 7 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,21 +1,18 @@
1
1
---
2
2
outline: [2, 4]
3
3
---
4
-
# Integration to Fiori Element Apps
4
+
# Integration into Fiori Elements Apps
5
5
6
-
You can extend the object page of Fiori list report apps with an abap2UI5 app. A repository to showcase the use case can be found [here](https://github.com/axelmohnen/ABAP2UI5_COMP_CONT).
6
+
Extend the object page of a Fiori list report app with an abap2UI5 app. See the [ABAP2UI5_COMP_CONT repository](https://github.com/axelmohnen/ABAP2UI5_COMP_CONT) for a complete example.
7
7
8
8
<imgwidth="747"height="387"alt="abap2UI5 app embedded in Fiori Elements object page"src="https://github.com/user-attachments/assets/c14d5732-3b8c-4fa5-83ab-6d188a4d87db" />
9
9
10
-
11
10
### Guide
12
11
13
-
Follow the following steps:
14
-
15
12
1. Register the FLP integration in the component.js:
16
13
17
14
```javascript
18
-
// Register ABAP2UI5 FLP integration for component container
15
+
// Register abap2UI5 FLP integration for component container
var oSection =that.getView().byId("[This is the ID of your object page section::Section]");
49
46
oSection.addStyleClass("customSectionHeight");
50
-
47
+
51
48
});
52
49
```
53
50
@@ -69,7 +66,7 @@ sap.ui.core.Component.create({
69
66
70
67
5. Create abap2UI5 app class
71
68
72
-
On the ABAP side, the app receives the Fiori startup parameters (such as the app class name and any custom key-value pairs) via `client->get( )-t_comp_params`. The `check_initialized` flag ensures the parameters are only read once on the first roundtrip. Setting `backgrounddesign = 'List'` gives the page a white background that blends in with the Fiori object page:
69
+
On the ABAP side, the app receives the Fiori startup parameters (like the app class name and any custom key-value pairs) via `client->get( )-t_comp_params`. The `check_initialized` flag ensures the parameters are read only once, on the first roundtrip. Setting `backgrounddesign = 'List'` gives the page a white background matching the Fiori object page:
0 commit comments