AutomationSelect

• Reference
• 3-min read

The AutomationSelect component allows you to choose one or more options from a collapsed dropdown menu. When used to create an action, it also allows you to switch to expression mode, which displays an AutomationTextInput for entering a dynamic expression.

Import

import { AutomationSelect } from '@dynatrace/automation-action-components';

Props

Prop Table did not receive data

Usage

AutomationSelect accepts the same structure as the Strato Select component. For basic usage, refer to the Select component documentation.

Options must be wrapped in <Select.Content>:

<AutomationSelect value={value} onChange={setValue}>
  <Select.Content>
    <Select.Option value="option-1">Option 1</Select.Option>
    <Select.Option value="option-2">Option 2</Select.Option>
  </Select.Content>
</AutomationSelect>

Expression mode

Expression mode is only available when the component is used inside an action. When the user switches to expression mode, or when the component is initialized with an expression value, value becomes a runtime expression string such as {{ result("task_1")["value_1"] }}. Use containsExpressionOrStatement to guard any logic that requires a resolved value.

ExpressionMode.tsx

import { useState } from 'react';
import { AutomationSelect, containsExpressionOrStatement } from '@dynatrace/automation-action-components';
import { Select } from '@dynatrace/strato-components/forms';

export const ExpressionMode = () => {
  const [value, setValue] = useState<string | null>('{{ result("task_1")["value_1"] }}');

  return (
    <>
      <AutomationSelect value={value} onChange={setValue}>
        <Select.Content>
          <Select.Option value="low">Low</Select.Option>
          <Select.Option value="medium">Medium</Select.Option>
          <Select.Option value="high">High</Select.Option>
        </Select.Content>
      </AutomationSelect>
      <p>{containsExpressionOrStatement(value) ? 'Now in expression mode' : 'Simple mode'}</p>
    </>
  );
};