> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# AlertingDialogShell()

- Package: [@gooddata/sdk-ui-dashboard](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/index.md)
- Kind: function
- Stability: beta
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-dashboard/src/presentation/automations/alerting/blocks/AlertingDialogShell.tsx
- Guides: [Customize the alert and scheduled email dialogs](https://www.gooddata.ai/docs/gooddata-ui/latest/dashboard-plugins/customize-automation-dialogs/index.md)

> **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

The alerting dialog's chrome, connected to the dialog's state: the modal overlay, the dialog frame with the header row (the title input) and the action bar, the scrollable content area around `children`, the dialog's warning and validation messages, the stale-filters confirmation step shown before the dialog when the saved filters no longer match the dashboard, and the delete confirmation reached from the action bar in edit mode. While `useAlertingDialogContext().isLoading` is true it renders the loading skeleton and none of its children.

The default dialog is `<AlertingDialogShell>` around the region and field blocks; a custom `AlertingDialogComponent` that keeps this chrome and arranges the blocks differently renders the shell itself. The shell does not own the submit: call [useAlertSubmit()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.usealertsubmit/index.md) and pass its `submit` and `isSaving`, so the footer button and any Enter handler in the body share one instance. Call that hook once `useAlertingDialogContext().isLoading` is false for the first time — the state hooks throw until the dialog's data has first loaded (after that they stay available through a refresh) — and render the shell alone (any `onSubmit`, `isSaving: false`) until then, as the example does.

Needs an ambient `IntlProvider`; inside a `Dashboard` the dashboard's provider covers it.

**Signature:**

```typescript
export declare function AlertingDialogShell(props: IAlertingDialogShellProps): ReactElement;
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| props | [IAlertingDialogShellProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ialertingdialogshellprops/index.md) |  |

**Returns:**

ReactElement

## Example

```tsx
function MyAlertingDialog(props: IAlertingDialogProps) {
    const { isLoading } = useAlertingDialogContext();
    // the state hooks throw until the dialog's data has first loaded; the shell shows the skeleton
    if (isLoading) {
        return <AlertingDialogShell {...props} onSubmit={() => {}} isSaving={false} />;
    }
    return <MyAlertingDialogBody {...props} />;
}

function MyAlertingDialogBody(props: IAlertingDialogProps) {
    const { isSaving, submit } = useAlertSubmit(props);
    return (
        <AlertingDialogShell {...props} onSubmit={() => void submit()} isSaving={isSaving}>
            <AlertingDialogFormFieldGroup label="When">
                <AlertingDialogMeasure />
                <AlertingDialogComparisonOperator />
                <AlertingDialogThreshold />
            </AlertingDialogFormFieldGroup>
            <AlertingDialogRecipients />
        </AlertingDialogShell>
    );
}
```