Mask Help

1

Any suggestions for creating masks? For example, formatting a phone number to display as (XXX) XXX-XXXX? Seems like a feature that a lot of people would make use of here, but I don’t find a lot of information about it.

2

Here’s the code that I have so far. “phone2” is the Field Code.

What I want is for us to be able to save telephone numbers as ten-digit strings that get masked to include the () - characters (so, we save the data as 5551234567, but it displays as (555) 123-4567).

(function() {
"use strict";

kintone.app.getFieldElements('phone2').kintone.events.on('app.record.detail.show', function () {
var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

if( last.length == 3 ) {
var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
var lastfour = move + last;

var first = $(this).val().substr( 0, 9 );

$(this).val( first + '-' + lastfour );
}
})
})();
3

Hello James,

After reviewing your code, I noticed that you might have an error at the following function.

kintone.app.getFieldElements('phone2').kintone.events.on

I don’t think you can add an event in the properties of the getFieldElements function.

Also, getFieldElements function with “s” at the end can be only available at the record list page. Therefore, you can use “kintone.app.record.getFieldElement” for “app.record.detail.show”(the record details page) instead.

▼ kintone.app.getFieldElements
https://developer.kintone.io/hc/en-us/articles/213148937-Get-Record-List

▼ kintone.app.record.getFieldElement
https://developer.kintone.io/hc/en-us/articles/213148957-Get-Record#record_getFieldElement

At my Kintone app, I was able to format a string as a phone number using regular expressions as the code below.

(function() {
"use strict";

kintone.events.on(['app.record.detail.show'], function (event) {

var wEle = kintone.app.record.getFieldElement('phone2');
var wRecord = event.record;

var wStr = wRecord.phone2.value;

wStr = wStr.replace(/(\d{3})(\d{3})(\d)/, "($1)$2-$3");

wEle.innerText = wStr;

return event;
});

})();

The only concern I have at the above sample code is that if you use a link field with Telephone Number type setting for “phone2” field and want to leave the link feature as is, you might want to revise a value to set to “wEle.innerText” somehow. In the case, I do not think the API can be used, so you might want to check out how to do it.

▼ Link at Field Type Descriptions
https://get.kintone.help/k/en/user/app_settings/form/form_parts/link.html

Hope it helps.

Thank you.

Junko

4

That totally works! Wow! Thanks!

My JS is a bit rusty, please forgive me :slight_smile:

No real need for the Telephone Number type setting for this. COol feature, but not one we need at this point.

Appreciate all the help!