how to add an international dialling code Dropdown List embedded within a Phone Number Type Field

[Arioule]

Hi, 

I would like to use in my Entity Main Form a Phone Number Type Field where you can select an international dialling code ?

How can I do that ?

Thanks,

Arioule

[EricRegnier]

Hi @Arioule, do you want to select an international dialing code from another field like an optionset (dropdown) or you would like to validate your current phone number field to have the international dialing code? Thanks

[ben-thompson · Accepted solution]

To do that you will need to create a PCF component as that would be the only way of using a drop down alongside the phone number textbox within an existing field.

While there isn't a PCF component that does exactly what you want https://pcf.gallery/phone-number-by-country/ adds a the country flag using the country code (which may help) https://pcf.gallery/check-phone-number-control/ will validate the number is correct for that country.

[EricRegnier · Accepted solution]

@Arioule if your requirements are a little flexible I would try to leverage out-of-the-box options rather going via the customizations route like PCF. If you can't have a separate optionset field, then you can easily format to phone and enforce a international code with the Input Mask control. Here are the quick steps:

1. Open your solution that contains that entity and open the main form. Click the "switch to classic" button on the top
2. Select the phone number field and click "Change Properties"
3. Navigate to the Controls tab and click on "Add Control"
4. Select "Input Mask" and click add
5. Pick you field for the Field property
6. Enter the desired mask (e.g. 00-000-0000) for the Mask property.
7. Ensure the Input Mask control is selected for Web, Phone and Tablet.
8. Save all and publish all customization
   

[ben-thompson]

@EricRegnier How do you use an input mask when phone number lengths and formats differ across countries - for instance the US has a 3 digit area code, the UK has 3 or 4 digit area codes depending on the area.

That was why I suggested PCF components as this is a problem where a mask will instantly fail once you leave the USA and equally a solution that was been fixed by various Javascript libraries over the past 20+ years. 

[Arioule]

Hi @ben-thompson,

Thanks a lot

[Arioule]

Hi @EricRegnier,

Thanks a lot.

[Xch21]

Hi Ben-thompson

Would you be able to explain how to add the component please?

Many thanks