How can I submit the results? Slack bolt-js, JavaScript

Question

The thing is that I have this first piece of code in which it sends me two inputs, one to add an appointment and the second one to delete it. I leave an image below this code so you can visualize it.

@Command('/echo')
  async appontmentCommand({ ack, say }) {
    await ack();
    try {
      await say({
        type: 'home',
        blocks: [
          {
            type: 'section',
            text: {
              type: 'plain_text',
              text: 'Ici, vous pouvez ajouter ou supprimer votre rendez-vous manuellement.',
              emoji: true,
            },
          },
          {
            type: 'divider',
          },
          {
            type: 'section',
            text: {
              type: 'mrkdwn',
              text: 'Pour ajouter un rendez-vous.',
            },
            accessory: {
              type: 'button',
              text: {
                type: 'plain_text',
                text: 'Ajouter',
                emoji: true,
              },
              value: 'click_me_123',
              action_id: 'button-action-add',
            },
          },
          {
            type: 'section',
            text: {
              type: 'mrkdwn',
              text: 'Pour supprimer un rendez-vous',
            },
            accessory: {
              type: 'button',
              text: {
                type: 'plain_text',
                text: 'Supprimer',
                emoji: true,
              },
              value: 'click_me_123',
              action_id: 'button-action',
            },
          },
        ],
      });

      console.log('Works correctly $$¤¤$$');
    } catch (error) {
      console.error('error right here $$¤¤$$: ',error);
    }
  }

IMAGE WITH THE RESULT OF LAST PIECE OF CODE RIGHT HERE

When I click on the add button, which in the image says "Ajouter", it opens a modal with these labels and inputs, and this is the code that allows me to do that.

@Action('button-action-add')
  async addAppointmentAction({ ack, body }) {
    await ack();
    try {
      const result = await this.app.client.views.open({
        token: process.env.SLACK_BOT_TOKEN,
        trigger_id: body.trigger_id,
        view: {
          type: 'modal',
          callback_id: 'view_1',
          title: {
            type: 'plain_text',
            text: 'Add rdv',
          },
          submit: {
            type: 'plain_text',
            text: 'Add',
          },
          close: {
            type: 'plain_text',
            text: 'Cancel',
            emoji: true,
          },

          blocks: [
            {
              type: 'input',
              element: {
                type: 'datepicker',
                initial_date: '' + format(new Date(), 'yyyy-MM-dd'),
                placeholder: {
                  type: 'plain_text',
                  text: 'Select a date',
                  emoji: true,
                },
                action_id: 'datepicker-action',
              },
              label: {
                type: 'plain_text',
                text: 'Day appointment',
                emoji: true,
              },
            },
            {
              type: 'input',
              element: {
                type: 'plain_text_input',
                action_id: 'plain_text_input-action',
                placeholder: {
                  type: 'plain_text',
                  text: 'Select a hour, ex: 14:30',
                  emoji: true,
                },
              },
              label: {
                type: 'plain_text',
                text: 'Time of appointment',
                emoji: true,
              },
            },
            {
              type: 'input',
              element: {
                type: 'plain_text_input',
                action_id: 'plain_text_input-action',
                placeholder: {
                  type: 'plain_text',
                  text: 'Issue',
                  emoji: true,
                },
              },
              label: {
                type: 'plain_text',
                text: 'Issue ',
                emoji: true,
              },
            },
          ],
        },
      });
      console.log(body.trigger_id);
    } catch (error) {
      console.error(error);
    }
  }

IMAGE WITH THE RESULT OF LAST PIECE OF CODE RIGHT HERE

But when I click on the submit button (There it says Add, but it's a sumbit button) to get the results in the back-end, I get this error: ERROR THAT I GET

I know that you have to push, to be able to use the view.sumbition method, but I have no idea how to do it, someone could help me with this.

score 0 · Answer 1 · answered Jul 22 '21 at 09:29

0

To read the payload of the modal submission, you need to handle view_submission

// Listen for view_submission modal events
app.view(callbackId, fn);

Check out this : https://slack.dev/bolt-js/concepts#view_submissions

Technical Details: https://github.com/slackapi/bolt-js#listening-for-events

answered Jul 22 '21 at 09:29

Suyash Gaur

2,481
2
9
22

But I have to push first, don't I? – Mustapha Jul 22 '21 at 09:58
If your modal window is displayed on the UI, it means push has been taken care of. Now you need to accept the value after the click of 'Add' submit button. Try this and let me know if that works. – Suyash Gaur Jul 22 '21 at 10:09
I can not find the way to do it, so i was trying to do it until your last message... How you would have done it – Mustapha Jul 22 '21 at 14:21
your function will look like : app.view('view_1', async ({ ack, body, view, client }) => { } . you also need to add block_id in your view. then you can use something like : const val = view['state']['values']['block_id']['datepicker-action'] – Suyash Gaur Jul 23 '21 at 15:53

How can I submit the results? Slack bolt-js, JavaScript

1 Answers1