AccountPicker

Retrieves all accounts and allows account selection through dropdown and search. To capture the currently selected account, you can use the onChange listener.

Note that the platform already contains its own account picker, which is located in the header of it. This one can be configured to be shown using the nerdlet.setConfig API (passing { accountPicker: true }), and its value can be read using <PlatformStateContext.Consumer>. For full reference, please check these APIs.

Usage

import { AccountPicker } from 'nr1'

Examples

Basic

class Example extends React.Component {
  constructor() {
    super(...arguments);


    this.state = { accountId: null };


    this.onChangeAccount = this.onChangeAccount.bind(this);
  }


  onChangeAccount(_, value) {
    alert(`Selected account: ${value}`);


    this.setState({ accountId: value });
  }


  render() {
    return (
      <AccountPicker
        value={this.state.accountId}
        onChange={this.onChangeAccount}
      />
    );
  }
}

With inline label

class Example extends React.Component {
  constructor() {
    super(...arguments);


    this.state = { accountId: null };


    this.onChangeAccount = this.onChangeAccount.bind(this);
  }


  onChangeAccount(_, value) {
    alert(`Selected account: ${value}`);


    this.setState({ accountId: value });
  }


  render() {
    return (
      <AccountPicker
        label="Account"
        labelInline
        value={this.state.accountId}
        onChange={this.onChangeAccount}
      />
    );
  }
}

Props

ariaLabel

string

Provide a descriptive label for this control, e.g. "Accounts".

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

crossAccount

boolean

Shows an option at the top named "All accounts". When selected, the value provided by the onChange callback is AccountPicker.CROSS_ACCOUNT. This is useful when you have functionality that can operate on multiple accounts.

disabled

boolean

If true, the dropdown is not available for interaction.

label

string

Text to display as label.

labelInline

boolean

Display the label inline the form control.Use only when the component is not inside a Form. In that case set layoutType to Form.LAYOUT_TYPE.SPLIT in the Form component.

onChange

function

Callback fired every time the user clicks an account from the list. function (

event: React.MouseEvent,

value: number Id of the account selected.

)

spacingType

enum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT. <Array of

<One ofAccountPicker.SPACING_TYPE.EXTRA_LARGE,
AccountPicker.SPACING_TYPE.LARGE,
AccountPicker.SPACING_TYPE.MEDIUM,
AccountPicker.SPACING_TYPE.NONE,
AccountPicker.SPACING_TYPE.OMIT,
AccountPicker.SPACING_TYPE.SMALL,
>

>

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element.Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

value

number|enum

Id of the selected account.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

With inline label

Props

string

string

boolean

boolean

string

boolean

function

enum[]

object

string

number|enum

Usage