Enabling formatting for phone number fields

You can enable formatting for phone number fields to control the data while performing a search for customers using phone number as the criteria.

1. Create a formatter to implement custom formatting for phone numbers and add it to the extn/utils directory, where extn maps to <runtime>/extensions/wsc/webpages/. The directory path is required during registration. The following code snippet defines a formatter:

   scDefine(["scbase/loader!dojo/_base/declare" , 
             "scbase/loader!sc/plat/dojo/app/IFormatter"
             ], 
       function(dDeclare, scIFormatter ){
   			
   		var scPhoneNoFormatterType = dDeclare("extn.utils.PhoneNoFormatterType", [scIFormatter],{
    
   			format: function(type, input) {
   			 	var val = this.removeNonDigitCharacters(input);
   			 	if(val.length != 9 ) return val;
   			 	return "(" + val.substring(0,2) + ")" +
   			 			val.substring(2,4)+"-"+val.substring(4,9);
   			},
   			deformat: function(type, input) {
   				 return this.removeNonDigitCharacters(input);
   			},
   			removeNonDigitCharacters: function(input) {
   				 return input.replace(/[^0-9]/g,"");
   			}	
   		});
   
   		return scPhoneNoFormatterType;
   });

   Here, the formatter method is used to extend the IFormatter interface.
2. Register the formatter against a "formatter type" in a file that is loaded when the application initializes. For example, in container.jsp or the home page extension. You must ensure that the registration is done before the formatter is used in the screens.
   The "formatter type" is the name of the custom formatter. In this example, the "phoneNoFormatter" is the "formatter type". The following sample code snippet demonstrates how to register the formatter.

   scDefine([ ... "scbase/loader!sc/plat/dojo/app/FormatterUtils", "scbase/loader!extn/utils/PhoneNoFormatterType"],
   function(.... ,scFormatterUtils, scPhoneNoFormatterType) {.. scFormatterUtils.registerFormatter("phoneNoFormatter",
   new scPhoneNoFormatterType(), 1);... });

3. Using the IBM Extensibility Workbench, add the formatter name attribute for the Textboxes and Data Labels in the Others tab of the Properties panel. In this example, the formatter name is phoneNoFormatter, which is the formatter type registered in Step 2.
4. Build and deploy the WAR, restart the server, and clear browser cache.