Format phone number using custom field renderer snippet

You could include the jQuery mask plugin http://igorescobar.github.io/jQuery-Mask-Plugin/

And then give your field a class “phone” for example.

Then in an inline JS initialize it there with $(‘.phone input’).mask(‘(000) 000-0000’);

Ok great, thanks Thimo. I guess the main question I have from that is how do I “include” the jQuery mask plugin. Do I have to download it from that site and then upload it as a component pack?

You can download it and upload it to the static resources.

Then you can link it in your skuid page.

Hi Dave,

The following post may also be of use to go through.

https://community.skuid.com/t/re-format-a-phone-number-using-custom-field-renderer

Ok thanks Thimo. Here is where I am at right now. I hav e downloaded the ogrescobar jQuery Mask Plugin and uploaded the .zip as a static resource with public caching. I have then added the static resource to skuid and referenced the “jquery.inputmask.bundle.js” in the file path that skuid asks for. I then created a new inline (Snippet) called “newSnippet2” and used $(‘.phone input’).mask(‘(000) 000-0000’) in the snippet body. Then in a field editor, I have added the Account Phone field and used the css class “phone”. When I try to open that page, it does not load. Any idea where I might be going wrong here. Screenshots attached. Thanks as always. Dave

I also attempted the inline JS code to read: $(‘.phone’).mask(‘(000) 000-0000’) That did not work either unfortunately

Have you tried an inline-JS that looks like this?

(function(skuid){ var $ = skuid.$;<br> $(document.body).one('pageload',function(){<br> &nbsp; &nbsp;&nbsp;$('.phone input').mask('(000) 000-0000');<br> });<br>})(skuid);

.phone input –> because the phone class gets added to a wrapper around the field in a field editor and not the input element directly. And inline-JS that it gets loaded on pageload.

Do you have any errors in the console?