Modal Form

"Modal Form" action type is used to show modal form and get some input from user with great UI.

How it is useful?

You can create an action that will show a modal form with some inputs that user can fill and submit, executing another action to process the data.

The behavior and settings

Modal Forms consist of components and can be executed by only:

• Slash Commands;
• Context Menus.
• Message Components.

Please check Components article for the list of available components.

Submit Action must be selected in modal form settings. Its template will receive modal.values variable map with keys as component identifiers and values as data entered by member.

Limitations

Limitations

Modal Forms have some limitations:

1. Modal Form must have at least one component, and up to 5;
2. Modal Form can't execute another Modal Form as Submit Action.

Example

For example, you want to create a simple user profile command. To do it:

1. Create a new custom command (note the already existing action, it's the default one, don't touch it just yet);

2. Create a new action named "Submit" and select "Send Message" as action type, check "Ephemeral Message" and enter the following in the template:

   {% do member.getAttribute('profile').update(modal.values.profile) %}
   New profile has been successfully saved.
   {{ modal.values.profile }}
   

3. Create a new action named "Dialog" and do following:

   1. Select the "Modal Form" as action type;

   2. Set its title to "Update Profile";

   3. Set its submit action to "Submit" you have previously created:

   4. Add a new multiline Text Input component, fill label with "Enter profile", enter profile as identifier, check "Required" and enter the following template as its Default Value:

      {{ member.getAttribute('profile').value }}
      

4. In the default action from first step, make sure it's a "Send Message" action, enter the following as a template to show the current profile information:

   {{- (member.getAttribute('profile').value) ?: 'No information' -}}
   

   Add a new Button component with label "Update", any identifier and set its action to "Dialog" action.

5. Save.