nylas-list-configurations

The nylas-list-configurations element displays a list of Scheduling Pages.

PreviewCode

import { NylasListConfigurations } from '@nylas/react';

export default function NylasListConfigurationsExample() {
return (
<div className="block border border-dashed border-gray-300 rounded-md p-8 justify-center">
  <NylasListConfigurations
    configurations={[
      {
        id: 'e05bbe74-386c-49c1-aaa4-826e9bbe7a8e',
        version: '1.0.0',
        participants: [
          {
            email: '[email protected]',
          },
        ],
        scheduler: {
          available_days_in_future: 7,
          min_cancellation_notice: 60,
          min_booking_notice: 60,
        },
        availability: {
          duration_minutes: 30,
        },
        event_booking: {
          booking_type: 'booking',
          title: 'Interview meeting',
        },
        slug: 'interview-meeting',
        appearance: {
          company_logo_url: 'https://www.example.com/logo1.png',
          color: '#000000',
          submit_button_label: 'Submit',
          thank_you_message: 'Thank you for booking an interview meeting with us. We look forward to meeting you!',
        },
        name: 'Interview meeting',
      },
      {
        id: '6ee3be0c-c14b-4ca4-8546-eecd4a538592',
        version: '1.0.0',
        participants: [
          {
            email: '[email protected]',
          },
        ],
        scheduler: {
          available_days_in_future: 7,
          min_cancellation_notice: 60,
          min_booking_notice: 60,
        },
        availability: {
          duration_minutes: 15,
        },
        event_booking: {
          booking_type: 'booking',
          title: 'Coffee meeting',
        },
        slug: 'coffee-meeting',
        appearance: {
          company_logo_url: 'https://www.example.com/logo2.png',
          color: '#FFFFFF',
          submit_button_label: 'Submit',
          thank_you_message: 'Coffee!',
        },
        name: 'Coffee',
      },
    ]}
  />
</div>
);
}

Properties

configurations?

Name	configurations
Description	The list of Configurations to display.
Type	(Configuration | GroupConfiguration)[]
Default	[]

listConfigurationsNextCursor?

Name	listConfigurationsNextCursor
Description	The next cursor for list Configurations, if any.
Type	null | string | undefined

schedulerPreviewLink?

Name	schedulerPreviewLink
Description	The Scheduler preview link to use when the user clicks on the preview button. You can use a placeholder {config.id} to replace the Configuration ID anywhere in the link.
Type	string
Default	''

selectedLanguage?

Name	selectedLanguage
Description	The selected language.
Type	LANGUAGE_CODE.de | LANGUAGE_CODE.en | LANGUAGE_CODE.es | LANGUAGE_CODE.fr | LANGUAGE_CODE.ja | LANGUAGE_CODE.ko | LANGUAGE_CODE.nl | LANGUAGE_CODE.sv | LANGUAGE_CODE.zh | undefined

Standalone properties

The following props are automatically configured when used within NylasSchedulerEditor. Set these props manually only if you’re using the component independently.

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	undefined | { '--nylas-primary'?: string | undefined; '--nylas-info'?: string | undefined; '--nylas-success'?: string | undefined; '--nylas-warning'?: string | undefined; '--nylas-error'?: string | undefined; '--nylas-error-pressed'?: string | undefined; '--nylas-base-0'?: string | undefined; '--nylas-base-25'?: string | undefined; '--nylas-base-50'?: string | undefined; '--nylas-base-100'?: string | undefined; '--nylas-base-200'?: string | undefined; '--nylas-base-300'?: string | undefined; '--nylas-base-400'?: string | undefined; '--nylas-base-500'?: string | undefined; '--nylas-base-600'?: string | undefined; '--nylas-base-700'?: string | undefined; '--nylas-base-800'?: string | undefined; '--nylas-base-900'?: string | undefined; '--nylas-base-950'?: string | undefined; '--nylas-color-blue-50'?: string | undefined; '--nylas-color-blue-100'?: string | undefined; '--nylas-color-blue-300'?: string | undefined; '--nylas-color-blue-500'?: string | undefined; '--nylas-color-blue-700'?: string | undefined; '--nylas-color-blue-900'?: string | undefined; '--nylas-color-red-50'?: string | undefined; '--nylas-color-red-100'?: string | undefined; '--nylas-color-red-300'?: string | undefined; '--nylas-color-red-500'?: string | undefined; '--nylas-color-red-700'?: string | undefined; '--nylas-color-red-900'?: string | undefined; '--nylas-color-green-50'?: string | undefined; '--nylas-color-green-100'?: string | undefined; '--nylas-color-green-300'?: string | undefined;'--nylas-color-green-500'?: string | undefined; '--nylas-color-green-700'?: string | undefined; '--nylas-color-green-900'?: string | undefined; '--nylas-color-yellow-50'?: string | undefined; '--nylas-color-yellow-100'?: string | undefined; '--nylas-color-yellow-300'?: string | undefined; '--nylas-color-yellow-500'?: string | undefined; '--nylas-color-yellow-700'?: string | undefined; '--nylas-color-yellow-900'?: string | undefined; '--nylas-color-purple-50'?: string | undefined; '--nylas-color-purple-100'?: string | undefined; '--nylas-color-purple-300'?: string | undefined; '--nylas-color-purple-500'?: string | undefined; '--nylas-color-purple-700'?: string | undefined; '--nylas-color-purple-900'?: string | undefined; '--nylas-color-sky-50'?: string | undefined; '--nylas-color-sky-100'?: string | undefined; '--nylas-color-sky-300'?: string | undefined; '--nylas-color-sky-500'?: string | undefined; '--nylas-color-sky-700'?: string | undefined; '--nylas-color-sky-900'?: string | undefined; '--nylas-color-black'?: string | undefined; '--nylas-color-grey-900'?: string | undefined; '--nylas-color-grey-800'?: string | undefined; '--nylas-color-grey-700'?: string | undefined; '--nylas-color-grey-600'?: string | undefined; '--nylas-color-grey-500'?: string | undefined; '--nylas-color-grey-400'?: string | undefined; '--nylas-color-grey-300'?: string | undefined; '--nylas-color-grey-200'?: string | undefined; '--nylas-color-grey-100'?: string | undefined; '--nylas-color-grey-50'?: string | undefined; '--nylas-color-white'?: string | undefined; '--nylas-font-family'?: string | undefined; '--nylas-font-size'?: string | undefined; '--nylas-border-radius'?: string | undefined; '--nylas-border-radius-2x'?: string | undefined; '--nylas-border-radius-3x'?: string | undefined; }

Events

Event	Description
createButtonClick	Event emitted when the user clicks the create event button.
deleteButtonClick	Event emitted when the user clicks the delete event button.
dismissNotification	Event emitted when the user dismisses the error notification.
editButtonClick	Event emitted when the user clicks the edit event button.
initListConfigurations	Event emitted when the element is initialized.
nylasSchedulerError	This event is fired when there is an error in the element.

Methods

getState() => Promise<"loading" | "error" | "loaded">

Type returned: Promise<"loading" | "error" | "loaded">

hideDeleteConfirmation() => Promise<void>

Type returned: Promise<void>

hideEditButtonLoading() => Promise<void>

Type returned: Promise<void>

registerCallback() => Promise<void>

Type returned: Promise<void>

setError(error: { message: string; type: NotificationType; category: ErrorCategory; title: string; }) => Promise<void>

Parameter	Type
error	{ message: string; type: NotificationType; category: ErrorCategory; title: string; }

Type returned: Promise<void>

setState(state: 'loading' | 'loaded' | 'error') => Promise<void>

Parameter	Type
state	"loading" | "error" | "loaded"

Type returned: Promise<void>

CSS parts

Part	Description
nfbf__button-outline
nfbf__cancel-cta
nfbf__close-button
nfbf__reschedule-cta
nfbf__title
nlc__create-new-cta	The create new Configuration CTA.

Code samples

The nylas-list-configurations element is automatically included in the main NylasSchedulerEditor component. The following code samples show how to use the element on its own.

StandaloneEvent handlersCustom theme

<nylas-list-configurations
  configurations="your-configurations"
  scheduler-preview-link="https://your-domain.com/schedule/{config.id}">
</nylas-list-configurations>

// Listen for create button clicks
element.addEventListener('createButtonClick', (event) => {
  console.log('Create button clicked');

  // Navigate to create configuration page
  navigateToCreateConfiguration();
});

// Listen for edit button clicks
element.addEventListener('editButtonClick', (event) => {
  const { configuration } = event.detail;
  console.log('Edit button clicked for:', configuration);

  // Navigate to edit configuration page
  navigateToEditConfiguration(configuration);
});

// Listen for delete button clicks
element.addEventListener('deleteButtonClick', (event) => {
  const { configuration } = event.detail;
  console.log('Delete button clicked for:', configuration);

  // Show delete confirmation
  showDeleteConfirmation(configuration);
});

// Listen for initialization
element.addEventListener('initListConfigurations', (event) => {
  const { cursor } = event.detail;
  console.log('List configurations initialized with cursor:', cursor);

  // Load configurations
  loadConfigurations(cursor);
});

<nylas-list-configurations
  configurations="your-configurations"
  scheduler-preview-link="https://your-domain.com/schedule/{config.id}"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-list-configurations>