List Control In Place Edit - Apply Mask to Detail View Control

[Pizzadude]

Build 6470-5430

I am using in place editing in a list control in a UX.

How can I apply a mask to a phone number field while editing or adding a record?

Untitled.png

In the picture the mask is displayed in the layout template for the column:
{Phone:number('if(n==0)=;=(###) ###-####')}

[rgibson]

Hi Pizzadude,

I'm very new to Alpha although this is my 3 time in 12 years being very new to Alpha however I believe it's going to stick this time.

Did you ever get this figured out?

Also when you say

In the picture the mask is displayed in the layout template for the column:
{Phone:number('if(n==0)=;=(###) ###-####')}

Where exactly does this go? Am I able to put a mask on the Phone number field when the List is in Freeform?

Thanks
Rob

[Pizzadude]

No I never did figure this out.
In a textbox control there is a property "Client side formatting", where a mask can be applied. In the definition for the mask, there is a checkbox "Show the mask characters while entering the field". This is the behavior I want to duplicate while editing a field in a list control with in-place edition.

To answer your question Where exactly does this go? In the List control builder, select the List Layout tab. In the Column Properties for the field you want to change, add this code to the Template property:

{FieldName:number('if(n==0)=;=(###) ###-####')}

Substitute FieldName with the name of the field in your column.

This will display the phone number with the mask when the field is not being edited. But it does not achieve what I am looking for, which is to display the mask while the field is in edit mode.

[gianfior85]

Bumping this thread in case anyone else has figured it out.

[WebDesignShop]

Yeah, this is interesting. You may want to apply your own custom javascript while editing the control and not rely on Alphas scripting.

[gianfior85]

How do you set a pointer inside the list though to the object you are editing? The following code works fine in a UX textbox's onKeyUp event, but does not work in the list's onKeyUp event. For the list, I am using the 'listObj' variable which Alpha's system comments suggest to use:

var numbers = listObj.value.replace(/\D/g, ''),
char = {0:'(',3:') ',6:'-'};
listObj.value = '';
for (var i = 0; i < numbers.length; i++) {
listObj.value += (char[i]||'') + numbers[i];

if(listObj.value.length > 13) {
listObj.value = name.value.slice(0, 13);
}
}

In a UX, the 'getPointer' method works. I'm sure there are many ways of doing this with javascript but getting the pointer with in-place editing is eluding me.

[Jay Talbott]

Here is what I have found. The identity of a field changes depending on whether or not the field is in edit mode. Before it is in edit mode, my phone field on line 5 (zero based row 4) is:

$('DLG1.LIST1.PHONE.I.4').innerHTML;

When the field is in edit mode, the identity of that field is:

$('LIST1.4.PHONE.CONTROL').value

The third image shows the javascript I used to format the phone number and place it back in the list. Here is that code: (commented out values under each line show what that line of code returns)

$('LIST1.4.PHONE.CONTROL').value

//"0921&#45;12 34 65"

var originalPhoneNumber = $('LIST1.4.PHONE.CONTROL').value;
rawPhoneNumber = originalPhoneNumber.replace(/[`~!@#$%^&*()_ |+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '');

//"092145123465"

formattedPhoneNumber = '('+rawPhoneNumber.substring(0,3)+') '+rawPhoneNumber.substring(3,6)+'-'+rawPhoneNumber.substring(6,10)

//"(092) 145-1234"

$('LIST1.4.PHONE.CONTROL').value = formattedPhoneNumber

//"(092) 145-1234"

This should get you most of the way there. If not, let us know.


BeforeEditMode.pngInEditMode.pngAfterChangedValue.png
Jay

[gianfior85]

Thank you so much for the very helpful and detailed response, Jay. It seems I was merely missing the $ symbol. So the following works:

var obj = $('EDIT_ALL_CONTACTS.' + renderIndex + '.CONTACT_CELL.CONTROL')

but this does not work:

var obj = 'EDIT_ALL_CONTACTS.' + renderIndex + '.CONTACT_CELL.CONTROL'

. My javascript ability is mediocre at best (especially within Alpha) and I don't fully grasp why that is the case but thank you again for pointing me so clearly down the right path.