Phone Number Mask on Query

[Jhstephenson]

I have a phone # attribute in one of my BO's. On the Main form I have the presentation set to mask it to look just like an American phone number "(999) 000-0000", but I am not storing the mask as part of the attribute.

That is working just fine.

Now when I put that phone number attribute on a query I cannot get it to display it with the phone number mask.

Is there some trick to doing that?

I have tried putting a format of (999) 000-0000 in the Display Format for the Column Settings and unchecking the "Use style defined in the attributes...." setting, but that does nothing.

I have defined a presentation rule in the attribute settings, but that does nothing.

What am I missing?

Thanks,
Jim

[Jaymer]

Jim
magic was much easier to format #s for display, so in Magic I'd always store the raw 10-digits.

In Aware, I've changed to always store it WITH the dashes/formatting. I generally use (813) 555-1212
No downside.
Plenty of upside.

J

[Jhstephenson]

Yeah, I know, Jaymer.

We have had that discussion here in the office.

The only problem is that in this particular application we are actually moving data back and forth between a Magic App and this Aware App. So, I need to keep it as generic as possible.

Jim

[Jaymer]

well, strike 1 for me.

i've done what you're trying to do regularly on datetime fields and the format changes correctly.
But I just spent 20 mins on this text field and can't waste anymore. Too frustrating.

A Numeric column will respect a manually typed in Display Format.
but a Plain Text column will ignore the Display Format - as we both have now proven on a phone # format.
Probably because what we are used to using like "000-000-0000" is not really a display format, but like it says, an input mask.
So its for an input field only.

So, I'd create a 2nd field for display and use that.
Or, use the annoying "calulated field in a grid" which has always seemed dodgy. And you can't filter on it.

J

[customaware]

Make sure the Attribute is min 20 characters long otherwise it won't work.

[Jhstephenson]

Mark, it is already set to 20 characters.

Jaymer, the storage miser in me just doesn't want to create a duplicate field just to handle something like this. And to be honest something like that should never be necessary.

[PointsWell]

This is a pain especially if a user thinks they have keyed in in the correct format but then the mask is stripped in queries.

This was raised this as a feature request here https://awareim.com/forum/viewtopic.php?p=53724#p53724

Saving the mask is also not a great work around as the format then becomes part of the record and searches then require the mask to be included.

I have the same issue but with bar codes which have specific input masks depending on the barcode length.

[UnionSystems]

I've worked out how to do this in an AwareIM Query "Initialization script". The example below is for a Query that has 3 columns of phone numbers that are stored as strings with no spaces.

Initialization script to format a string

phoneFormat.png (15.63 KiB) Viewed 31192 times

This is the code if you want to copy it.

Code: Select all

config.columns[13].columns[0].template = '#: (PhoneMobile).substr(0,4)+" "+(PhoneMobile).substr(4,3)+" "+(PhoneMobile).substr(7,3) #';
config.columns[13].columns[1].template = '#: (PhoneWork).substr(0,2)+" "+(PhoneWork).substr(2,4)+" "+(PhoneWork).substr(2,4) #';
config.columns[13].columns[2].template = '#: (PhoneHome).substr(0,2)+" "+(PhoneHome).substr(2,4)+" "+(PhoneHome).substr(2,4) #';

Note that there are 2 references to "columns" because this Query has grouped columns like below :

Grouped Columns

grouped columns.png (2.8 KiB) Viewed 31192 times

If this Query did not have grouped columns the code would be

Code: Select all

config.columns[10].template = '#: (PhoneMobile).substr(0,4)+" "+(PhoneMobile).substr(4,3)+" "+(PhoneMobile).substr(7,3) #';
config.columns[11].template = '#: (PhoneWork).substr(0,2)+" "+(PhoneWork).substr(2,4)+" "+(PhoneWork).substr(2,4) #';
config.columns[12].template = '#: (PhoneHome).substr(0,2)+" "+(PhoneHome).substr(2,4)+" "+(PhoneHome).substr(2,4) #';

When you use this you will need to change the number of the column

Code: Select all

[10]

to match your column sequence and the name of the AwareIM attribute

Code: Select all

PhoneMobile

to match your own AwareIM attribute name. Note you can use this to put anything into any column including HTML tags to get different effects. The Query filters use the original data so searching when a phone number is stored as 1212341234 and renders as 12 1234 1234 you need to search WITHOUT spaces.

Note also you can call javascript methods (like substr() in the first example above) OR you own javascript and kendo functions. I tried to call kendo functions to use a mask but failed so I have ended up making this javascript function.

Code: Select all

function usKendoMask(value,mask) {
	// Applies and returns a Kendo "mask"ed "value" 
	// Example results 
	//	value 0212341234 mask 99 0000 0000 result 02 1234 1234
	//	value 12341234   mask 99 0000 0000 result 1234 1234
	//	value 0212341234   mask 99-0000-0000 result 02-12341234
	
	var result='';

	if ((typeof(value)!='undefined') && value!='') {
		
		var pnt=value.length - 1;
		
		 for (var i = mask.length - 1; i >= 0; i--){  
			if (mask[i]=='0') {
				result=value[pnt]+result;
				pnt-=1;
			} else if (mask[i]=='9' && pnt>=0) {
				result=value[pnt]+result;
				pnt-=1;
			} else {
				result=mask[i]+result;
			}
		 }
	}   
return result;   
} 
}

So now I 'm using the following code in the "Initialization script".

Code: Select all

config.columns[13].columns[0].template = '#: usKendoMask(PhoneMobile,"0000 000 000") #';
config.columns[13].columns[1].template = '#: usKendoMask(PhoneWork,"99 0000 0000") #';
config.columns[13].columns[2].template = '#: usKendoMask(PhoneHome,"99 0000 0000") #';

You can read more about the kendo templates at https://docs.telerik.com/kendo-ui/frame ... s/overview

[Jaymer]

very nice Dave! thx

Can you give an example of how you have "can use this to put anything into any column including HTML tags to get different effects" in your grids?

[UnionSystems]

Here is an example that adds HTML into the result. Again this is all just presented in the Query so the column filters are still searching the original plain string data. It does get a bit messy...probably best to use javascript functions to construct this.

Anyway this Query > Properties > Scripts > Initialization Script

Template with HTML added

with html.png (35.67 KiB) Viewed 31164 times

Code: Select all

config.columns[13].columns[0].template = ' <span class="usROlink" onclick="usPersonCallPhone(\'#: FullNameNumber #\', \'#: PhoneMobile #\' )" >  <i class=\'fas fa-phone\'></i> #: usKendoMask(PhoneMobile,\'0000 000 000\') #   </span>  ';
config.columns[13].columns[1].template = ' <span class="usROlink" onclick="usPersonCallPhone(\'#: FullNameNumber #\', \'#: PhoneWork #\' )" > <i class=\'fas fa-phone\'></i>  #: usKendoMask(PhoneWork,\'99 0000 0000\') #   </span>  ';
config.columns[13].columns[2].template = ' <span class="usROlink" onclick="usPersonCallPhone(\'#: FullNameNumber #\', \'#: PhoneHome #\' )" >  <i class=\'fas fa-phone\'></i>  #: usKendoMask(PhoneHome,\'99 0000 0000\') #   </span>  ';

Results in

Resulting Query

phones.png (8.14 KiB) Viewed 31164 times

And the onclick calling the usPersonCallPhone function works fine.

You do only have access to attributes that are included in the columns of the Query but I guess you could always call a function that calls AwareApp.getObjectData() to get other attributes and objects if required....

[Jaymer]

Dave, revisiting this in light of the recent AI/template thread.
This is really cool, and it was three years ago.
I’m sure you’ve come up with some even better since then.
Are you able to show any screens of grids that do some cool stuff?