Quantcast
Channel: SAP CRM: Webclient UI - Framework
Viewing all articles
Browse latest Browse all 188

Web UI fields (Model Node/Model Attributes) validation using JavaScript

$
0
0

Purpose :

 

It is helpful to know the UI fields validation errors prior to pressing the "Enter" key  or "Save" button .In a situation where there is an error, JavaScript functions are handy in identifying the issues/validations at client side without server round trip.

 

I have explained how JavaScript functions can be attached to view fields and how JavaScript functions can raise alerts in case of errors when user navigates from one field to another field.

 

 

  • Created a view with IBHeader (Root object) fields .

                                                                                                IBHeader.PNG

    - IBase

        - IBase Description

        - External ID

Initial UI.PNG

  • Created default configuration with above three fields.

UI Configuration.PNG

 

  • Wrote Java Script functions for field contents validation in .htm page

                                                                                                            htm img.PNG

  • JavaScript Functions:

     

    These functions are specific to my configuration fields (I wrote these functions with simple functionality to explain how JavaScript functions work on configuration fields). Based on your requirement , if needed , implement more generic functions with parameters.

 

"UIValidations" function gets the "IBase Description" field contents with "getElementById" document method and checks whether content's length is less than or equal to 10 characters , if the validation fails,then JavaScript function raises an alert.

Field Contents Length Validation.PNG

 

"UIValidateNumber" function gets the "External ID" field contents with "getElementById" document method and checks whether contents are numbers or not , if the validation fails,then JavaScript function raises an alert.

Field Contents numeric Validation.PNG

  • Finding the UI field's generated ID:

 

UI field's ID will get generated as "component_id" "_" "Context_ndoe" "_" "Structure" "." "fieldname",so I built the UI element ID with controller component ID , context node and structure field. Example field ID will be like : C1_W1_V2_ibase_struct.descr.


Finding the UI fields in the configuration.PNG


I have explained client side validations using JavaScript functions with the below approaches .Alerts will be raised in case of "onblur" event (which fires when user leaves an input field).

 

 

 

Approach - 1:

 

In this approach , I first attached the JavaScipt functions to the fields in a function and called this function explicitly.

OnBlur Event.PNG

 

Calling the Field Events.PNG

 


Approach - 2 :

 

In this approach , I created a custom class ,attached the interface IF_CHTMLB_FORM_ITERATOR,

implemented method of the interface RENDER_CELL_START and assigned JavaScript functions to the event

"onclientblur" of the input field.

Iterator Method.PNG

Script Attachment.PNG

 

    In ".htm" code , I created the iterator object and assigned to the config.

Iterator addition in htm.PNG

 

 

Execution Process(Validations) :

 

   Screens to show how JavaScript function displays output in case of validation failure.

 

 

    • Case - 1 : When IBase Description is less than 10 characters

UI field contents length validation Popup.PNG

 

    •         Case - 2 : When External ID contains non-numeric values

 

UI Number validation Popup.PNG

 

    •    Screen fields with correct data(no errors in the input)

No Popup with right Values.PNG

 

  • Component hierarchy

Component.PNG


Viewing all articles
Browse latest Browse all 188

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>