Using HTML in Dynpro an react on user interactions

The report needs dynpro 2000 with a custom container 'CC' for the HTML control.

REPORT zjso_html_in_dynpro_event.

CLASS lcl_html DEFINITION.

  PUBLIC SECTION.
    CLASS-DATA: mo_cc TYPE REF TO cl_gui_custom_container.
    CLASS-DATA: mo_html TYPE REF TO cl_gui_html_viewer.
    CLASS-METHODS: pbo, user_command, leave_screen.
    CLASS-METHODS on_sapevent FOR EVENT sapevent OF cl_gui_html_viewer
      IMPORTING action frame getdata postdata query_table.

ENDCLASS.


START-OF-SELECTION.
  CALL SCREEN 2000.


*&---------------------------------------------------------------------*
*&      Module  STATUS_2000  OUTPUT
*&---------------------------------------------------------------------*
MODULE status_2000 OUTPUT.
  SET PF-STATUS '2000'.
  SET TITLEBAR '2000'.
  lcl_html=>pbo( ).
ENDMODULE.


*&---------------------------------------------------------------------*
*&      Module  USER_COMMAND_2000  INPUT
*&---------------------------------------------------------------------*
MODULE user_command_2000 INPUT.
  lcl_html=>user_command( ).
ENDMODULE.


CLASS lcl_html IMPLEMENTATION.

  METHOD pbo.
    DATA lv_url TYPE text1024.
    DATA lt_html TYPE STANDARD TABLE OF text1024 WITH DEFAULT KEY.
    DATA lt_event TYPE cntl_simple_events.

    CHECK mo_cc IS NOT BOUND.
    lt_html = VALUE #(
      ( |<!DOCTYPE html><head>| )
      ( |  <meta charset="utf-8">| )
      ( |  <title>HTML in Dynpro</title>| )
      ( |  <style>| )
      ( '    body { font-family:segoe ui, arial, helvetica; }' )
      ( |  </style>| )
      ( |<script>| )
      ( |function onClick(source) \{| )
      ( |  window.location.href = 'SAPEVENT:'+source.innerHTML;| )
      ( |\}| )
      ( |</script>| )
      ( |</head>| )

      ( |<body>| )
      ( |  <p>Hello, world!</p>| )
      ( |  <a href="SAPEVENT:Hyperlink">Request SAP AS</a>| )
      ( |  <div onclick="onClick(this)" style="width: 120px; height: 120px; margin: 8px; background-color:#ef0000">red</div>| )
      ( |  <div onclick="onClick(this)" style="width: 120px; height: 120px; margin: 8px; background-color:#ffdd00">yellow</div>| )
      ( |  <div onclick="onClick(this)" style="width: 120px; height: 120px; margin: 8px; background-color:#00ee00">green</div>| )
      ( |</body></html>| )
    ).
    mo_cc = NEW #( 'CC' ).
    mo_html = NEW #( mo_cc ).

    " setup event handler for SAPEVENT from HTML control
    INSERT VALUE #( eventid = mo_html->m_id_sapevent  appl_event = abap_true ) INTO TABLE lt_event.
    mo_html->set_registered_events( lt_event ).
    SET HANDLER on_sapevent FOR mo_html.

    " populate HTML control with HTML page
    mo_html->load_data(
      IMPORTING assigned_url = lv_url
      CHANGING data_table = lt_html
    ).
    mo_html->show_url( lv_url ).

  ENDMETHOD.


  METHOD user_command.
    CASE sy-ucomm.
      WHEN 'BACK' OR 'EXIT'. leave_screen( ). LEAVE TO SCREEN 0.
      WHEN 'BACK' OR 'EXIT'. leave_screen( ). LEAVE PROGRAM.
    ENDCASE.
  ENDMETHOD.


  METHOD leave_screen.
    IF mo_cc IS BOUND.
      mo_cc->free( ).
    ENDIF.
  ENDMETHOD.

  METHOD on_sapevent.
    MESSAGE |onClick = { action }| TYPE 'I'.
    " check contents of { postdata } and { query_table } in debugger
  ENDMETHOD.

ENDCLASS.

Update IDoc Status

    DATA ls_edi_ds TYPE edi_ds.

    CLEAR es_edidc.

    CALL FUNCTION 'EDI_DOCUMENT_OPEN_FOR_PROCESS'
      EXPORTING
        document_number          = iv_docnum
      IMPORTING
        idoc_control             = es_edidc
      EXCEPTIONS
        document_foreign_lock    = 1
        document_not_exist       = 2
        document_number_invalid  = 3
        document_is_already_open = 4
        OTHERS                   = 5.
    IF sy-subrc <> 0.
      CLEAR es_edidc.
      RETURN.
    ENDIF.

    ls_edi_ds = VALUE #(
      docnum = iv_docnum
      status = iv_status
      uname  = sy-uname
      logdat = sy-datum
      logtim = sy-uzeit
    ).

    CALL FUNCTION 'EDI_DOCUMENT_STATUS_SET'
      EXPORTING
        document_number         = iv_docnum
        idoc_status             = ls_edi_ds
      IMPORTING
        idoc_control            = es_edidc
      EXCEPTIONS
        document_number_invalid = 1
        other_fields_invalid    = 2
        status_invalid          = 3
        OTHERS                  = 4.
    IF sy-subrc <> 0.
      CLEAR es_edidc.
      RETURN.
    ENDIF.

    CALL FUNCTION 'EDI_DOCUMENT_CLOSE_PROCESS'
      EXPORTING
        document_number     = iv_docnum
      IMPORTING
        idoc_control        = es_edidc
      EXCEPTIONS
        document_not_open   = 1
        failure_in_db_write = 2
        parameter_error     = 3
        status_set_missing  = 4
        OTHERS              = 5.

    IF sy-subrc <> 0.
      CLEAR es_edidc.
      RETURN.
    ENDIF.