• /
  • Log in
  • Free account

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

1
class Example extends React.Component {
2
constructor() {
3
super(...arguments);
4
5
this.state = { accountId: null };
6
7
this.onChangeAccount = this.onChangeAccount.bind(this);
8
}
9
10
onChangeAccount(value) {
11
alert(`Selected account: ${value}`);
12
13
this.setState({ accountId: value });
14
}
15
16
render() {
17
return (
18
<AccountPicker
19
value={this.state.accountId}
20
onChange={this.onChangeAccount}
21
/>
22
);
23
}
24
}

Props

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

crossAccountboolean
DEFAULT
false

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.

disabledboolean

If true, the dropdown is not available for interaction.

onChangefunction

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

function (
event: Event,
value: number //

Id of the account selected.

) => undefined
spacingTypeenum[]

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 of
AccountPicker.SPACING_TYPE.EXTRA_LARGE,
AccountPicker.SPACING_TYPE.LARGE,
AccountPicker.SPACING_TYPE.MEDIUM,
AccountPicker.SPACING_TYPE.NONE,
AccountPicker.SPACING_TYPE.OMIT,
AccountPicker.SPACING_TYPE.SMALL,
>
>
styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

valuenumber|enum

Id of the selected account.

<One of
>

Methods

AccountPicker.render

function () => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.