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:

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:

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:

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: