ssn masking

A few things that others here in the community have taught me.

1. Use the console in the browser. In Chrome, you can open it by hotkey Ctrl + Shift + J.
   
2. Use the console.log in your javascript to see what is the value of what you put in the log. ie. console.log(firstthree)
3. Open the Source tab once in the console. In there you will find the code you’ve written. You can set breakpoints and watched expressions to see what is going on with the code. There are plenty of tutorials on this on youtube. Search “debug javascript in Chrome”.
   

You want you’re snippet to be of type “Inline snippet” not “Inline”. It should also be linked to the SSN field that you’re trying to render differently. This should be all you need:

var field = arguments[0];<br>var ssn = arguments[1];<br>var firstthree=ssn.substring(1,3);<br>var midtwo=ssn.substring(4,5);<br>var lastfour=ssn.substring(6,9);<br>var text= firstthree + "-" + midtwo + "-" + lastfour;<br>skuid.ui.fieldRenderers.TEXT[field.mode](field, text);

Hi Moshe,

As you told i have tried below code

(function(skuid)
{
var $ = skuid.$;
$(function(){
    var params = arguments[0];
    var ssn = arguments[1];
    var firstthree=ssn.substring(1,3);
var midtwo=ssn.substring(4,5);
var lastfour=ssn.substring(6,9);
var text= firstthree + “-” + midtwo + “-” + lastfour;
skuid.ui.fieldRenderers.TEXT[field.mode](field, text);
});

})(skuid);



i am getting error  as  cannot read property ‘substring’ of undefined. I believe SSN value is not copying from arguments[1]. What could be the error

You have your code wrapped in an anonymous function, so you’re not getting any arguments in your function. You should write it as I did above, you need to remove this part :

(function(skuid){<br>...<br>})(skuid); 

Hi Moshe,

As you told i have removed anonymous function code and executed with the below code. 

var $ = skuid.$;
$(function(){
    var params = arguments[0];
    var ssn = arguments[1];
    var firstthree=ssn.substring(1,3);
    var midtwo=ssn.substring(4,5);
    var lastfour=ssn.substring(6,9);
    var text= firstthree + “-” + midtwo + “-” + lastfour;
    skuid.ui.fieldRenderers.TEXT[field.mode](field, text);
});


I am getting error as ‘cannot read property ‘substring’ of undefined’

Then i removed function tried with the below code

var $ = skuid.$;var params = arguments[0];
var ssn = arguments[1];
var firstthree=ssn.substring(1,3);
var midtwo=ssn.substring(4,5);
var lastfour=ssn.substring(6,9);
var text= firstthree + “-” + midtwo + “-” + lastfour;
skuid.ui.fieldRenderers.TEXT[field.mode](field, text);


still i am getting error as  ‘cannot read property ‘substring’ of undefined’.

Arjun,

How are you calling your snippet? On the ssn field in the skuid page editor, you need to choose “custom renderer” instead of standard. Then type the name of your javascript inline snippet.

See Pat’s response above for help debugging.

Hi Jim,

I am calling it as custom snippet only. I used below code for debugging.

var $ = skuid.$;
var params = arguments[0];
var ssn = arguments[1];
console.log(arguments[1]); // Inspect element debug displays as not available.
console.log(ssn);  // ssn also not available

var firstthree=ssn.substring(1,3);
var midtwo=ssn.substring(4,5);
var lastfour=ssn.substring(6,9);
var text= firstthree + “-” + midtwo + “-” + lastfour;
console.log(text);  // returning null value
skuid.ui.fieldRenderers.TEXT[field.mode](field, text);

Just change the last line to :

skuid.ui.fieldRenderers.TEXT[params.mode](params, text);

Hi Moshe,

I have changed last line, but still there is no ssn masking.
So i debugged it, still i am getting error at the below line

var firstthree=ssn.substring(1,3); // Cannot read property ‘substring’ of undefined

Arjun,

The problem is that you’re getting var ssn = arguments[1] is undefined.

Somehow, the arguments are not getting passed to your snippet.

Did you change the Resource Location from ‘inline’ to ‘inline snippet’?

Your last screenshot doesn’t agree with what you’re telling me…

Moshe is right!

You’re also not doing the substring correctly, check out this fiddle: http://jsfiddle.net/the5xvfg/

Jim:   Yes i changed Resource Location to ‘Inline Snippet’.

Moshe,

Sorry, i have attached previous error screenshot, here is the actual screen shot for what i am talking. Could you please look at watch expressions window.

OK I believe I said this a couple of times already, you have to get rid of the

$(function 

line, you had it right before. If you just replace your whole snippet with this:

var field = arguments[0];

var ssn = arguments[1];<br>var firstthree=ssn.substring(0,3);<br>var midtwo=ssn.substring(3,5);<br>var lastfour=ssn.substring(6,10);<br>var text= firstthree + "-" + midtwo + "-" + lastfour;<br>skuid.ui.fieldRenderers.TEXT[field.mode](field, text); 

It will work!

Moshe,

As you suggested i have removed 

$(function

and tried with the below code. It didn’t work. 

var $ = skuid.$;
var params = arguments[0];
var ssn = arguments[1];
var firstthree=ssn.substring(1,3);
var midtwo=ssn.substring(4,5);
var lastfour=ssn.substring(6,9);
var text= firstthree + “-” + midtwo + “-” + lastfour;
skuid.ui.fieldRenderers.TEXT[field.mode](field, text);

The error is in the below line

var params = arguments[0]; // error
var field = arguments[0]; // correct

we have to get arguments[0] to field, not to params. This has solved my problem.
Thank you so much for your help.

Yup.  The field in the fieldRenderers line would be undefined if the variable you defined above was named “params”   Glad you got this working.   And than you Jim and Moshe for your help with this question…