Header

Displays the logo, optional product name, and user menu

Demo

if you modify the HTML, click 'Run' to reload the user data.

API

Tag

Name	Description
`<aui-header>`	Custom Element, no content

Attributes

Name	Value	Required	Description
`sidenavheader`	Boolean attribute		Indicates that the header is being used in a page layout with `aui-sidenav`; changes the styling of the header accordingly.
`changepasswordurl`	String		The url for the product's password change route. Defaults to Avalara Identity `/changePassword` endpoint.
`productname`	String		The name of the product.
`homeurl`	String		The full url of the product home page.
`loginurl`	String		The url for the product's login route. Defaults to Avalara Identity login.
`logouturl`	String		The url for the product's logout route. Defaults to `/auth/logout`.
`appkey`	String		The subdomain of your app (e.g. "account" for "account.avalara.com").
`integratehelp`	Boolean		Integrates a help button into the header that opens a ZoomIn menu if available or default help menu if not. If your app already has ZoomIn, please post on #skylab Slack channel to ensure your configuration is correct prior to using this attribute.
`showchatbutton`	Boolean		Integrates a chat button into the header that opens the IPUA help panel.
`shownotificationsbutton`	Boolean		Integrates a notifications button into the header.
`cam`	String		Stringified JSON of cam object, see Guidelines below.
`user`	String		Stringified JSON of user object, see Guidelines below.
`integratelocaleswitcher`	boolean		Integrates an `aui-locale-switcher` in the header.
`localeswitcheroptionslist`	Array of locales		List of locales for the `aui-locale-switcher` in the header. See Guidelines below.
`shoulduseaccountowd`	Boolean		When set, the account URL will be for Account in AvaApp.

Properties

Name	Value	Required	Description
`sideNavHeader`	Boolean attribute		Indicates that the header is being used in a page layout with `aui-sidenav`; changes the styling of the header accordingly.
`changePasswordUrl`	String		The url for the product's password change route. Defaults to Avalara Identity `/changePassword` endpoint.
`productName`	String		The name of the product.
`homeUrl`	String		The full url of the product home page.
`loginUrl`	String		The url for the product's login route. Defaults to Avalara Identity login.
`logoutUrl`	String		The url for the product's logout route. Defaults to `/auth/logout`.
`appKey`	String		The subdomain of your app (e.g. "account" for "account.avalara.com").
`integrateHelp`	Boolean		Integrates a help button into the header that opens a ZoomIn menu if available or default help menu if not. If your app already has ZoomIn, please post on #skylab Slack channel to ensure your configuration is correct prior to using this attribute.
`showChatButton`	Boolean		Integrates a chat button into the header that opens the IPUA help panel.
`showNotificationsButton`	Boolean		Integrates a notifications button into the header.
`shouldUseAccountOwd`	Boolean		When set, the account URL will be for Account in AvaApp.
`cam`	JSON		Set this to cam object JSON, see Guidelines below.
`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>"}`, see Guidelines below.
`integrateLocaleSwitcher`	boolean		Integrates an `aui-locale-switcher` in the header.
`localeSwitcherOptionsList`	Array of locales		List of locales for the `aui-locale-switcher` in the header. See Guidelines below.

Classes

Name	Description
`hide-account-menu`	Removes the "Sign in" link and all menus from the right side of the header
`hide-account-products-usage`	Removes the "Products and usage" item from the Account menu
`hide-account-support-cases`	Removes the "Support" item from the Account menu
`hide-account-billing`	Removes the "Billing" item from the Account menu
`hide-account-change-password`	Removes the "Change password" item from the Account menu
`hide-account-id`	Removes the "Account ID" item from the Account menu
`hide-account-my-downloads`	Removes the "My downloads" item from the Account menu
`hide-account-overview`	Removes the "Account overview" item from the Account menu
`hide-account-security-settings`	Removes the "Security settings" item from the Account menu
`hide-account-users-admins`	Removes the "Users" (or "Admins") item from the Account menu
`hide-account-companies`	Removes the "Companies" item from the Account menu

Properties

Name	Value	Required	Description
`cam`	JSON		Set this to cam object JSON, see Guidelines below.
`user`	JSON		Set this to user object JSON, see Guidelines below.

Events

Name	Detail	Description
`s-navigate`	The clicked menu item's `label`, `url`, and `dataRef` values are available on `e.detail`.	Fired after the "Switch accounts" menu item is clicked, if the `user.emitSwitchAccountsNavEvent` property is set to `true`.
`s-chat`		Fired when the chat button is clicked.
`s-notifications`		Fired when the notifications button is clicked.

Guidelines

requestCurrentAccessToken

There is a project in progress to migrate the logic to build the Account menu to the server side, to avoid apps passing sensitive information in the client side. For the component to be able to make a call to Web Platform Navigation Service to get the Account menu, your app should set (via the requestCurrentAccessToken property) a function that returns a Promise resolving to {accessToken: "<avalara-ui-access-token>"}. The access token must have at least 5 seconds of life remaining.

Customer Account Manager object

The customer's Salesforce account information is retrieved via the OPUS API (see Swagger). That customerAccount object contains a key named camOwned that indicates if the account's cam key contains valid Customer Account Manager data. The value of camOwned should be assigned to the isValid key and passed along with the cam object to the <aui-header> as follows:

const customerAccount = await getCustomerAccountFromOpus(customerId); const modifiedCamObject = customerAccount.cam ? { ...customerAccount.cam, isValid: customerAccount.camOwned } : null; document.querySelector('aui-header').cam = modifiedCamObject;

or data can be assigned as attribute using stringified JSON

If the cam object includes a photoUrl field, the linked image will be displayed in the contact dialog. If no photoUrl is defined or the image fails to load, a default user icon will be displayed instead.

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-header> 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-header').user = user;

or data can be assigned as attribute using stringified JSON

Environment

In order to use lower environment URLs for external links (e.g. header links, aui-uploader API calls, etc.), you may optionally set the environment as an attribute on the script tag where you load the aui.min.js script as seen below. We typically recommend using qa for lower environments.

Locale switcher options list

List of available locales.

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

Demo

API

Tag

Name
`<AuiHeader>`

Classes

Name	Description
`hide-account-menu`	Removes the "Sign in" link and all menus from the right side of the header
`hide-account-products-usage`	Removes the "Products and usage" item from the Account menu
`hide-account-support-cases`	Removes the "Support" item from the Account menu
`hide-account-billing`	Removes the "Billing" item from the Account menu
`hide-account-change-password`	Removes the "Change password" item from the Account menu
`hide-account-id`	Removes the "Account ID" item from the Account menu
`hide-account-my-downloads`	Removes the "My downloads" item from the Account menu
`hide-account-overview`	Removes the "Account overview" item from the Account menu
`hide-account-security-settings`	Removes the "Security settings" item from the Account menu
`hide-account-users-admins`	Removes the "Users" (or "Admins") item from the Account menu
`hide-account-companies`	Removes the "Companies" item from the Account menu

Props

Name	Value	Required	Description
`sideNavHeader`	Boolean		Indicates that the header is being used in a page layout with `AuiSideNav`; changes the styling of the header accordingly.
`changePasswordUrl`	String		The url for the product's password change route. Defaults to Avalara Identity `/changePassword` endpoint.
`productName`	String		The name of the product.
`homeUrl`	String		The full url of the product home page.
`loginUrl`	String		The url for the product's login route. Defaults to Avalara Identity login.
`logoutUrl`	String		The url for the product's logout route. Defaults to `/auth/logout`.
`appKey`	String		The subdomain of your app (e.g. "account" for "account.avalara.com").
`integrateHelp`	Boolean		Integrates a help button into the header that opens a ZoomIn menu if available or default help menu if not. If your app already has ZoomIn, please post on #skylab Slack channel to ensure your configuration is correct prior to using this attribute.
`showChatButton`	Boolean		Integrates a chat button into the header that opens the IPUA help panel.
`showNotificationsButton`	Boolean		Integrates a notifications button into the header.
`cam`	JSON		Set this to cam object JSON, see Guidelines above.
`user`	JSON		Set this to user object JSON, see Guidelines above.
`onSNavigate`	Function		Handles the `s-navigate` event fired after the "Switch accounts" menu item is clicked, if the `user.emitSwitchAccountsNavEvent` property is set to `true`. The clicked menu item's `label`, `url`, and `dataRef` values are available on `e.detail`.
`requestCurrentAccessToken`	Function		Function that returns a Promise resolving to `{accessToken: "<avalara-ui-access-token>"}`, see Guidelines below.
`integrateLocaleSwitcher`	boolean		Integrates an `aui-locale-switcher` in the header.
`localeSwitcherOptionsList`	Array of locales		List of locales for the `aui-locale-switcher` in the header. See Guidelines below.

Guidelines

requestCurrentAccessToken

Customer Account Manager object

or data can be assigned as attribute using stringified JSON

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-header> user data is provided below.

or data can be assigned as attribute using stringified JSON

Environment

Locale switcher options list

List of available locales.

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

Skylab React links

General information about using our React package

Typescript

Exported types

// CAM object provided to component export type CamObject = Record; // User object provided to component export type UserObject = Record; // s-navigate event's e.detail export type SNavigateEvent = { label: string; url: string; dataRef: string; };

Design

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