Simple dropdown to select a country and display the flag
Dropdown with country flags
With a global language select or when selecting a country for phone number(s).
Flags come from Flagpack country classes, not language codes. "nl" works because it is both the Dutch language and the Netherlands country. "en" does not, because there is no English country flag; English uses "gb" or "us". Language codes such as "en_US" and "nl_NL" use the country part after the underscore. A bare "en" falls back to "gb". Use the following country codes:
"ac", "ad", "ae", "af", "ag", "ai", "al", "am", "ao", "ar", "as", "at", "au", "aw", "ax", "az", "ba", "bb", "bd", "be", "bf", "bg", "bh", "bi", "bj", "bl", "bm", "bn", "bo", "bq", "br", "bs", "bt", "bv", "bw", "by", "bz", "ca", "cc", "cd", "cf", "cg", "ch", "ci", "ck", "cl", "cm", "cn", "co", "cr", "cu", "cv", "cw", "cx", "cy", "cz", "de", "dj", "dk", "dm", "do", "dz", "ec", "ee", "eg", "eh", "er", "es", "et", "eu", "fi", "fj", "fk", "fm", "fo", "fr", "ga", "gb-eng", "gb-nir", "gb-sct", "gb-wls", "gb-zet", "gb", "gd", "ge", "gf", "gg", "gh", "gi", "gl", "gm", "gn", "gp", "gq", "gr", "gs", "gt", "gu", "gw", "gy", "hk", "hm", "hn", "hr", "ht", "hu", "id", "ie", "il", "im", "in", "io", "iq", "ir", "is", "it", "je", "jm", "jo", "jp", "ke", "kg", "kh", "ki", "km", "kn", "kp", "kr", "kw", "ky", "kz", "la", "lb", "lc", "lgbt", "li", "lk", "lr", "ls", "lt", "lu", "lv", "ly", "ma", "mc", "md", "me", "mf", "mg", "mh", "mk", "ml", "mm", "mn", "mo", "mp", "mq", "mr", "ms", "mt", "mu", "mv", "mw", "mx", "my", "mz", "na", "nc", "ne", "nf", "ng", "ni", "nl", "no", "np", "nr", "nu", "nz", "om", "pa", "pe", "pf", "pg", "ph", "pk", "pl", "pm", "pn", "pr", "ps", "pt", "pw", "py", "qa", "re", "ro", "rs", "ru", "rw", "sa", "sb", "sc", "sd", "se", "sg", "sh", "si", "sj", "sk", "sl", "sm", "sn", "so", "sr", "ss", "st", "sv", "sx", "sy", "sz", "ta", "tc", "td", "tf", "tg", "th", "tj", "tk", "tl", "tm", "tn", "to", "tr", "tt", "tv", "tw", "tz", "ua", "ug", "um", "us", "uy", "uz", "va", "vc", "ve", "vg", "vi", "vn", "vu", "wf", "ws", "xk", "ye", "yt", "za", "zm", "zw"
Configure either the enumeration or the language entity, not both. Show flags (default: yes) controls whether country flags are shown next to the selected value and in the options list.
Bind an enumeration attribute with country codes. You can set an On change action.
Use this for the Mendix default language entity (System.Language). It works like the Combo Box language selector: the association is the current value, and Code is shown as a shortcode (en_US → EN).
- Set Language source to a list of language objects (for example a Database source on
System.Language). - Map Code to
System.Language.Code. The closed dropdown and the options show shortcodes such as EN, NL, DE. - Optionally map Description for the hover tooltip.
- Bind Selected language to the current language association (for example
User_Language/Language). - Optionally set On language select to an action that receives the selected language object (for example a nanoflow that changes the current user language).
- Install NPM package dependencies by using:
npm install. If you use NPM v7.x.x, which can be checked by executingnpm -v, execute:npm install --legacy-peer-deps. - Run
npm run startto watch for code changes. On every change:- the widget will be bundled;
- the bundle will be included in a
distfolder in the root directory of the project; - the bundle will be included in the
deploymentandwidgetsfolder of the Mendix test project.
none known at this moment.