jQuery in XPages #3 – Masked Input – How does it work?

Masked Input

This article is published in conjunction with the main jQuery in XPages #3 – Masked Input

 

How does it work?

To add the Masked Input capability to your XPages in a generic, re-usable manner you will need to do the following:

Adding the JavaScript libraries

In the designer menu select Window | Show Eclipse Views | Package Explorer

Opening the package explorer in Domino Designer
Opening the package explorer in Domino Designer

Search for the WebContent folder
On your local machine make a “js” folder with the following files in it

Drag and drop the js folder into the WebContent folder of your database

Drag and Drop your Masked Input js file
Drag and Drop your Masked Input js file

Creating the custom control to load the JavaScript libraries

Create the following ccMaskedInput custom control in your database

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<xp:this.resources>
		<xp:script src="js/jquery-1.7.1.min.js"
			clientSide="true">
		</xp:script>
		<xp:script src="js/x$.js"
			clientSide="true">
		</xp:script>
		<xp:script src="js/jquery.maskedinput-1.3.min.js"
			clientSide="true">
		</xp:script>
	</xp:this.resources>
</xp:view>

You now have a re-usable custom control which can be added to any of the XPages in your database.

Creating your XPage

  • Create a new XPage and create a new Domino Document data source from one of the forms in the database.
  • Drag and drop your fields to the XPage
  • Drag and drop the ccMaskedInput custom control onto your XPage
  • Add the following script block to the bottom of your XPage/custom control and change the fields names to match your field names. (Change the masks to match the masks you want on your form)
 	<xp:scriptBlock id="scriptBlock1">
		<xp:this.value><![CDATA[
		jQuery(function($){
   			x$("#{id:date1}").mask("99/99/9999");		//change the field name
   			x$("#{id:phone1}").mask("(999) 999-9999");	//change the field name
   			x$("#{id:SSN1}").mask("999-99-9999");		//change the field name
   			x$("#{id:custom1}").mask("99-99-aaaa-9");	//change the field name
		});

		]]></xp:this.value>
	</xp:scriptBlock>

And it’s as easy as that !

In a Nutshell

The Input Mask code:

  • Adds the programmed “Mask” to the field as the page loads
  • Tracks what you type and how many characters you have added so far
  • Checks what you type and matches it against the allowable character list for that character at that position in the string
  • Updates the mask accordingly and moves past the “Mask” characters is applicable.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s