Enterprise mobile phone field for Dynamics 365 / Model-Driven Apps — country flag picker, E.164 validation, and one-tap actions: Call, SMS, WhatsApp, Microsoft Teams, Copy.
| Feature | Detail |
|---|---|
| Country flag picker | 250+ countries with flag emoji, search by name / ISO code / dial code |
| Phone validation | Powered by libphonenumber-js — validates as you type, stores E.164 format |
| Preferred countries | Configurable short-list pinned to the top of the picker |
| Radial action menu | Tap the + FAB to reveal a semicircle of action buttons |
| Call | Opens native phone dialer + creates a D365 Phone Call activity |
| SMS | Opens native SMS app with number pre-filled |
| Opens WhatsApp (app on mobile, web on desktop) | |
| Microsoft Teams | PSTN call via Teams deep link |
| Copy | Copies E.164 number to clipboard |
| Click to dial | In read mode, tap the number to open the dialer directly |
| Mobile-first | Viewport-aware radial positioning, WebkitTapHighlightColor, touchAction |
Replace the placeholders below with actual screenshots before publishing.
| Web — Edit mode | Web — Action menu | Country Selection |
|---|---|---|
 |
 |
 |
| Requirement | Minimum version |
|---|---|
| Dataverse / Dynamics 365 | Any active environment |
| Browser | Edge, Chrome, Safari, Firefox (latest) |
| PowerApps mobile app | Latest from App Store / Play Store |
No additional licences are required beyond standard Dynamics 365 access.
-
Download
MobilePhonePCF_Managed.zipfrom thedist/folder (or from Releases). -
Open make.powerapps.com and select your environment.
-
Go to Solutions → Import solution.
) -
Click Browse and select
MobilePhonePCF_Managed.zip. -
Click Next → Import.
Wait for the import to complete (typically 30–60 seconds). -
✅ The solution Mobile Phone PCF Solution now appears in your Solutions list.
Follow the same steps above but use MobilePhonePCF_Unmanaged.zip instead.
Use this only in non-production environments where you intend to modify the control.
-
In make.powerapps.com open Solutions → your solution.
-
Select the table (e.g. Lead, Contact) → Forms → open the form in the editor.
-
Select the phone / mobile number field (e.g.
Mobile Phone,Business Phone). -
In the right panel choose Components → + Component.
-
Find Mobile Phone Control and click Add.
-
Map the Phone Number bound property to your field.
-
Configure the input properties (see Configuration below).
-
Click Save → Publish.
All properties are set in the Components panel of the form editor.
| Property | Type | Default | Description |
|---|---|---|---|
| Phone Number (bound) | SingleLine.Phone | — | The field this control writes to. Required. |
| Default Country | Text | IN |
ISO 3166-1 alpha-2 code shown on first load (e.g. US, GB, AE). |
| Preferred Countries | Text | IN,US,GB,AE,SG,AU,CA |
Comma-separated codes pinned to the top of the country picker. |
| Allowed Countries | Text | (all) | Comma-separated codes to restrict the picker. Leave blank to allow all. |
| Enable Call | Yes/No | Yes | Show the Call button. |
| Enable SMS | Yes/No | Yes | Show the SMS button. |
| Enable WhatsApp | Yes/No | Yes | Show the WhatsApp button. |
| Enable Teams | Yes/No | Yes | Show the Microsoft Teams PSTN call button. |
| Enable Copy | Yes/No | Yes | Show the Copy Number button. |
| Enable Contact Search | Yes/No | No | Show the Find Contact button (opens Contact quick-create filtered by number). |
| Popup Radius (px) | Whole Number | 80 |
Radius of the radial action menu in pixels. |
| Animation Duration (ms) | Whole Number | 250 |
Open/close animation duration in milliseconds. |
| Icon Size (px) | Whole Number | 36 |
Diameter of each action button in pixels. |
| Enable Telemetry | Yes/No | No | Log action button usage to the browser console. |
Do this before removing the solution, otherwise the field falls back to a plain text box automatically — no data is lost.
- In make.powerapps.com open Solutions → your solution.
- For each form that uses the control: open the form editor → select the field → Components → select Mobile Phone Control → Delete component (the trash icon).
- Click Save → Publish the form.
- Repeat for every table / form that uses the control.
- Go to Solutions in the left navigation.
- Find Mobile Phone PCF Solution in the list.
- Click the ⋯ (More commands) menu → Delete.
- Confirm deletion.
Note: Deleting a Managed solution removes all its components. If you imported the Unmanaged version, delete the custom control separately under Solutions → Default Solution → Custom controls.
| Tool | Version |
|---|---|
| Node.js | 18 LTS or later |
| npm | 9 or later |
Power Platform CLI (pac) |
Latest |
| PowerShell | 5.1 or later (Windows) |
# 1. Clone the repository
git clone https://github.com/<your-org>/MobilePhonePCF.git
cd MobilePhonePCF
# 2. Install dependencies
npm install
# 3. Build the PCF control
npm run build
# 4. Package solution ZIPs
.\build-solutions.ps1
# Output: dist\MobilePhonePCF_Managed.zip
# dist\MobilePhonePCF_Unmanaged.zipnpm start
# Opens https://localhost:8181 with the PCF test harness| Button | Mobile (PowerApps app) | Desktop browser |
|---|---|---|
| Call | Opens native phone dialer | Opens native dialer (if configured) |
| SMS | Opens native SMS app | Opens SMS handler |
Opens WhatsApp app via wa.me universal link |
Opens WhatsApp Web in new tab | |
| Teams | Opens Teams app via msteams:// deep link |
Opens Teams call in new tab |
| Copy | Copies E.164 number to clipboard | Copies E.164 number to clipboard |
| Click number | Opens phone dialer (read mode) | Opens phone dialer (read mode) |
| Layer | Library / Version |
|---|---|
| Framework | PowerApps Component Framework (PCF) |
| UI | React 16.14 + Fluent UI v8 |
| Phone parsing | libphonenumber-js 1.x |
| Build | pcf-scripts (webpack 5) + TypeScript 5 |
| Solution packaging | PAC CLI pac solution pack |
| Field | Value |
|---|---|
| Publisher name | Quantril |
| Publisher prefix | qtrl |
| Control namespace | QtrlPCF |
| Unique name | QtrlPCF.MobilePhonePCF |
- Country flag picker (250+ countries, preferred list, search)
- E.164 phone validation via libphonenumber-js
- Radial FAB action menu (Call, SMS, WhatsApp, Teams, Copy, Contact Search)
- Mobile-first: viewport-aware radial positioning, portal rendering to escape D365 overflow clipping
- Click-to-dial in read mode
- Managed + Unmanaged solution ZIPs included
MIT © Quantril