4.32.2

Header

Displays the logo, optional product name, and user menu

Demo

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

let user = { accountId: 1234567, givenName: 'Tax', familyName: 'SpecialistSuperLongNameWhichWillCauseTruncation', avataxUserId: '45678', isLoggedIn: true, locale: "de-DE", isTechSupport: true }; const auiHeader = document.querySelector('aui-header'); auiHeader.user = user; auiHeader.localeSwitcherOptionsList = [{ code: 'en-US', label: "English" }, { code: 'de-DE', label: "German" }]; document.addEventListener('s-chat', event => console.log('s-chat event'));

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.
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.
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.

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.
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

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;

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