Attaching Java Script to a field in Table of SAP CRM Web UI

Overview:

As a developer many times a small Java script can save a lot of code! I have seen a blog to assign Java script function to a field but that did not work for me when assigning with a field of table view. I have done some experiment and decided to share within the community. Please feel free to add your comment or / and experience. 🙂

First Step:

Create a Iterator class (BSP Iterator not BOL Collection Iterator) by copying sample iterator class CL_UIF_BP_SAMPLE_ITERATOR

In CRM Web UI component .HTM page -> create a instance and assign to attribute iterator of CHTMLB: ConfigTable, for example below:

      <chtmlb:configTable xml                   = “<%= lv_xml %>”

                          iterator              = “<%= gr_iterator %>”

Second Step:

In new BSP Iterator class redefine RENDER_CELL_START method to add Java script function to specific columns, for example below:

1. testFunction (rememeber Javascript function is case sensitive!) returns a message & prevent writing

and 2. testFunctionwithoutmessage does not return but prevent writing (Keydown)

DATA: lr_input TYPE REF TO cl_thtmlb_inputfield.

  CASE p_tableview_id.
     WHEN OTHERS.
       CASE p_column_key.
         WHEN ‘ZZTEST’.
*         No manual entry is allowed, only through search help
           lr_input ?= p_replacement_bee.
           lr_input->onkeydown = ‘return testFunction()’.
           p_replacement_bee ?= lr_input.
         WHEN ‘ZZTEST2.
*         No manual entry is allowed, automatic through search help assignment
           lr_input ?= p_replacement_bee.
           lr_input->onkeydown = ‘return testFunctionwithoutmessage()’.
           p_replacement_bee ?= lr_input.
       ENDCASE.
   ENDCASE.

Third Step:

Write Javascript functions in .HTM page, for example below

<script type=“text/javascript”>

function myFunction() {

alert(“Please select.”);
return false;

}

function testFunctionwithoutmessage() {

return false;

}

</script>

Summary:

There is another method OnClientClick which is also useful. For my requirement these two served the purpose and saved a lot of code and importantly server rendering. Have fun 🙂