Triggering Server side validation by pressing TAB (Enter is not required)

[krishnendu_laha]

Overview:

Many times in our project we have requirement to trigger server side validation by Pressing TAB key (keyboard). Typically this is a demand from Customer who are usually new to SAP world. I myself had faced similar situation and convinced customer that it is required in SAP CRM to press "Enter" to get the error message aka validating the data.

In this blog I would explain how can we trigger Validation by pressing TAB key in SAP CRM Web UI.

Yes it is clear that we can also attach JavaScript (Attaching Java Script to a field in Table of SAP CRM Web UI) but complex validation logic (through BOL) is not possible or really complex.

Details:

By pressing Tab key on Web UI, it is actually fires client side event "Clientblur". We need to capture trigger event handler through JavaScript for the event Clientblur, and trigger server side event through BSP element <bsp: htmlbEvent>.

Step 1:

Copy CL_UIF_BP_SAMPLE_ITERATOR  class to Z Iterator class. In method "IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START" (is used for new column) we need to capture "Clientblur". Below is sample code:

DATA: lr_input TYPE REF TO cl_thtmlb_inputfield.

 

   CASE p_tableview_id.

     WHEN OTHERS.

       CASE p_column_key.

         WHEN 'ZZTEST'.     "CRM Web UI Field Name

*         Onclient functionality

           TRY .

               lr_input ?= p_replacement_bee.

               lr_input->onclientblur = 'return Testclientblur()'.

               p_replacement_bee ?= lr_input.

             CATCH cx_root.

               p_replacement_bee ?= p_replacement_bee.

           ENDTRY.

       ENDCASE.

   ENDCASE.

 

Step 2:

 

In .HTM page need to create an instance of created Iterator class:

 

DATA: gr_iterator TYPE REF TO ZCL_TEST_ITERATOR.

CREATE OBJECT gr_iterator.

 

In Tableview or Tablecellartor, need to use the before created custom Iterator class. Below sample code:

 

       iterator = "<%= gr_iterator %>"

 

Step 3:

 

In .HTM page after Tableview / Tablecellartor code declaration, need to declare BSP Element for event firing and JavaScript event handler method.

 

<bsp:htmlbEvent name = "DO_VALIDATE_INPUT"

                 id   = "DO_VALIDATE_INPUT" />

 

* Here DO_VALIDATE_INPUT is the name of method to handle the event in View Implementation class

* I have used standard method DO_VALIDATE_INPUT for testing purpose and can be best place to write validation for multipurpose uses.

 

Step 4:

In .HTM page after Tableview / Tablecellartor code and  BSP Event Element declaration, JavaScript event handler method should be written.

 

<script type="text/javascript">

 

function Testclientblur() {

 

DO_VALIDATE_INPUT();

 

}

</script>

 

* Here Testclientblur is the event handler for client side event "Clientblur", which we have declared in Step 1. In this event handler, it is calling Server Side Event and Event handler "Do handle event".

 

 

Test:

I have used for testing and Date field and by pressing the Tab key on Date field pops out error message "Date sdsd is invalid"

Summary:

I hope it would solve many business case problem where validation error by pressing Enter or Save button is too late. Please use the logic and if you have questions and / or comment, please add. Enjoy :smile:

Reference: CRM WebClient UI - Talking with Java Script - CRM - SCN Wiki