---
title: "Rocket Chat Create Modal Guide"
slug: "create-modal"
description: "Discover how to create modals in Rocket Chat. Build secure, dynamic UI components that improve collaboration workflows."
updated: 2024-10-04T18:25:07Z
published: 2024-10-04T18:25:07Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.rocket.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Create Modal

The UI modal element is displayed in front of the page content. It is a pop-up window that can contain text or user interaction elements. The window is triggered by an action or condition. In this document, we will create a basic app that triggers a modal using a slash command.

1. In your app folder, create a file to define the slash command and the modal. For example, `OpenModalCommand.ts`.
2. Import the following:

```typescript
import { IModify, IRead } from "@rocket.chat/apps-engine/definition/accessors";
import { App } from "@rocket.chat/apps-engine/definition/App";
import { ISlashCommand, SlashCommandContext } from "@rocket.chat/apps-engine/definition/slashcommands";
import { UIKitSurfaceType } from "@rocket.chat/apps-engine/definition/uikit";
```

1. In the `OpenModalCommand` class, define the slash command as follows:

```typescript
export class OpenModalCommand implements ISlashCommand {
  public command = 'openmodal'; // this is what we will type when calling the slashcommand: /openmodal
  public i18nParamsExample = 'slashcommand_params';
  public i18nDescription = 'slashcommand_description';
  public providesPreview = false;
}
```

This slash command will trigger the modal on the screen.

1. In the same class, define the modal as follows:

```typescript
constructor(private readonly app: App) { }

  public async executor(context: SlashCommandContext, _read: IRead, modify: IModify): Promise<void> {
    modify.getUiController().openSurfaceView(
      {
        type: UIKitSurfaceType.MODAL, // type of ui - cb or modal
        title: { // title of the modal
          text: 'hello world', // title text
          type: 'plain_text' },
        blocks: [{ // content of the modal
        type: 'section', // type of the first block
        blockId: 'section_1',
          text: { // the text object in this section
              type: 'plain_text',
              text: 'lorem ipsum 🚀',
              emoji: true,
            }
      }, 
      {
        type: 'divider', // type of the second block
        blockId: 'divider_1',
      }
     ]
    },
      { triggerId: context.getTriggerId()! }, // like security measure - to show users the ui if users interacted with rc
      context.getSender() // user that types the slash command
    )
  }
```

In this case, we have stacked two blocks - the section with text and a divider block.

1. Update your main app class to call the `OpenModalCommand` class.
2. Deploy and test the app. In any room, send the slash command `/openmodal`.

The following screenshot shows the modal with the content that we defined in the blocks:

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdCkPYyQlwCsChHFzVjX8OOJktJvaEozC-y1_Qcsk6pweLbE6XAwVwsH7c3AQ2atM8axyYY9EAUSc8BJWV_Hi7EaBaIt5AI-i-6YL3GZm9ryKOla-mXdYgHfeEEU2xnMHsjRjfn14zYD9GLkgRma2XRSw?key=ywe82KQGLyGyXkwSfq3GFQ)