|
|
Articles / Forum - Javascript function-pointers in IDM
|
We hope you find the information below useful.
If you feel you could add or refine this article to make it better, feel free to
modify this page.
Share, wiki and grow!
| << Back to all Articles |
|
|
Javascript function-pointers in IDM
|
Last modified by
Aditya Mutalik
on Jul 20, 11:28 PM |
|
Rate this article
|
|
|
Let's begin with a few scenarios:
- A form contains a text-field which requires a user to enter his/her social security number in the xxx-xx-xxxx format. To make it a user-friendly, we would like to auto-insert the hyphens after the 3rd and 5th digit is entered.
- A date-picker field in IDM allows a user to either (a) select a date from the calendar, or (b) enter the date in mm/dd/yyyy format. What if the user choses option (b) but enters 'abcd' and submits the form? IDM throws a WavesetException on the page. Can we prevent the user from entering the date in any other format?
- A form allows a user to input the password for his/her account. We would like to indicate the strength of the password depending on its complexity as and how the user keys in the password. Is this possible?
In all the above situations, the interactivity is on the client-side (does not involve submitting the page and returning from the server). How can we achieve the above then? The answer is -- use javascript.
IDM offers 2 javascript events for each field-type (textbox, select, button, etc) viz. onClick() and onChange(). The script for these 2 events can be specified as properties <Property name=... /> for these fields. The onClick() event is triggered in the browser window when a user clicks inside the field using a mouse. Similarly onChange() is triggered when the value of the field changes and the user changes the current-focus to another field.
But there are many javascript events other than these two. For example: onKeyUp, onFocus, onBlur, onKeyPress, etc. For situation 1, we might want to use the onKeyPress() or onKeyDown() event to calculate the position of the hyphen. For situation 2, we might want to check the entered value-format once the user "leaves" the field: onBlur(). Situation 3 might even require use of an AJAX-call to determine the strength of a password as defined by a Rule to be called on the server side. What do we do in such cases?
The answer is -- Javascript function poitners.
This concept is not new, just that it comes in handy in the constrained-environment of IDM. The idea is to define a javascript function and attach an event-trigger "outside" the field (this page provides a quick review of the concept: http://www.permadi.com/tutorial/jsFunc/index.html). Here's a quick guide how situation 2 above can be accomplished:
<Field name="dateField">
<Display class="DatePicker">
<Property name="title" value="Enter Date:"/>
</Display>
</Field>
<Field name="dateField_javascript">
<Display class="Html">
<Property name="html" value="<script>var dateField_elem = document.getElementsByName("dateField")[0]; dateField_elem.onblur = function() { if (dateField_elem.value!='' && new RegExp('[0-9]+/[0-9]+/[0-9]{4}').test(dateField_elem.value)==false) alert("Please enter a valid date in mm/dd/yyyy format."); dateField_elem.value=''; };</script>"/>
</Display>
</Field>
Notice here, that the main field is "dateField", while a separate field "dateField_javascript" defines an anonymous method and attaches it to the onblur() event of the "dateField" element. The end result is that the user is free to select the date from the calendar popup, or can manually enter the date in the textbox too. If the format is found to be wrong, a popup is displayed and the entered value is nullified.
Situation 1 can be handled similarly. For situation 3, in addition to the above, an AJAX call (if required) may be implemented as discussed in this article: Ajax implementation in forms.
Many more javascript events (discussed here: http://www.comptechdoc.org/independent/web/cgi/javamanual/javaevents.html) can be leveraged this way to provide a much more enriched user-interface.
Hope this helps!
|
|
|
|
|
The views expressed in this article are solely those of its contributor(s)
and are not necessarily endorsed by xpressutils.com.
|
<< Back to all Articles |
|
|
|
|
Feedback / Comments:
We value comments from XpressUtils users!
We strive to make this site better for you each day, so all constructive comments are appreciated.
Please feel free to send us your feedback!
|
| |
|
|
Submit a comment:
|
|
|
Subscribe to updates
Hi, team i want to know how to add uid to LDAP groups. if any body knows please help