1

I have a scenario wherein we want to provide users with list of CountryName Country Code to select when providing contact details , here is how the list looks like :

enter image description here

Has anybody had a requirement and if yes how do we implement this.

2 Answers 2

2

There is no native way to get this view. But there are many third party library which provide support for this.

You can use this one intl-tel-input. You just need to load the script and call the jS.

<input type="tel" id="phone">

<script src="path/to/intlTelInput.js"></script>
<script>
  var input = document.querySelector("#phone");
  window.intlTelInput(input);
</script>

And this is how your UI will look.

enter image description here

7
  • Tushar thanks for the answer , not sure i got that i wanted this to be displayed in a picklist value , so how do i do that.
    – Harry_G
    Feb 14, 2019 at 12:04
  • @Harry_G it is a picklist. Just check the sample from given link. Feb 15, 2019 at 5:52
  • @TusharSharma were you able to implement this in Aura Component? if yes how did you handle to load the utils.js file included. I need it for me to call some validation/formatting methods already available in the library.
    – imajmdf
    Jan 8, 2021 at 8:51
  • @TusharSharma/@imamjmdf : Did anyone managed to use this in lightning component? JS is not loading for me Feb 11, 2022 at 7:24
  • @imajmdf : were you able to implement it in aura componet? Feb 22, 2022 at 9:56
1

Here's the LWC implementation using intl-tel-input: As per someone else. enter image description here

LWC HTML

    <!-- sldsValidatorIgnore -->
<!-- sldsValidatorIgnore -->
<template>
    <fieldset class="slds-form-element slds-form-element_compound">
        <div class="slds-form-element__control">
            <div class="slds-form-element__row">
                <div class="slds-size_1-of-2">
                    <div class="slds-form-element">
                            <label class="slds-form-element__label" for="text-input-id-47">
                                <abbr class="slds-required" title="required">* </abbr>Country
                            </label>
                            <div class="slds-form-element__control">
                                <input type="tel" class="slds-input" data-id="country" onchange={handleChange}  id="phone"  name="country"></input>

                            </div>
                        </div>
                    </div>
            </div>
            </div>
        </fieldset>
</template>

LWC JS lwc named "uselti"

import { LightningElement, api, track } from 'lwc';
import intlTellinputjs from '@salesforce/resourceUrl/intlTellinputjs';
import utils from '@salesforce/resourceUrl/utils';
import intlTellinputcss from '@salesforce/resourceUrl/intlTellinputcss';
import democss from '@salesforce/resourceUrl/democss';
import flags from '@salesforce/resourceUrl/flags';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';

export default class UseITI extends LightningElement {

    @api CountryName = '';
    @track inputElem;
    @track iti;
    connectedCallback() {
        loadStyle(this, democss)
            .then(() => {

            });
        loadStyle(this, intlTellinputcss)
            .then(() => {

            });
        loadScript(this, utils)
            .then(() => {

            });
        loadScript(this, intlTellinputjs)

            .then(() => {
                this.inputElem = this.template.querySelector("[data-id=country]")

                /* initialize the intl plugin */
                var iti = window.intlTelInput(this.inputElem, {
                    initialCountry: "US",
                    preferredCountries: ['AU', 'NZ', 'US', 'CA',],
                    separateDialCode: true,
                    //nationalMode: true,
                    utilsScript: utils,

                })

                // store the instance variable so we can access it further down
                window.iti = iti;

            })
 }
/* Event handler to push up to Aura CMP */
    handleChange(evt) {
 var value = iti.getNumber() //Get full number
        const valueChangeEvent = new CustomEvent("valuechange", {
            detail: { value }
        });
        // Fire the custom event
        this.dispatchEvent(valueChangeEvent);
        console.log(value)
        }
    }

AURA CMP

<aura:component  implements="lightning:availableForFlowScreens" >
    <aura:attribute name="inputValue" type="String"/>

        <c:uselti onvaluechange="{!c.getValueFromLwc}"/><br/>
       
</aura:component>

AURA CONTROLLER

({
    getValueFromLwc : function(component, event, helper) {
        component.set("v.inputValue",event.getParam('value'));
    }
})

AURA DESIGN (For flow screens if needed)

<design:component label="C: Phone with Country Code">
   <design:attribute name="inputValue" label="Phone" />
</design:component>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .