Country Lookup
Project · PCF
- Language
- TypeScript
- License
- MIT
- Status
- Active
General
- Name
- Country Lookup
- Description
- PCF control that turns a plain text column into a searchable country picker, with no new tables or external services.
- Type
- PCF
- Repository
- tonyeteDEV/JTS-Country-Lookup
- Created
- 28 Jul 2026
- Updated
- 28 Jul 2026
Technologies
TypeScriptReact 18Fluent UI v9PCFIntl.DisplayNames
Technical notes
Why
Almost every table with an address has a free-text country column: “Spain”, “España”, “ESP”… That breaks filtering, grouping and reporting. This control keeps using that same column, with no schema change or data migration, but constrains entry to a consistent list.
How it works
- Country names come from
Intl.DisplayNames, a browser-native API that returns localised names in any language. - The ISO 3166-1 codes are a small static array bundled with the control.
- Everything runs client-side: no external API calls, no rate limits and nothing for a corporate network policy to block.
Configuration
- Language code (ISO 639-1) used to display and search country names.
- Stored value format: country name (default, compatible with existing data) or ISO code.
- If the field already holds a value that does not match, it is shown as-is instead of being blanked.
Design notes
React 18 with createRoot instead of the legacy ReactDOM.render() pattern, avoiding crashes in Fluent UI components that rely on positioning (like Combobox) when the tree is rebuilt on every updateView().