Phone Number Formatting

MM4_Dawn · February 24, 2014

I am having trouble on the javascript of a template and I am beginner in JS so I apologize if this is obvious and I am not seeing it.

The line I need to end up with is a gray and PMS red that looks like this:

office 123.456.7890 mobile 123.456.7890 fax 123.456.7890

I get the color results I want using a combination of Hide Phone Number Label Rule for the tag only and using Phone Format Rule for the number only. If I remove a number my spacing is off.

Is this the best way to do it? What JS do I need to remove the spacing between the numbers if they are not used?

Ideally, I would have this all under the hide phone number rule to display the phone number too but I don't know how to also handle splitting it up between two PMS colors and putting a rule on the phone number for periods between the numbers.

Does anyone have any suggestions?

Thank you!

Dawn

Dan Korn · February 24, 2014

It's hard to provide a specific solution without knowing more about the job, such as what your field names are, and what your rules are currently doing. Do you already have three separate versions of the Change Phone Format rule?

It's also not clear exactly what you mean by "my spacing is off." What spacing are you getting, and how is that different than what you're trying to achieve?

MM4_Dawn · February 25, 2014

I apologize for not being clear.

My data fields are: office, mobile and fax. Not all people have all 3.

When I talk about my spacing being off I have 5 spaces between office/mobile and 5 spaces between mobile/fax so if the user does not have a mobile it leaves 10 spaces between them when I only need 5.

I am using the the following rules:

-Office tag removed when no number is in the office field.

-Office number formatted to 000.000.0000 formatting.

-Mobile tag removed when no number is in the mobile field.

-Mobile number formatted to 000.000.0000 formatting.

-Fax tag removed when no number is in the fax field.

-Fax number formatted to 000.000.0000 formatting.

Now I started using the prebuilt rules in FusionPro but had to have the Mobile/Office/Fax tag edited so the number was not populated after the tag since I needed the number in a different PMS color and I needed the number formatted with the periods instead of dashes.

Does this make more sense now? Because I am doing it this way it does not remove the extra spacing between the fields if the user does not user one of the fields but I am not sure how to combine the tag rule, the number formatting rule and make the word "office" red and the "000.000.0000" gray in the formatting so it all works in harmony.

If this is still confusing I will send it through my BRM but I was hoping this would be simple.

Thank you for your help!

Dawn

step · February 25, 2014

Hi Dawn, I think the simplest thing would be to get rid of all of those rules and just have one rule to format that line of numbers for you. The code below contains an array of your numbers and labels. If a number is blank in the data, it removes it and its associated label from the array.

Then, it adds color tags around the labels and numbers (joining them with a single space) and formats the number using part of FP's format number rule which I've added as a function at the bottom of the rule (beneath the comment that says "do not edit below this line").

It then joins the entire array with 5 spaces as you've specified.

To make it work for you, create a blank rule and copy and paste the code into it. Edit the lines of code where I've instructed in the comments to reflect your field names and color names, and make sure you have "treat returned strings as tagged text" checked.

var redPMS = "Red"; // The name of the red color in your template (phone labels)
var blackPMS = "Black"; // The name of the black color in your template (numbers)
var officeField = Field("office"); // Replace with your field name
var mobileField = Field("mobile"); // Replace with your field name
var faxField = Field("fax"); // Replace with your field name

// Array of numbers and tags
var numbers = [["office",officeField],["mobile",mobileField],["fax",faxField]];

// Remove elements that don't have a phone number from the array
numbers = numbers.filter(function(s){return s[1];});

// Add color tags, format numbers, & add space between labels/numbers
for (var i=0; i<numbers.length; i++){
   numbers[i][0] = '<color name="'+ redPMS +'">' + numbers[i][0] + '</color>';
   numbers[i][1] = '<color name="'+ blackPMS +'">' + formatPhone(numbers[i][1]) + '</color>';
   numbers[i] = numbers[i].join(" ");
}

// Join with 5 spaces
return numbers.join("     ");





//===============================================================
//
// DON'T EDIT BELOW THIS LINE
//
//===============================================================


function formatPhone(num){
   var Var1 = num;

   var formatStyle01 = "$1.$2"; 			//simple 7 digit phone
   var formatStyle02 = "$1.$2.$3";			//simple 10 digit phone
   var formatStyle03 = "+$1 $2.$3.$4";		//10 digit phone starts with 1
   var formatStyle04 = "$1.$2.$3 ext.$4";		//10 digit phone with extension
   var formatStyle05 = "+$1 $2.$3.$4 ext.$5";	//10 digit phone starts with 1 with extension
   var formatStyle06 = "$1.$2 ext.$3";		//7 digit phone with extension

   var thisNumber = Var1;

   return formatNumber(Trim(thisNumber));

   function formatNumber(number01){

       var pattern01 = /^(\d{3})[^\d]*(\d{4})$/;   						
       var pattern02 = /^[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})$/;   				
       var pattern03 = /^\+?(\d{1})[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})$/;   			
       var pattern04 = /^[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;		
       var pattern05 = /^\+?(\d{1})[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;	
       var pattern06 = /^(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;   				
       var patternEndExt = /(.)[x#n](.)/;
       var patternStart1 = /^[\D]*[1]/;

       if(number01.match(pattern01)){
           number01 = number01.replace(pattern01, formatStyle01);
           return number01;
       } else if(number01.match(pattern02)){
           number01 = number01.replace(pattern02, formatStyle02);
           return number01;
       } else if(number01.match(pattern03)){
           if (number01.match(patternStart1)){
               number01 = number01.replace(pattern03, formatStyle03);
               return number01;
           } else {
               return number01;
           }
       } else if(number01.match(pattern04)){
               number01 = number01.replace(pattern04, formatStyle04);
               return number01; 
       } else if(number01.match(pattern05)){
               number01 = number01.replace(pattern05, formatStyle05);
               return number01;
       }  else if(number01.match(pattern06)){
               number01 = number01.replace(pattern06, formatStyle06);
               return number01;
       } else {
           return number01;
       }	
   }
}

MM4_Dawn · February 28, 2014

Thank you so much for your help!

Any chance you want to help me modify it for another?

I really need to learn my js better as my attempt at modifying was a fail.

My intentions are the same as the one above but it is 3 stacked numbers this time and the divider is in a different color:

p | 412.322.9280

d | 412.716.7668

m | 412.716.7668

If you have any recommended resources for JS classes let me know.

Thanks again,

Dawn

step · February 28, 2014

Try this:

var redPMS = "Red"; // The name of the red color in your template (phone labels)
var blackPMS = "Black"; // The name of the black color in your template (numbers)
var phone1 = Field("phone"); // Replace with your field name
var phone2 = Field("direct"); // Replace with your field name
var phone3 = Field("mobile"); // Replace with your field name
var label1 = "p";
var label2 = "d";
var label3 = "m";

// Array of numbers and labels
var numbers = [[label1,phone1],[label2,phone2],[label3,phone3]];

// Remove elements that don't have a phone number from the array
numbers = numbers.filter(function(s){return s[1];});

// Add color tags, format numbers, & add a pipe ( | ) between labels/numbers
for (var i=0; i<numbers.length; i++){
   numbers[i][0] = '<color name="'+ blackPMS +'">' + numbers[i][0] + '</color>';
   numbers[i][1] = '<color name="'+ blackPMS +'">' + formatPhone(numbers[i][1]) + '</color>';
   numbers[i] = numbers[i].join('<color name="'+ redPMS +'"> | </color>');
}

// Join with a line break
return numbers.join("<br>");





//===============================================================
//
// DON'T EDIT BELOW THIS LINE
//
//===============================================================


function formatPhone(num){
   var Var1 = num;

   var formatStyle01 = "$1.$2"; 			//simple 7 digit phone
   var formatStyle02 = "$1.$2.$3";			//simple 10 digit phone
   var formatStyle03 = "+$1 $2.$3.$4";		//10 digit phone starts with 1
   var formatStyle04 = "$1.$2.$3 ext.$4";		//10 digit phone with extension
   var formatStyle05 = "+$1 $2.$3.$4 ext.$5";	//10 digit phone starts with 1 with extension
   var formatStyle06 = "$1.$2 ext.$3";		//7 digit phone with extension

   var thisNumber = Var1;

   return formatNumber(Trim(thisNumber));

   function formatNumber(number01){

       var pattern01 = /^(\d{3})[^\d]*(\d{4})$/;   						
       var pattern02 = /^[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})$/;   				
       var pattern03 = /^\+?(\d{1})[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})$/;   			
       var pattern04 = /^[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;		
       var pattern05 = /^\+?(\d{1})[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;	
       var pattern06 = /^(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;   				
       var patternEndExt = /(.)[x#n](.)/;
       var patternStart1 = /^[\D]*[1]/;

       if(number01.match(pattern01)){
           number01 = number01.replace(pattern01, formatStyle01);
           return number01;
       } else if(number01.match(pattern02)){
           number01 = number01.replace(pattern02, formatStyle02);
           return number01;
       } else if(number01.match(pattern03)){
           if (number01.match(patternStart1)){
               number01 = number01.replace(pattern03, formatStyle03);
               return number01;
           } else {
               return number01;
           }
       } else if(number01.match(pattern04)){
               number01 = number01.replace(pattern04, formatStyle04);
               return number01; 
       } else if(number01.match(pattern05)){
               number01 = number01.replace(pattern05, formatStyle05);
               return number01;
       }  else if(number01.match(pattern06)){
               number01 = number01.replace(pattern06, formatStyle06);
               return number01;
       } else {
           return number01;
       }	
   }
}

MM4_Dawn · March 5, 2014

Thank you so much for your help. Both have worked like a charm and I have been able to manipulate them for most of my needs.

I have one that the spacing is showing correctly in the validate but not in the preview. Can anyone spot what error I am making for this to not show correctly?

It should be two spaces between the telephone, fax and mobile like this:

T 000_000_0000 F 000_000_0000 M 000_000_0000

But it is showing instead like:

T 000_000_0000F 000_000_0000M 000_000_0000

Here is the code I am using:

var telField = Field("telephone"); // Replace with your field name

var faxField = Field("fax"); // Replace with your field name

var mobileField = Field("mobile"); // Replace with your field name



// Array of numbers and tags

var numbers = [["T ",telField],["F ",faxField],["M ",mobileField]];



// Remove elements that don't have a phone number from the array

numbers = numbers.filter(function(s){return s[1];});



// Add color tags, format numbers, & add space between labels/numbers

for (var i=0; i<numbers.length; i++){

   numbers[i][0] = '<f name="Akzidenz-Grotesk Std Med">' + numbers[i][0] + '</f>';

   numbers[i][1] = '<f name="Akzidenz-Grotesk Std Light">' + formatPhone(numbers[i][1]) + '</f>';

   numbers[i] = numbers[i].join(" ");

}



// Join with 2 spaces

return numbers.join("  ");











//===============================================================

//

// DON'T EDIT BELOW THIS LINE

//

//===============================================================





function formatPhone(num){

   var Var1 = num;



   var formatStyle01 = "$1_$2"; 			//simple 7 digit phone

   var formatStyle02 = "$1_$2_$3";			//simple 10 digit phone

   var formatStyle03 = "+$1 $2_$3_$4";		//10 digit phone starts with 1

   var formatStyle04 = "$1_$2_$3 ext.$4";		//10 digit phone with extension

   var formatStyle05 = "+$1 $2_$3_$4 ext.$5";	//10 digit phone starts with 1 with extension

   var formatStyle06 = "$1_$2 ext.$3";		//7 digit phone with extension



   var thisNumber = Var1;



   return formatNumber(Trim(thisNumber));



   function formatNumber(number01){



       var pattern01 = /^(\d{3})[^\d]*(\d{4})$/;   						

       var pattern02 = /^[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})$/;   				

       var pattern03 = /^\+?(\d{1})[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})$/;   			

       var pattern04 = /^[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;		

       var pattern05 = /^\+?(\d{1})[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;	

       var pattern06 = /^(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;   				

       var patternEndExt = /(.)[x#n](.)/;

       var patternStart1 = /^[\D]*[1]/;



       if(number01.match(pattern01)){

           number01 = number01.replace(pattern01, formatStyle01);

           return number01;

       } else if(number01.match(pattern02)){

           number01 = number01.replace(pattern02, formatStyle02);

           return number01;

       } else if(number01.match(pattern03)){

           if (number01.match(patternStart1)){

               number01 = number01.replace(pattern03, formatStyle03);

               return number01;

           } else {

               return number01;

           }

       } else if(number01.match(pattern04)){

               number01 = number01.replace(pattern04, formatStyle04);

               return number01; 

       } else if(number01.match(pattern05)){

               number01 = number01.replace(pattern05, formatStyle05);

               return number01;

       }  else if(number01.match(pattern06)){

               number01 = number01.replace(pattern06, formatStyle06);

               return number01;

       } else {

           return number01;

       }	

   }

}

David Miller · March 5, 2014

It looks like your space characters are collapsing. Try replacing the literal space characters with non-breaking space entities. They are shown in red below.

var telField = Field("telephone"); // Replace with your field name

var faxField = Field("fax"); // Replace with your field name

var mobileField = Field("mobile"); // Replace with your field name



// Array of numbers and tags

var numbers = [["T ",telField],["F ",faxField],["M ",mobileField]];



// Remove elements that don't have a phone number from the array

numbers = numbers.filter(function(s){return s[1];});



// Add color tags, format numbers, & add space between labels/numbers

for (var i=0; i<numbers.length; i++){

   numbers[i][0] = '<f name="Akzidenz-Grotesk Std Med">' + numbers[i][0] + '</f>';

   numbers[i][1] = '<f name="Akzidenz-Grotesk Std Light">' + formatPhone(numbers[i][1]) + '</f>';

   numbers[i] = numbers[i].join(" ");

}



// Join with 2 spaces

return numbers.join("[color="Red"]  [/color]");











//===============================================================

//

// DON'T EDIT BELOW THIS LINE

//

//===============================================================





function formatPhone(num){

   var Var1 = num;



   var formatStyle01 = "$1_$2"; 			//simple 7 digit phone

   var formatStyle02 = "$1_$2_$3";			//simple 10 digit phone

   var formatStyle03 = "+$1 $2_$3_$4";		//10 digit phone starts with 1

   var formatStyle04 = "$1_$2_$3 ext.$4";		//10 digit phone with extension

   var formatStyle05 = "+$1 $2_$3_$4 ext.$5";	//10 digit phone starts with 1 with extension

   var formatStyle06 = "$1_$2 ext.$3";		//7 digit phone with extension



   var thisNumber = Var1;



   return formatNumber(Trim(thisNumber));



   function formatNumber(number01){



       var pattern01 = /^(\d{3})[^\d]*(\d{4})$/;   						

       var pattern02 = /^[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})$/;   				

       var pattern03 = /^\+?(\d{1})[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})$/;   			

       var pattern04 = /^[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;		

       var pattern05 = /^\+?(\d{1})[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;	

       var pattern06 = /^(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;   				

       var patternEndExt = /(.)[x#n](.)/;

       var patternStart1 = /^[\D]*[1]/;



       if(number01.match(pattern01)){

           number01 = number01.replace(pattern01, formatStyle01);

           return number01;

       } else if(number01.match(pattern02)){

           number01 = number01.replace(pattern02, formatStyle02);

           return number01;

       } else if(number01.match(pattern03)){

           if (number01.match(patternStart1)){

               number01 = number01.replace(pattern03, formatStyle03);

               return number01;

           } else {

               return number01;

           }

       } else if(number01.match(pattern04)){

               number01 = number01.replace(pattern04, formatStyle04);

               return number01; 

       } else if(number01.match(pattern05)){

               number01 = number01.replace(pattern05, formatStyle05);

               return number01;

       }  else if(number01.match(pattern06)){

               number01 = number01.replace(pattern06, formatStyle06);

               return number01;

       } else {

           return number01;

       }	

   }

}

If spacing is critical, you can experiment with different combinations of space entities listed on pages 72-76 in the FusionPro Tags Reference Guide. You could also try tracking the space entities in the code above.

MM4_Dawn · March 5, 2014

David,

Thank you for the quick reply and for the reference pages. What you suggested solved the spacing issue. Once I get more fluent I will pay the favor back in helping others. Thank you again for the help!

Dawn

Sign In

Phone Number Formatting

Recommended Posts

MM4_Dawn

Link to comment

Share on other sites

Dan Korn

Link to comment

Share on other sites

MM4_Dawn

Link to comment

Share on other sites

step

Link to comment

Share on other sites

MM4_Dawn

Link to comment

Share on other sites

step

Link to comment

Share on other sites

MM4_Dawn

Link to comment

Share on other sites

David Miller

Link to comment

Share on other sites

MM4_Dawn

Link to comment

Share on other sites

Join the conversation

Community

Activity

FusionPro.com