4.46.4

Locale Switcher

Locale switcher

This component is in beta. Use it at your own risk. Breaking changes may be introduced in a future release without a major version bump.

Demo

const locale = document.querySelector('aui-locale-switcher'); locale.optionsList = [ {code:'en-US', label: "English"}, {code:'de-DE', label: "German"}, ]

API

Tag

Name Description
<aui-locale-switcher>

Custom Element to show the current locale setting and allow a user to change it to another configured locale.

Attributes

Name Value Required Description
optionslist string

Stringified JSON array of option objects. See Guidelines below.
icononly boolean

When present, only show the international (world) icon.
user String

Stringified JSON of user object, see Guidelines below.
skylabversion string

(Deprecated) The current version of skylab-sdk used in your project.

Properties

Name Value Required Description
optionsList JSON

Stringified JSON array of option objects. See Guidelines below.
iconOnly boolean

When present, only show the international (world) icon.
user JSON

Set this to user object JSON, see Guidelines below.
requestCurrentAccessToken Function

Function that returns a Promise resolving to {accessToken: "<avalara-ui-access-token>"}. The access token must have at least 5 seconds of life remaining.

Events

Name Detail Description
s-localeselect 
            
  {
    locale: string;
  }

Fired when a locale is selected. The event detail contains the selected locale.

Demo

API

Tag

Name Description
<AuiLocaleSwitcher>

Custom Element to show the current locale setting and allow a user to change it to another configured locale.

Props

Name Value Required Description
optionsList JSON

Stringified JSON array of option objects. See Guidelines below.
iconOnly boolean

When present, only show the international (world) icon.
user JSON

Set this to user object JSON, see Guidelines below.
requestCurrentAccessToken Function

Function that returns a Promise resolving to {accessToken: "<avalara-ui-access-token>"}. The access token must have at least 5 seconds of life remaining.

onS-localeselect Function Handles the s-localeselect event that fires when a locale is selected.

Skylab React links

General information about using our React package

Guidelines

Options list

The options list sets the available locales. If the list is empty or contains only one option, the component will not render as there is no selection to be made.

const optionsList = [{ code: string, // use the 5 character locale code label: string, }] document.querySelector('aui-locale-switcher').optionsList = optionsList;

User object

If your app doesn't already have access to the Avalara Identity user data, then use AUI Identity to get it. API for <aui-locale-switcher> user data is provided below.

const user = { accountId: string, // use product account ID (e.g. avataxAccountId) username: string, // optional, will be displayed in header menu if provided givenName: string, familyName: string, email: string, isLoggedIn: boolean, isTechSupport: boolean, name: string, locale: string, emitSwitchAccountsNavEvent: boolean, // optional, prevents default/emits s-navigate event on "Switch accounts" click switchAccountsUrl: string, // optional, overrides existing default } document.querySelector('aui-locale-switcher').user = user;

or data can be assigned as attribute using stringified JSON

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com