Merge pull request #17 from abap2UI5/test

added logging and custom js

Author: oblomov-dev

docs/.vitepress/config.mjs

@@ -104,8 +104,10 @@ export default defineConfig({
             { text: 'Barcode Scanning', link: '/development/barcodes' },
             { text: 'File Handling', link: '/development/files', },
             { text: 'XLSX', link: '/development/xlsx', },
+            { text: 'Logging', link: '/development/logging' },
             { text: 'Device Capabilities', link: '/development/ndc' },
             { text: 'CDS, EML', link: '/development/cds' },
+            { text: 'Custom JS', link: '/development/custom_js' },
            ]
           },
         ]

docs/addons/logging.md

@@ -13,7 +13,7 @@ On the frontend, abap2UI5 behaves like a standard UI5 app, so you can use all ty
 
 ##### Debugging Tools
 To begin, press `Ctrl+F12` to open the built-in debugger tools in abap2UI5
-![alt text](image.png)
+![alt text](debug.png)
 Here, you can inspect the XML View and check the Data Model bound to the view.
 
 ##### UI5 Inspector

docs/development/image.png docs/configuration/debug.pngdocs/development/image.png renamed to docs/configuration/debug.png

@@ -19,7 +19,6 @@ CLASS z2ui5_cl_sample_cds DEFINITION
 ENDCLASS.
 
 CLASS z2ui5_cl_sample_cds IMPLEMENTATION.
-
   METHOD z2ui5_if_app~main.
 
     SELECT FROM I_SalesOrder
@@ -42,7 +41,6 @@ CLASS z2ui5_cl_sample_cds IMPLEMENTATION.
     client->view_display( view->stringify( ) ).
 
   ENDMETHOD.
-
 ENDCLASS.
 ```
 

docs/configuration/troubleshooting.md

@@ -0,0 +1,32 @@
+---
+outline: [2, 6]
+---
+# Custom JS
+
+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.
+
+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.
+
+Below is a working example that you can use as a starting point:
+
+```abap
+METHOD z2ui5_if_app~main.
+
+  IF client->check_on_init( ).
+      DATA(view) = z2ui5_cl_xml_view=>factory( ).
+      view->_generic( name = `script` ns = `html` 
+        )->_cc_plain_xml(
+          |function myFunction() \{ console.log( `Hello World` ); \}| 
+        ).
+      view->page( 
+        )->button( text  = `call custom JS`
+                   press = client->_event( 'CUSTOM_JS' ) ).
+      client->view_display( view->stringify( ) ).
+  ENDIF.
+
+  IF client->get( )-event = 'CUSTOM_JS'.
+      client->follow_up_action( `myFunction()` ).
+  ENDIF.
+
+ENDMETHOD.
+```

docs/development/cds.md

@@ -21,14 +21,14 @@ CLASS z2ui5_cl_app IMPLEMENTATION.
           RETURN.
         ENDIF.
 
-        "callback after previous app
+        "callback after navigation
         IF client->check_on_navigated( ).
           DATA(lo_app_prev) = client->get_app_prev( ).
           "read attributes of previous app
           RETURN.
         ENDIF.
 
-        "handle events
+        "handle events after frontend
         CASE client->get( )-event.
           WHEN 'OK'.
             data(lt_arg) = client->get_event_arg( ).

docs/development/custom_js.md

@@ -0,0 +1,78 @@
+---
+outline: [2, 6]
+---
+# Logging, BAL
+
+Logging is essential for developing end-user business processes. In ABAP systems, the standard tool for this purpose is the Business Application Log (BAL), which is supported in both on-premise systems and ABAP Cloud. With abap2UI5, you can use BAL functions just as you would in classic development. Logs can be displayed in tables or using the predefined popups provided by the framework.
+
+##### BAL Variables
+In ABAP classic, you can use the classic BAL function modules and display the BAL table with the popup `z2ui5_cl_pop_messages`:
+```abap
+METHOD z2ui5_if_app~main.
+
+  DATA(lt_bal) = VALUE bal_t_msgr(
+    ( msgid = 'Z001' msgno = '001' msgty = 'S' time_stmp = '21354' msgnumber = '01' )
+    ( msgid = 'Z001' msgno = '001' msgty = 'S' time_stmp = '21354' msgnumber = '02' ) ).
+
+  client->nav_app_call( z2ui5_cl_pop_messages=>factory( lt_bal ) ).
+  
+ENDMETHOD.
+```
+
+##### ABAP Cloud
+In ABAP Cloud, you can directly pass the logging object into the popup:
+```abap
+METHOD z2ui5_if_app~main.
+
+  DATA(lo_log) = cl_bali_log=>create( ).
+  DATA(lo_msg) = cl_bali_message_setter=>create(
+    severity   = if_bali_constants=>c_severity_status
+    id         = 'DEMO_LOG'
+    number     = '002'
+    variable_1 = `username` ).
+  lo_log->add_item( lo_msg ).
+
+  DATA(lo_bapi) = cl_bali_message_setter=>create_from_bapiret2( 
+    VALUE #( 
+      type       = 'E'
+      id         = 'DEMO_LOG'
+      number     = '002'
+      message_v1 = 'Dummy' ) ).
+  lo_log->add_item( lo_bapi ).
+
+  client->nav_app_call( z2ui5_cl_pop_messages=>factory( lo_log ) ).
+
+ENDMETHOD.
+```
+
+##### abap-logger
+In on-premise systems, you also have the option to use the fantastic open-source project [**abap-logger**](https://github.com/ABAP-Logger/ABAP-Logger). This tool simplifies working with BAL logs and integrates seamlessly with abap2UI5. Here’s an example:
+```abap
+METHOD z2ui5_if_app~main.
+
+  DATA(log) = zcl_logger_factory=>create_log( desc = 'ABAP Logger' ).
+  log->e( 'This is an error...' ).
+  log->s( 'This is a success message...' ).
+
+  client->nav_app_call( z2ui5_cl_pop_messages=>factory( log ) ).
+
+ENDMETHOD.
+```
+
+##### BAL Popup
+Compared to message classes, BAL logs include more detailed information, such as timestamps. You can also use the specific BAL log popup to display this information. All the examples above can be used with the `z2ui5_cl_pop_bal` popup instead. Here’s an example using the abap-logger:
+
+```abap
+METHOD z2ui5_if_app~main.
+
+  DATA(lo_log) = zcl_logger_factory=>create_log( desc = 'ABAP Logger' ).
+  log->e( 'This is an error...' ).
+
+  client->nav_app_call( z2ui5_cl_pop_bal=>factory( lo_log ) ).
+
+ENDMETHOD.
+```
+
+::: tip
+This popup is still in its early stages and offers basic functionality. If you’ve implemented BAL features with abap2UI5, consider contributing to extend its capabilities. Contributions are always welcome!
+:::

docs/development/general.md

@@ -175,7 +175,7 @@ ENDCLASS.
 :::
 
 ::: tip **ABAP Cloud**
-The snippets provided above are not compatible with ABAP Cloud. To make them compatible, replace the code in the lcl_help class with functions from the new XCO_CP_XLSX APIs.
+The code snippets above are not compatible with ABAP Cloud, modify the lcl_help class by replacing its code with functions from the new XCO_CP_XLSX APIs to ensure compatibility.
 :::
 
 #### abap2xlsx