Re-format a phone number using custom field renderer?

  • 2
  • Question
  • Updated 5 months ago
  • Answered
Hello Skuid Community!

Is it possible to create a field renderer that will re-format a number as a phone number?  

i.e., user enters a 10-digit number (preferably either 0000000000 or 000-000-0000) and Skuid reformats as (000) 000-0000.  

Thanks for the help.
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb

Posted 4 years ago

  • 2
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Something like this would work...

var params = arguments[0],value = arguments[1],$ = skuid.$;// use substring to get at the values...
if(value != null){
value = '(' + value.substring(0,3) + ')' + value.substring(3,6) + '-' + value.substring(6,10);
}
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
You might have to turn value into a string like this...

var params = arguments[0],value = arguments[1],$ = skuid.$;// use substring to get at the values...
if(value != null){
var stringValue = value.toString();
stringValue = '(' + value.substring(0,3) + ')' + value.substring(3,6) + '-' + value.substring(6,10);
}
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,stringValue);
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
Modified just slightly, and it works perfectly now: 

var field = arguments[0],   
value = arguments[1];
    
// use substring to get at the values...

if(value !== null){
     var stringValue = value.toString();
     stringValue = '(' + value.substring(0,3) + ')' + ' ' + value.substring(3,6) + '-' + value.substring(6,10);
}

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,stringValue);
Photo of Tom Scalzo

Tom Scalzo

  • 264 Points 250 badge 2x thumb
I've altered this slightly to strip out any bad formatting that may display additional "(, ), or -".  This would only be for 10 digit numbers.

var field = arguments[0],    value = arguments[1];

if(value !== null){
     // strip non-numeric characters...
     value = value.replace(/\D/g,'');
     if(value.length == 10) {
         // use substring to get at the values...
         var stringValue = value.toString();
         stringValue = '(' + value.substring(0,3) + ')' + ' ' + value.substring(3,6) + '-' + value.substring(6,10);
         console.log(value);
         console.log(stringValue);
     } 
}
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,stringValue);
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
here's a version with 7 or 10 digit numbers:

if (value) {
     //set length functions
    var lengthFunctions = {
    7 : function(v){
    return v.slice(0,3) + '-' + v.slice(3);
    },
    10 : function(v){
    return '(' + v.slice(0,3) + ')' + ' ' + v.slice(3,6) + '-' + v.slice(6);
    }
    };
    // strip non-numeric characters...
    var digits = value.replace(/\D/g,'');
   
    // get formatted text
    value = lengthFunctions[digits.length] ? lengthFunctions[digits.length](digits) : value; 
}
skuid.ui.fieldRenderers.TEXT[field.mode](field,value);
Photo of Tom Scalzo

Tom Scalzo

  • 264 Points 250 badge 2x thumb
Excellent! Now I'm inspired to insert the international format into this script :-).
So, anyone have luck saving this reformat back into the Database?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
if you want to save the reformatted value, just add this inside the end of the if{}:

field.model.updateRow(field.row, field.id, value, {initiatorId: field._GUID});
Photo of shrt fnn

shrt fnn

  • 92 Points 75 badge 2x thumb
Hello im new to javascripting and would like to know how I can validate 10 digit and 11 digit phone numbers and if 11 digits phone number ....add international phone numbers format using (+12345678901).
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
You can check for the length of the field before you parse it, if you'd like:

if(stringValue.length == 11) {
  // Process number slightly differently
}
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Is it possible to get it do this on the fly as you are entering the numbers into the field, or will it work only after saving?
Photo of Mordechai

Mordechai

  • 968 Points 500 badge 2x thumb
yes, you can, after calling "skuid.ui.fieldRenderers..." add code for formatting as such:

skuid.$("input", field.element).on("keyup", function()
{
//place custom formatting code here
});
Photo of Ankur Jain

Ankur Jain

  • 192 Points 100 badge 2x thumb


Hi,
Thanks for reviewing this, I corrected the mistake, but it has given me another set of error.
The page loads, but does not render anything and in console is giving me the following error.

To clarify, I have downloaded the entire folder in zip from - https://github.com/RobinHerbots/Inputmask
& uploaded as Static resource.

Do I have to upload individual JS file and refer the same ?


Regards,
Ankur Jain
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Ankur, you just need to tell skuid the path to the js file you need from the zip.
In this case I think dist/jquery.inputmask.bundle.js is what you need.
Photo of Ankur Jain

Ankur Jain

  • 192 Points 100 badge 2x thumb
Hi Matt, You are The Champion :-)  Related image

It works .. 

Can you please also let me know how to convert it into a custom renderer, As right now it is over riding all the Phone fields on my SKUID Page. 

What If I have to apply only to a few specific fields as custom renderer ?

I see that the current code it takes in all the phone renderers for Phone,

var PHONE = skuid.ui.fieldRenderers.PHONE;

How shall i apply only to specific ones ?

Regards,
Ankur
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
The field renderer is just the part inside the customPhoneFieldRenderer function. Instead of the inline code, you can add an inline snippet like this:

var $ = skuid.$,
	field = arguments[0],
value = skuid.utils.decodeHTML(arguments[1]); //Render the field as TEXT
skuid.ui.fieldRenderers.TEXT[field.mode](field,value); //Apply the mask
$("input", field.element).inputmask({
"mask": ["999-9999","(999) 999-9999[ x9{1,5}]"],
"greedy": false
});
Then use that snippet as a custom renderer on each field.
Photo of Ankur Jain

Ankur Jain

  • 192 Points 100 badge 2x thumb


Hi Matt,

I am getting another set of error, when I am rendering this page on Communities.

This is primarily because the Javascript doesnt gets loaded on the communities page from the Static resource where I have uploaded the Inputmask JS.

Can you suggest, how to make sure that the javascript gets loaded in the communities page so that this custom renderer works with this error.

Regards,
Ankur