International Phone Input PCF Control

-

Overview

The InternationalTelephoneControl is a custom PCF (PowerApps Component Framework) control that allows users to input a phone number with a selectable international dialing code. It combines an input field with a flag picker modal for selecting country codes, improving the UX for global phone number entry.

Key Features

·        Phone Input Field: Standard input field restricted to numeric input (type='tel') for entering phone numbers.

·        Default Country Code: Displays a default country code (+92, Pakistan) on initialization unless another is selected.

·        Country Selector Modal: Toggleable modal to pick a country. Each country shows:
  - National flag
  - Country name
  - Native name
  - Dialing code

·        Live Output Updating: Whenever the user enters or updates the number, or changes the country code, the component emits the combined value (e.g., +92 3001234567).

UI Components

Element

Description

wrapper

Main container for the control

selectedOption

Shows selected country’s flag and code

inputElement

Textbox for entering the phone number

modal

Overlay window displaying all countries

modalContent

Scrollable list of country options

toggleButton

Opens the modal to select country

Functional Flow

1.      1. Initialization (init)

Initializes the control and calls:
- createUI() to render main input and selected option area.
- createModal() to prepare the modal.
- populateModalOptions() to load country list from countries.

2.      2. Country Selection

Clicking the 🌐 button opens the modal.
Clicking a country in the modal:
- Sets the selected flag and code via setSelectedCountry().
- Closes the modal.
- Triggers onInputChange().

3.      3. Phone Number Input

Any typing into the input triggers onInputChange().
Combines current country code with the phone number.
Stores value in currentValue and calls notifyOutputChanged().

4.      4. Output (getOutputs)

Returns phoneNumber: string containing the full value.

5.      5. Destruction (destroy)

Cleans up DOM by removing modal on control removal.

Data Bindings

Property

Direction

Type

Description

phoneNumber

Output

string

Full phone number in international format (+<code> <number>)

Dependencies

Countries list (./Countries/countries.ts) should export an array of objects with the following shape:

{
  name: string;
  nativeName: string;
  code: string; // e.g., '+92'
  flag: string; // URL or base64 image
}

Customization Ideas

·        Enable validation for number format.

·        Limit selectable countries.

·        Support for right-to-left languages.

·        Keyboard navigation in modal.

Output:






Comments

Post a Comment

Popular posts from this blog

Attachment PCF

-
Overview The AttachmentControl component is a PowerApps Component Framework (PCF) control designed for handling file uploads. It supports multiple file uploads, drag-and-drop functionality, file previews, and base64 encoding for easy data handling. Features Supports multiple file uploads Drag-and-drop functionality File type and size validation Base64 conversion for uploaded files Preview support for images, PDFs, and text files File removal functionality Code Breakdown Importing Dependencies import { IInputs, IOutputs } from "./generated/ManifestTypes"; The component imports IInputs and IOutputs from the generated manifest file to define the control's input and output types. Component Definition export class AttachmentControl implements ComponentFramework.StandardControl<IInputs, IOutputs> { Defines the AttachmentControl class, implementing the StandardControl interface from PCF. Class Variables private container: HTMLDivElement; private fileInput: HTMLInputEl...
Read more

Contacts View PCF Control

-
  1. Overview The ContactsControl component is a custom PowerApps control that displays a searchable and sortable table of contact records. It provides an interactive UI for filtering and selecting records. 2. Functionalities Search Feature: Allows users to filter records by entering text. Sorting: Clickable column headers enable ascending/descending sorting. Record Selection: Users can select a record to trigger a modal alert. Dynamic Rendering: Updates view dynamically based on search and sort input. Custom Styling: Uses external CSS for styling. 3. Component Structure Main Container ( HTMLDivElement ) : Holds the search bar and table. Search Input ( HTMLInputElement ) : Enables real-time search. Table ( HTMLTableElement ) : Displays the records with sortable headers. Modal Alert ( HTMLDivElement ) : Displays selected record details. 4. Implementation Details 4.1 Initialization ( init Method) Sets up the main container. Loads external styles. Creates...
Read more

Trigger JavaScript on Click of Button PCF Control

-
Image
  Overview The TriggerJavascript control is a custom PCF (PowerApps Component Framework) control that renders a button with customizable label, icon, and on-click script execution. The control allows users to dynamically trigger JavaScript code upon clicking the button. Dependencies IInputs, IOutputs from ./generated/ManifestTypes (Auto-generated types from PowerApps) CSS styling from ./CSS/TriggerJavascript.css Class: TriggerJavascript This class implements ComponentFramework.StandardControl<IInputs, IOutputs> and manages rendering a button inside a container, dynamically executing JavaScript code on button click. Properties Private Properties _container: HTMLDivElement - A reference to the container element where the button will be rendered. Methods constructor() Initializes a new instance of the TriggerJavascript control. init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLD...
Read more