Modal Submissions

Slash commands can show modals to users that allow them to fill out and submit information.

In the interest of making your code a little more organized and easier to reason with, hiei.je allows you to create modular classes that handle what happens when those modals are submitted.

To illustrate this, let’s create a simple message command that lets someone report a message.

Creating a command that shows a modal

Start by creating a file in your interactions directory called report-message.js and add the following code.

import { MessageCommand } from 'hiei.js'
import { ActionRowBuilder, ModalBuilder, PermissionFlagsBits, TextInputBuilder, TextInputStyle } from 'discord.js'

class ReportMessage extends MessageCommand {
  constructor () {
    super({
      name: 'Report Message',
      defaultMemberPermissions: PermissionFlagsBits.SendMessages
    })
  }

  async run (interaction, message) {
    const report = new ModalBuilder()
      .setCustomId('reportMessage')
      .setTitle('Report Message')

    const reasonInput = new TextInputBuilder()
      .setCustomId('reason')
      .setLabel('Why are you reporting this message?')
      .setStyle(TextInputStyle.Paragraph)

    const firstRow = new ActionRowBuilder().addComponents(reasonInput)

    report.addComponents(firstRow)

    await interaction.showModal(report)
  }
}

export default ReportMessage

When the user invokes this command, Discord will prompt them with a modal dialogue asking them to enter a reason for their report.

Now we need to handle what happens when that user clicks the Submit button.

Handling the modal submission

Create another file in your interactions directory called report-message-submission.js and add the following code:

import { ModalSubmission } from 'hiei.js'

class ReportMessageSubmission extends ModalSubmission {
  constructor () {
    super({
      id: 'reportMessage'
    })
  }

  run (interaction) {
    return interaction.reply({ content: 'Thanks for your report.', ephemeral: true })
  }
}

export default ReportMessageSubmission

Notice the id parameter matches the custom ID we gave the modal in the previous file. That is how we know which modal to respond to.

The interaction parameter we get from the run() function contains everything we need to know about the modal submission, including all of the responses the user submitted.

In this example, we are simply thanking the user for their report, but you can do a lot more. For example, you may send a detailed report to an internal channel for moderators to review.