Git Product home page Git Product logo

countrypicker.pcf's Introduction

CountryPicker.PCF GitHub all releases

Country Picker PCF (PowerApps Component framework) Control that turns a PowerApps text field into a Combobox displaying country names and flags.

IMPORTANT : DON'T USE VERSION PRIOR TO v1.0.0.9 , THE API ROOT AS CHANGED FOR FETCHING THE COUNTRY DATA

Features:

  • Promote some countries to appear first in the combobox.

  • Limit the available countries to show only the one that matters to your use case

  • Country names available in several languages. (English, German, Spanish, French, Japanese, Italian, Portuguese, Dutch, Persian)

  • Country information comes from this public API project : https://restcountries.com/

DISCLAIMER : The author of the project is not responsible for the accuracy of the content of the API

Dependencies

FluentUI : https://github.com/microsoft/fluentui

react-query : https://react-query.tanstack.com/

axios: https://axios-http.com/

Parameters

Parameter Description Default
CountryCode REQUIRED: Bound Country field (represents ISO 3166-1 3-letter country code)
CountryName OPTIONAL OUTPUT: Country name in the chosen language
Language Base language for country names. Available languages (English, German, Spanish, French, Japanese, Italian, Portuguese, Dutch, Persian) en
Promoted Promoted countries (Will appear first) Use comma separated list of ISO 3166-1 3-letter country code (Ex. 'USA,CAN,MEX')
Limit Limit to these countries Use comma separated list of ISO 3166-1 3-letter country code (Ex. 'USA,CAN,MEX'). Leave blank to include all countries
DisplayInfo Display Info Panel true
CountryCodeIso2 OPTIONAL OUTPUT: Bound field to store the 2 character Country Code ISO2

Screenshots

alt text

Country info panel

alt text

Different configurations

alt text

Languages

alt text

Installation

You can install the component directly from solution files containes in the 'Release' section https://github.com/drivardxrm/CountryPicker.PCF/releases

Get required tools

To use Microsoft PowerApps CLI, do the following:

  • Install Npm (comes with Node.js) or install Node.js (comes with npm). We recommend LTS (Long Term Support) version 10.15.3 LTS as it seems to be most stable.

  • Install .NET Framework 4.6.2 Developer Pack.

  • If you don’t already have Visual Studio 2017 or later, follow one of the options below:

    • Option 1: Install Visual Studio 2017 or later.
    • Option 2: Install .NET Core 2.2 SDK and then install Visual Studio Code.
  • Install Microsoft PowerApps CLI.

Be sure to update your Microsoft PowerApps CLI to the latest version:

pac install latest

Build the control

  • Clone the repo/ download the zip file.
  • Navigate to ./IconTwoOption/ folder.
  • Copy the folder path and open it in visual studio code.
  • Open the terminal, and run the command the following command to install the project dependencies:
npm install

Then run the command:

npm run start

Build the solution

  • Create a new solution folder and open the Developer command prompt.
  • Change the directory to the newly created folder in previous step.
  • Init the future solution:
pac solution init --publisherName someName --customizationPrefix someSolutionPrefix
  • Add the control to your future solution:
pac solution add-reference --path provide path of control project folder where the pcf.proj is available
  • Build 1/2:
msbuild /t:restore
  • Build 2/2:
msbuild
  • You will have the solution file in SolutionFolder/bin/debug folder!

If you want to change the solution type you have to edit the .cdsproj file:

Solution Packager overrides, un-comment to use: SolutionPackagerType (Managed, Unmanaged, Both)
  <PropertyGroup>
    <SolutionPackageType>Managed</SolutionPackageType>
  </PropertyGroup>

countrypicker.pcf's People

Contributors

dependabot[bot] avatar drivardxrm avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

countrypicker.pcf's Issues

Ability to Default country

As mentioned it would be very useful to have the ability to Default a country on creation as 99% of Accounts created will be the United Kindom as a default

Error Fetching data API Offline

We use this PCF component in a few places and noticed an error saying "Error Fetching data".

errorCountryPicker

I took a look at the API listed and it looks like it's got a 504 bad gateway error, so i'm assuming it's offline. I'm not sure if this is prone to going offline or if it's going offline permanently, I just wanted to raise it. I appreciate you have no control over the API and it's just a public one, but thought it might be something you want to investigate or switch to another API source.

Flags arn't displayed anymore

Hello,

On my environnements the flags aren't displayed anymore there is an error in the web browser console for each country which mean that the .svg file of the country isn't available on "restcountries.com" (or the URI changed).

Thank you for your help.

Best regards,

Benjamin.

Official vs Common Name

This is a great tool - thanks for developing it! Really Useful.

I don't quite understand why, for some countries, it displays the 'Common' name rather than the Official Name (eg Jordan rather than "Hashemite Kingdom of Jordan"), but for the UK it displays "United Kingdom of Great Britain and Northern Ireland" rather than "United Kingdom".
No-one would ever call it that in practice, and it's not (for example) what would be written in the address.
We would just put the common name: "United Kingdom". I couldn't see a way to control this, but I think most UK users would immediately be put off by this...

Update to Fluent2 (FluentUI 9)

Since the new look of model driven app uses Fluent2 (FluentUI 9), adapt the control using this library so the control will blend with the out of the box UI.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.