Invite user dialog

Custom dialog containing 4 pre-defined fields: first name, last name, email, username.

Demo

API

Tag

Name	Description
`<aui-invite-user-dialog>`	Custom Element, accepts required `fields` JSON attribute as a primary source of component data.

Attributes

Name	Value	Required	Description
`description`	string		The description text at the top of the dialog. Defaults to Invite someone to help set up your account. This person will have administrator privileges with full access. You can adjust user access later.
`fields`	JSON array of field objects. See Guidelines below.		JSON data that component uses for rendering.
`open`	Boolean attribute		If present, the Dialog will be opened. When the open attribute is not set, the Dialog won't be shown to the user. The imperative `showModal` and `close` methods can also do this. When the Dialog is opened, focus will be shifted to one of the following, in descending order of precedence: the first focusable element (if any) in the content area, the first focusable element in the footer, the first focusable element in the header, or the dismiss button.
`submitting`	Boolean attribute		If present the invite user button will be disabled and show a loading state. This can be used to show the user something is happening while the API call in the background is being submitted.

Events

Name	Detail	Description
`s-send-invite`	The Dialog's `id` and `fields` object with up-to-date values are available on `e.detail`.	Fires when 'Send Invite' primary button is clicked. Contains id of the dialog, and `fields` object of type `{ [form_key_name]: value }`, where `form_key_name` = `firstName` \| `lastName` \| `email` \| `userName`.
`s-field-change`	The Dialog's `id` and the `key` and `value` of the field that was changed are available on `e.detail`.	Fires when a field is changed. It is important to note that this is the browsers input onchange event so it is only fired once the field loses focus after the field was changed.
`s-dismiss`	The closed Dialog's `id` and `returnValue`	Fires after the Dialog was closed, which happens when the user presses the Escape key or clicks the dismiss button or when the application calls `close()`. There is no "open" event because the application manages if and when the Dialog gets opened.

Demo

Opening the demo dialog

Change the Boolean in open={false} to true.

API

Tag

Name
`<AuiInviteUserDialog>`

Props

Name	Value	Required	Description
`description`	string		The description text at the top of the dialog. Defaults to Invite someone to help set up your account. This person will have administrator privileges with full access. You can adjust user access later.
`fields`	JSON array of field objects. See Guidelines below.		JSON data that component uses for rendering.
`open`	Boolean attribute		If present, the Dialog will be opened. When the open attribute is not set, the Dialog won't be shown to the user. When the Dialog is opened, focus will be shifted to one of the following, in descending order of precedence: the first focusable element (if any) in the content area, the first focusable element in the footer, the first focusable element in the header, or the dismiss button.
`submitting`	Boolean attribute		If present the invite user button will be disabled and show a loading state. This can be used to show the user something is happening while the API call in the background is being submitted.
`onS-send-invite`	Function		Fires when 'Send Invite' primary button is clicked. Contains id of the dialog, and `fields` object of type `{ [form_key_name]: value }`, where `form_key_name` = `firstName` \| `lastName` \| `email` \| `userName`.
`onS-field-change`	Function		Fires when a field is changed. Contains the id of the dialog and the `key` and `value` of the field that was changed. It is important to note that this is the browsers input onchange event so it is only fired once the field loses focus after the field was changed.
`onS-dismiss`	Function		Handles the `s-dismiss`event that fires after the Dialog was closed, which happens when the user presses the Escape key or clicks the dismiss button. There is no "open" event because the application manages if and when the Dialog gets opened. The closed Dialog's `id` and `returnValue` are available on `e.detail`.

Skylab React links

General information about using our React package

Typescript

Exported types

// Object passed in to the fields prop export type UserDialogFields = Record; // Accepted keys in UserDialogFields object export type UserDialogFieldKeys = 'firstName' | 'lastName' | 'email' | 'userName'; // s-send-invite event's e.detail export type SSendInviteEvent = { id: string; fields: FieldValues; }; // Object emitted in s-send-invite event's e.detail.fields export type FieldValues = Record; // Object to be provided as the value in the fields prop interface FieldProps { label?: string; value: string; className?: string; supplementaryText?: string; validationMessage?: string; minLength?: number; maxLength?: number; fsExclude?: boolean; }

Guidelines

Setting Fields JSON

This component expects fields JSON (optionally stringified) that contains the following keys: firstName, lastName, email, userName.

Each key's value is an object with the following properties:

value - field value. Dynamically updated with user input.
className - field class name. Will react to any class defined in Input. Can accept any custom class.
supplementaryText - optional helper text that is rendered right below field label.
validationMessage - optional text that is rendered right below field input box. Setting this property automatically adds error class to the field, highlighting it in red.
minLength - optional minimum length allowed for the field.
maxLength - optional maximum length allowed for the field.
fsExclude - optional property that adds fs-exclude class to the field. Used to tell FullStory to not track field's value (hide PII-sensitive information).

An example:

Design

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