Skip to content

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#

Please refer to Modal Forms article to get familiar with general settings and features.



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.