Usability Enhancement: Phone Formatting

[Angel]

Hello Everyone,

Attached is a mod I made which applies formatting to phone numbers (office, home, fax, etc.) as they are entered while user is creating/editing a contact or account. To use it, simply apply the modifications and then add or modify a phone value on a new or existing contact/account. The changes should take effect as you move from one field to the next.

NOTE: This is for US phone formats only.

INSTALLATION:

Replace EditView.html in the modules/Contacts and modules/Accounts directories with the respective updated copy from the zip file after renaming to "EditView.html". i.e. Replace modules/Contacts/EditView.html with EditView (Contacts).html from zip file and modules/Accounts/EditView.html with EditView (Accounts).html.

EXAMPLES:
User input: 310.555.1212
Result: (310)555-1212

User input: 310-555-1212
Result: (310)555-1212

User input: (310.5*5-5.12-12
Result: (310)555-1212

NOTE: Anything after the 10th digit is assumed to be an extension, see example below:

User input: 310.555.1212 111
Result: (310)555-1212 Ext: 111

If you prefer a different result, the Javascript can be modified fairly easily to accommodate it.

Also, if you find an input pattern that is not accounted for, let me know and I'll try to include it.

Enjoy!

Regards,

Angel Magaña

[sfeather]

Angel,

Nice work. And, I might mention, the perfect and applicable use for client side Javascript.
One minor addition to your code, if I might.

function fmt(num, id) {
        var phone = num;
        if (phone != "") {
             phone = phone.replace(/\s|\(|\-|\)|\.|x|:|\*/g, "");
             area = "(" + phone.substr(0,3) + ") ";
             pre = phone.substr(3,3) + "-";
             main = phone.substr(6,4);
                  if (phone.length > 10) {
                     ext = " Ext: " + phone.substr(10);
                     phone = area + pre + main + ext;
                     } else {
                             phone = area + pre + main;
                             }
             document.getElementById(id).value = phone; 
        } else {
             document.getElementByID(id).value = num; }
}

The additional if/else evaluation keeps us from putting extra chars in fields that were originally empty when we tab through the form. Also placed an extra space after the closing parenthese, cleans it up a smidge as well.


-----------------------

[Angel]

Sfeather,

Thanks for your feedback. Glad I could be of assistance.

Thanks for catching the issue with the empty fields. We must have noticed it simultaneously. I implemented a fix as well, files are attached for anyone that wants them.

Regards,

Angel Magaña

[Scooter]

This sounds like a routine that I remember using with Salesforce.com. It should be very beneficial. I just added the script as you have it to my /accounts/editview.html and /contacts/editview.html files. But it does not appear to be working.

I click on the contacts tab. ( or simple click on create contact)
I type in the info about the contact.
I type in the Office Phone number like this 3135551212

But it does not change.

Am I doing something wrong?

Thanks

[Angel]

The HTML is modified as well. Take a look at the HTML files in the Zip file. You'll need to incorporate the onBlur event handler in order to invoke the Javascript function, or use the HTML files in the Zip.

HTH,

Angel Magaña

[Scooter]

Works!! Thanks. I like it!

Hey, I have another question I posed (in an earlier thread) about changing the "Advanced Search". Do you know how to do that? That is, show a custom field to search?..
Thanks

[siersema]

Does not seem to work with 3.5? Also noticed that you did the accounts, contacts but missed employees, users and prospects and leads files. Also not sure, I tried modifying the code but the Skype module needs the phone number with a +1 in front. Can someone help???

[sfeather]

Does not seem to work with 3.5? Also noticed that you did the accounts, contacts but missed employees, users and prospects and leads files. Also not sure, I tried modifying the code but the Skype module needs the phone number with a +1 in front. Can someone help???

You also have to identify the object in the code in addition to the onblur event.
Add the ID reference in your html.

[siersema]

You also have to identify the object in the code in addition to the onblur event.
Add the ID reference in your html.

I am not the strongest coder and manage to hack some things. I copied the Java script code from the first released files into the 3.5 EditView.html. I added the onblur event to each of the fields. Does not display anything at all. Reverted back to original. Tried placing the java script in different locations and the complete page shows. Put java code inside the other script code, also without it working. Does not seem to work for 3.5 as far as I can tell.

Could you provide a working example of the page with ID included? Once I see what you have done, I can replicate.

[Angel]

I am not the strongest coder and manage to hack some things. I copied the Java script code from the first released files into the 3.5 EditView.html. I added the onblur event to each of the fields. Does not display anything at all. Reverted back to original. Tried placing the java script in different locations and the complete page shows. Put java code inside the other script code, also without it working. Does not seem to work for 3.5 as far as I can tell.

Could you provide a working example of the page with ID included? Once I see what you have done, I can replicate.

I tried it in 3.5 and it works fine.

As for a working example, use the EditView.html files in the zip.

All I did to get it to work in 3.5 was replace Accounts/EditView.html with EditView (Accounts).html from the zip and Contacts/EditView.html with EditView (Contacts).html.

HTH,

Angel Magaña