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

# ScheduledEmailDialogShell()

- 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/scheduledEmail/blocks/ScheduledEmailDialogShell.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 scheduled-export dialog's chrome, connected to the dialog's state: the modal overlay, the dialog frame with the header row (the back button and the title input) and the action bar, the General and Filters tabs, the scrollable content area around the selected tab's content, the body's error and validation messages, the stale-filters confirmation step shown before the dialog when the saved filters or schedule timezone no longer match the dashboard, and the delete confirmation reached from the action bar in edit mode. While `useScheduledEmailDialogContext().isLoading` is true — on scheduled email the ordinary path while a widget export's filters load — it renders the loading skeleton and none of its children.

The default dialog is `<ScheduledEmailDialogShell>` around the region blocks and form; a custom `ScheduledEmailDialogComponent` that keeps this chrome and arranges the blocks differently renders the shell itself. The shell does not own the save: call [useSaveScheduledEmailToBackend()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.usesavescheduledemailtobackend/index.md) and pass its `handleSaveScheduledEmail`, `isSavingScheduledEmail` and `savingErrorMessage`; build Enter handlers for the blocks you place with [useScheduledEmailSubmitOnEnter()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.usescheduledemailsubmitonenter/index.md) over the same `handleSaveScheduledEmail`. Call that hook once `useScheduledEmailDialogContext().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 ScheduledEmailDialogShell(props: IScheduledEmailDialogShellProps): ReactElement;
```

## Parameters

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

**Returns:**

ReactElement

## Example

```tsx
function MyScheduledEmailDialog(props: IScheduledEmailDialogProps) {
    const { isLoading } = useScheduledEmailDialogContext();
    // the state hooks throw until the dialog's data has first loaded; the shell shows the skeleton
    if (isLoading) {
        return <ScheduledEmailDialogShell {...props} onSubmit={() => {}} isSaving={false} />;
    }
    return <MyScheduledEmailDialogBody {...props} />;
}

function MyScheduledEmailDialogBody(props: IScheduledEmailDialogProps) {
    const { handleSaveScheduledEmail, isSavingScheduledEmail, savingErrorMessage } =
        useSaveScheduledEmailToBackend(props);
    const submitOnEnter = useScheduledEmailSubmitOnEnter({
        onSubmit: handleSaveScheduledEmail,
        isSaving: isSavingScheduledEmail,
    });
    return (
        <ScheduledEmailDialogShell
            {...props}
            onSubmit={handleSaveScheduledEmail}
            isSaving={isSavingScheduledEmail}
            savingErrorMessage={savingErrorMessage}
        >
            <ScheduledEmailDialogDestination />
            <ScheduledEmailDialogRecipients onKeyDownSubmit={submitOnEnter} />
        </ScheduledEmailDialogShell>
    );
}
```