Skip to content

Commit

Permalink
Merge pull request abap2UI5#16 from abap2UI5/dev
Browse files Browse the repository at this point in the history
update
  • Loading branch information
oblomov-dev authored Oct 28, 2024
2 parents 769a186 + 0efd94e commit b6b9fcb
Show file tree
Hide file tree
Showing 14 changed files with 50 additions and 42 deletions.
2 changes: 1 addition & 1 deletion docs/advanced/stateful.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Stateful Sessions

In Private and OnPremise scenarios abap2UI5 can also be used in stateful mode. Check out [sample 135](https://github.com/abap2UI5/samples/blob/main/src/z2ui5_cl_demo_app_135.clas.abap) or [sample 137.](https://github.com/abap2UI5/samples/blob/main/src/z2ui5_cl_demo_app_137.clas.abap)
In Private and OnPremise scenarios abap2UI5 can also be used in stateful mode. Check out `Z2UI5_CL_DEMO_APP_135` and `Z2UI5_CL_DEMO_APP_137`.
10 changes: 5 additions & 5 deletions docs/configuration/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,25 @@ outline: [2, 4]

# Installation

This project is compatible with most ABAP releases and language versions. As outlined in the Quickstart Guide, you can run the app directly through the HTTP handler:
As outlined in the Quickstart Guide, you can run the abap2UI5 amd its apps directly through an HTTP service:
![alt text](image.png){ width=70% }


This is the quickest and most programmatic approach; however, for productive usage, you have additional options.

### ABAP Standard

In `S/4 Private` or `S/4 On-Premise` systems you can just transport it as it is into production and use it. However it may be required to make this app accessible via BSP on-premise (leveraging the Fiori launchpad). Therefore you can install the abap2UI5 frontend:
In `S/4 Private` or `S/4 On-Premise` it may be required to make this app accessible via BSP on-premise (leveraging the Fiori launchpad). Therefore you can install the [abap2UI5-frontend:](https://github.com/abap2UI5/frontend)

![alt text](image-1.png){ width=80% }

Check out this [section](/configuration/launchpad) for more details.


### ABAP Cloud
In `S/4 Public Cloud` or `BTP ABAP` without the authoriy `S_DEVELOP` you can not acces the HTTP endpoint, so this is not a valid scenario for producvive usage. Deploy therefor the cloud branch of the abap2UI5-frontend and maintain a new fiori launchpad:
In `S/4 Public Cloud` or `BTP ABAP Environment` without the S_DEVELOP authority, you cannot access the HTTP endpoint, making this scenario unsuitable for productive usage. Instead, deploy the cloud branch of the [abap2UI5-frontend](https://github.com/abap2UI5/frontend) and set up a new Fiori tile:

![alt text](image-2.png){ width=80% }

### R/3 Netweaver

For old `R/3 Netweaver` check out the [downport section.](/advanced/downporting)
For old `R/3 Netweaver` check out the [downport section.](/advanced/downporting)
10 changes: 5 additions & 5 deletions docs/configuration/security.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
# Security

### HTTP Endpoint
The framework is implemented as an HTTP handler. You create the HTTP handler and invoke the abap2UI5 API within it. End users can access abap2UI5 by calling the endpoint defined in your HTTP handler. Security is managed in the same way as with any other UI5 application.
The abap2UI5 framework operates as an HTTP handler. You create this HTTP handler and call the abap2UI5 API within it. End users can access abap2UI5 by calling the endpoint defined in your HTTP handler, with security managed similarly to any other UI5 application.

### Authorization
Authorization is managed at the ICF (Internet Communication Framework) node level. You have all options to maintain the of your icf node, changing isibilty , login procedure etc.
Authorization is managed at the ICF (Internet Communication Framework) node level. You have full control to configure your ICF node by adjusting visibility, login procedures, and other authorization settings.

### Authentication
Authentication is managed by the app developer. You have various options, on app level, node level etc. chout out more information here. You can configure which users or systems have access to your endpoint, ensuring that only authorized parties can interact with the framework [here.](/configuration/authorization)
Authentication settings are customizable by the app developer and can be managed at the application level or node level. For more information on configuring authentication for your endpoint, including user and system access control, refer to the details [here.](/configuration/authorization)

### Backend Code
abap2UI5 is delivered as Z-Code. Once installed, you "own" the code and can either use it as-is or modify it as necessary. However, to benefit from future updates, it is recommended not to alter the main code line directly.
abap2UI5 is delivered as Z-Code. Once installed, you "own" the code, allowing you to use or modify it as necessary. However, to benefit from future updates, it is recommended not to directly alter the main code line.

### Frontend Code
The frontend of the application is a Single Page Application (SPA) built using SAPUI5 or OpenUI5. The application is delivered from the HTTP endpoint upon the first request, following standard practices for modern web apps.
The frontend of the application is a Single Page Application (SPA) built using SAPUI5 or OpenUI5. It is delivered from the HTTP endpoint upon the first request, following best practices for modern web applications.

### Content-Security-Policy
To enhance security, abap2UI5 uses a Content Security Policy (CSP) by default. CSP helps prevent attacks like cross-site scripting (XSS) and data injection by restricting which resources the browser is allowed to load.
Expand Down
2 changes: 1 addition & 1 deletion docs/configuration/setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ METHOD if_http_extension~handle_request.
ENDMETHOD.
```
For custom configurations, simply create a config variable and import it to the main method:
For custom configurations, simply fill the config structure and import it to the run method:

### Theme
eg. for changing the theme the source code looks like this:
Expand Down
2 changes: 1 addition & 1 deletion docs/development/messages.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ METHOD z2ui5_if_app~main.
ENDMETHOD.
```
#### Uncatched Errors
What happens if errors are uncaught? In this case, the default HTTP handler exception output is used. The processing is interrupted and the user need to restart the browser. So only use this for unexpected behaviour:
What happens if errors are uncaught? In this case, the default HTTP handler exception output is used. The processing is interrupted and the user need to refresh the browser. So only use this for unexpected behaviour:
```abap
METHOD z2ui5_if_app~main.
Expand Down
25 changes: 12 additions & 13 deletions docs/development/model.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ outline: [2, 4]
---
# Model

there are three different ways to exchange data with the frontend.
There are three ways to exchange data with the frontend in abap2UI5.

#### One Way Binding
#### One-Way Binding

If you just need to display data to the frontend, and now changes must be made, you just use one way binding with the method `client->_bind` and the framework sends the data to the frontend and connects it with the view:
When you need to display data on the frontend without allowing any changes, use one-way binding. The `client->_bind` method sends the data to the frontend and connects it to the view:
```abap
CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC.
Expand All @@ -29,10 +29,10 @@ CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.
ENDMETHOD.
ENDCLASS.
```
Same works for tables, trees are other deep data structures. Check out the samples repository and take a look to the table or tree samples.
This method also works for tables, trees, and other complex data structures. For more details, refer to the samples repository and explore the table or tree samples.

#### Two Way Binding
If the user should be able top change the data, you habe to make sure that the data will also be updated in the ABAP backend. Therefor use two way binding and use the mehtod `client->_bind_edit`. After an event the framework will update the value in you abap class.
#### Two-Way Binding
If the user should be able to modify data, enable two-way binding to update data in the ABAP backend. Use the `client->_bind_edit` method so that after an event, the framework will synchronize the data with your ABAP class.

```abap
CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC.
Expand Down Expand Up @@ -63,12 +63,8 @@ CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.
ENDCLASS.
```

::: tip **Data in Public Attributes**
Be aware that in both cases the binded data is public attribute in your class, because the framework needs to access it from outside. A bit like in the old pbo/pai screen days where the needed t be saved in global attributes too.
:::

#### Local Binding
If you only have access to the data locally but still want to bind it, you have the chance to use bind local. This is especcially helpful for value helps when no changes at the frontend are made and dont need to chenge the data in the app logic. the framework will imeediatley copy the data in the bind method and then sned it to the frontend:
When you only have local access to data but want to bind it for display (e.g., for a value help or lookup), use local binding. The `client->_bind_local` method copies the data and sends it to the frontend without impacting backend logic:

```abap
CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC.
Expand All @@ -82,7 +78,7 @@ CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.
METHOD z2ui5_if_app~main.
DATA(lv_name) TYPE string.
client->view_display( z2ui5_cl_xml_view=>factory(
)->page( 'abap2UI5 - Hello World'
)->text( text = `My Text`
Expand All @@ -92,5 +88,8 @@ CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.
ENDMETHOD.
ENDCLASS.
```
For an example of local binding in action, see the value help use case in `Z2UI5_CL_DEMO_APP_002`.

Check out the `Z2UI5_CL_DEMO_APP_002` to see the value help use case for local binding in action.
::: tip **Data in Public Attributes**
Be aware that you need to store your data in pubic attributes of your class when using One-Way or Two-Way binding, because the framework needs to access it from outside. This is similar to the PBO/PAI screen days, where data needed to be stored in global variables.
:::
7 changes: 7 additions & 0 deletions docs/development/popups.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@



Popups it’s recommend to use for every popup an own app so use navigation

### Popup in separated App
### Popover


Expand All @@ -21,6 +24,10 @@ a few you already saw at message and errors section.
```
Feel free to send a PR if you extend a need a new popup.





#### Popup to Select


Expand Down
10 changes: 5 additions & 5 deletions docs/development/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ outline: [2, 4]
# Troubleshooting

### Backend
Just set a breakpoint in your abap2UI5 app and debug your code. Check if the XML view is correctly generated and check if all events are triggerd in the backend.
Set a breakpoint in your abap2UI5 app to debug your code. Verify that the XML view is generated correctly and check that all events are triggered on the backend as expected.

### Frontend
At the frontend abap2UI5 is a normal UI5 app, all common tools and debug features can be used.
On the frontend, abap2UI5 behaves like a standard UI5 app, so you can use all typical tools and debugging features.

##### Debugging Tools
First press `ctrl+F12` and open the build in debugge tools of abap2UI5:
To begin, press `Ctrl+F12` to open the built-in debugger tools in abap2UI5
![alt text](image.png)
You can check the XML View and Data Model which is binded to the view.
Here, you can inspect the XML View and check the Data Model bound to the view.

##### UI5 Inspector

Another option is to use the defaule SAP debugger tools by using the [UI5 Inspector.](https://chromewebstore.google.com/detail/ui5-inspector/bebecogbafbighhaildooiibipcnbngo?hl=es)
Another useful option is SAP’s default debugging tool, the [UI5 Inspector.](https://chromewebstore.google.com/detail/ui5-inspector/bebecogbafbighhaildooiibipcnbngo?hl=es)


6 changes: 4 additions & 2 deletions docs/development/view.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
outline: [2, 4]
---
# View
Output is generated by importing an UI5 XML View into abap2UI5. Here is a basic example:
Output in abap2UI5 is generated by importing a UI5 XML View. Here’s a basic example:

```abap
METHOD z2ui5_if_app~main.
Expand Down Expand Up @@ -32,4 +32,6 @@ You can use any UI5 control available in the UI5 SDK. However, working with XML
ENDMETHOD.
```
Check the API of the class and use code completion to easily find the right controls and properties. Additionally, it’s recommended to explore the sample repository, where pre-written XML examples for most use cases are available for easy copy, paste, and adjustment to fit your needs. Currently, this setup is quite static; we’ll explore how to bind and exchange data in the next section.
Check the API of the class `Z2UI5_CL_XML_VIEW` and use code completion to easily find the right controls and properties. Additionally, it’s recommended to explore the sample repository, where pre-written XML examples for most use cases are available for easy copy, paste, and adjustment to fit your needs.

Currently, this setup is quite static; we’ll explore how to bind and exchange data in the next section.
4 changes: 2 additions & 2 deletions docs/get_started/hello_world.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ outline: [2, 4]
# Hello World

### Basic Example
Every abap2UI5 app is an implementation of the `z2ui5_if_app` interface. Create a new class with the following code:
Every abap2UI5 app is an implementation of the `Z2UI5_IF_APP` interface. Create a new class with the following code:
```abap
CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC.
Expand All @@ -21,7 +21,7 @@ CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.
ENDMETHOD.
ENDCLASS.
```
Go back to the landing page in your browser and enter `z2ui5_cl_app_hello_world`. Your app will then launch.
Go back to the landing page in your browser and enter `Z2UI5_CL_APP_HELLO_WORLD`. Your app will then launch.

### View Display
Now, let's add our first view to display a simple text:
Expand Down
2 changes: 1 addition & 1 deletion docs/get_started/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Launched in 2023 as a personal project, abap2UI5 began with basic selection scre

##### Compatibility
![alt text](image-15.png){ width=50% }
abap2UI5 runs on all ABAP releases, from NW 7.02 to ABAP Cloud. It is compatible with on-premise landscapes, including S/4HANA Private Cloud, On-Premise, and R/3 NetWeaver AS ABAP 7.50 or higher. It also works in cloud environments like BTP ABAP Environment and S/4HANA Public Cloud.
abap2UI5 runs with both language versions `ABAP Cloud` and `Standard ABAP`. It is compatible with all ABAP releases, starting from ABAP v7.02 up to ABAP for Cloud, including systems R/3 NetWeaver, S/4 On-Premise, S/4 Private Cloud and in cloud environments BTP ABAP Environment and S/4 Public Cloud.

##### Installation
![alt text](image-14.png){ width=50% }
Expand Down
4 changes: 2 additions & 2 deletions docs/get_started/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ CLASS zcl_my_abap2UI5_http_handler IMPLEMENTATION.
METHOD if_http_extension~handle_request.
z2ui5_cl_http_handler=>factory( server )->main( ).
z2ui5_cl_http_handler=>run( server ).
ENDMETHOD.
Expand All @@ -59,7 +59,7 @@ CLASS zcl_my_abap2UI5_http_handler IMPLEMENTATION.
METHOD if_http_service_extension~handle_request.
z2ui5_cl_http_handler=>factory( req = request res = response )->main( ).
z2ui5_cl_http_handler=>run( req = request res = response ).
ENDMETHOD.
Expand Down
6 changes: 3 additions & 3 deletions docs/get_started/samples.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ Try out samples for use cases, such as tables, lists, trees, and many other UI5
![alt text](image-1.png)

### Jump into the Code
Don’t forget to press Ctrl+F12 and check out the source code for each sample:
Press `CTRL+F12` and check out the source code, view and model for each sample:
![alt text](image-2.png)


<br>

_Don’t have a system available? You can also run_ the samples directly in your browser [here.](https://abap2ui5.github.io/web-abap2ui5-samples/)
_Don’t have a system available? You can also run the samples directly in your browser [here.](https://abap2ui5.github.io/web-abap2ui5-samples/)_

::: tip **Contribution**
The samples are continuously evolving. Have a sample you'd like to share? Feel free to open a PR so others can learn from your example!
The samples are continuously evolving. Have a sample you'd like to share? Feel free to open a PR so others can learn from your code!
:::
2 changes: 1 addition & 1 deletion docs/get_started/use_cases.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Classic extension — use unreleased APIs and benefit from the freedom to make e
### Side-by-Side Extension

#### Tier 1 Extension
Separate the development lifecycle of your apps from your S/4 system using only remote API calls.
Separate the development lifecycle of your apps from your S/4 system using only remote API calls. By only using released APIs your apps are also compatible to S/4 Public Cloud.
![alt text](image-22.png){ width=60% }

#### Tier 3 Extension
Expand Down

0 comments on commit b6b9fcb

Please sign in to comment.