Phone Field Renderer

  • 1
  • Question
  • Updated 5 years ago
  • Answered
I am trying to make a phone renderer like the built in one for SF and I need some help to make it work fully. I have the below snippet that works but only when the field editor is Read-withInlineEditing and it does not work when the Field Editor is just Edit mode. I need to get that fixed but also, How can I make the transformed text be what is actually saved and not what was actually typed in? Ex. I type in Phone # 123-4567777 and that gets saved I want it to actually save as (123) 456-7777

Here is my Field Renderer code that works on InlineEdit only and only transforms the view of the field not the saving of the data:

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

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

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

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb
Thats where I got my starting snippet above, that piece works great but I need it to actually save the modified String Value and it would be nice if it worked in Edit Mode as well. Ideas?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
OK before the fieldRenderers line, add the following line:

field.model.updateRow(field.row,'Your_Custom_Field__c',stringValue,{initiatorId: field._GUID});
(Edited)
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb
Is there a way for it to get the Custom field name from field.? I would then have to make copies of the whole snippet for each phone field I need to use this for then?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
Try:

console.log(field);

and see if you find the API name in there somewhere...
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb
I tried this but it is not working, the page won't display when I add this. I would like to either strip all characters and save that value so if the user enters 111-444-5555 it saves 1114445555 and renders (111) 444-5555

I tried just putting in my custom field name manually and it still does do anything the page wont load using this?

field.model.updateRow(field.row,'Your_Custom_Field__c',stringValue,{initiatorId: field._GUID});
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
Can you post your full snippet here? 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb
var phonefield = arguments[0],    phonevalue = arguments[1];
// use substring to get at the values...

if(phonevalue !== null){
     var origstringValue = phonevalue.toString();
     var stringValue = origstringValue.replace("-", "");
     stringValue = stringValue.replace("(", "");
     stringValue = stringValue.replace(")", "");
     stringValue = stringValue.replace(" ", "");
     stringValue = '(' + stringValue.substring(0,3) + ')' + ' ' + stringValue.substring(3,6) + '-' + stringValue.substring(6,10);
     if (stringValue == '() -'){
         stringValue = '';
     }
}
field.model.updateRow(field.row,'PersonMobilePhone',stringValue,{initiatorId: field._GUID});
skuid.ui.fieldRenderers[phonefield.metadata.displaytype][phonefield.mode](phonefield,stringValue);
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
Try replacing this line:
field.model.updateRow(field.row,'PersonMobilePhone',stringValue,{initiatorId: field._GUID});
with this:
field.model.updateRow(field.row,'PersonMobilePhone',phonevalue,{initiatorId: field._GUID});
Also, I'm assuming that the API name of "PersonMobilePhone" is correct and it's not "Person_Mobile_Phone__c" or something. Out of curiosity what type of field is PersonPhoneMobile?
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb
its a standard field in SF for PersonContact, I also tried another custom phone field.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
So basically it's a standard "Phone" field, I think that's a number field so it should be able to be saved. Did you try adjusting the snippet as I suggested above?
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb
Yea it does the same thing. the page doesn't load at all.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
I see what you're issue was... try this instead:

var field = arguments[0],    phonevalue = arguments[1];// use substring to get at the values...
if(phonevalue !== null){
     var origstringValue = phonevalue.toString();
     var stringValue = origstringValue.replace("-", "");
     stringValue = stringValue.replace("(", "");
     stringValue = stringValue.replace(")", "");
     stringValue = stringValue.replace(" ", "");
     stringValue = '(' + stringValue.substring(0,3) + ')' + ' ' + stringValue.substring(3,6) + '-' + stringValue.substring(6,10);
     if (stringValue == '() -'){
         stringValue = '';
     }
}
field.model.updateRow(field.row,'PersonMobilePhone',stringValue,{initiatorId: field._GUID});
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,stringValue);
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
Basically you changed the first variable to "phonefield" but the rest of the snippet was assuming it was named "field". If you open the Javascript console (Ctrl + Shift + J in Chrome) you'll probably see an error like "field is undefined" or something. I just changed it back to "field" instead of "phonefield". 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb
ok, I tried this, still not working. The page wont load still. I looked in Ctrl+Shift+J in Chrome and it doesn't show anything that I can tell from the snippet, maybe I am not looking in the right place.
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb
ok, I tried this, still not working. The page wont load still. I looked in Ctrl+Shift+J in Chrome and it doesn't show anything that I can tell from the snippet, maybe I am not looking in the right place.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
Must be another issue then... If you don't see any errors in the console then I can't explain it.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,968 Points 20k badge 2x thumb
Jarrod, you might want to back up to square one.  Get all the custom javascript out of your page and then make sure it loads.  After you have success there - then start adding resources back  one at a time.  When it breaks - you know you have a culprit. 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb
as soon as i comment out this line the page works fine. Except my phone field value doesn't get updated.

field.model.updateRow(field.row,'PersonMobilePhone',stringValue,{initiatorId: field._GUID});
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb
as soon as i comment out this line the page works fine. Except my phone field value doesn't get updated.

field.model.updateRow(field.row,'PersonMobilePhone',stringValue,{initiatorId: field._GUID});