CODEWITHSUNDEEP
javascriptslackbolt
Julien.h
Julien.h

Reputation: 21

Slack API : how to update a user message from a button in ephemeral message

I exposed to you my problem with ephemeral message and update of user message

A simplified user case can :

when you write "hi" in a channel, that triggers an ephemeral message with a button "click", and when you click that button, it updates your first "hi" message, to "goodbye" for instance.

This is the code I tried. Unfortunatly, I think I have the wrong message_ts for the update. It seems to be the message_ts of the ephemeral message. Not the one of the original message. What do you think about it?

Have you an idea about how to achieve my goal?

const { WebClient } = require("@slack/web-api");
const slack_bot_token = process.env.SLACK_BOT_TOKEN;
const signing_secret = process.env.SLACK_SIGNING_SECRET;
const webClient = new WebClient(process.env.SLACK_BOT_TOKEN);

const { App } = require("@slack/bolt");
const app = new App({
  token: slack_bot_token,
  signingSecret: signing_secret,
});


app.message("hi", async ({ message, channel, say }) => {
  // Respond to action with an ephemeral message
  let channelID = message.channel;
  let userID = message.user;
  let ts = message.timestamp;
  await webClient.chat.postEphemeral({
    channel: channelID,
    user: userID,
    text: `👋 Hi <@${message.user}>`,
    blocks: [
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: `👋 Hey <@${message.user}>`,
        },
        accessory: {
          type: "button",
          text: {
            type: "plain_text",
            text: "Click me",
            emoji: true,
          },
          action_id: "click",
        },
      },
    ],
  });
});

// when the button with action_id "click" is clicked, the ephemeral message is discarded, and the user message is updated
app.action("click", async ({ ack, body, client, respond }) => {
  // Acknowledge action request before anything else
  await ack();
  let channelID = body.channel.id;
  let userID = body.user.id;
  let message_ts = body.container.message_ts;
  // erase original ephemeral message
  respond({
    response_type: "ephemeral",
    text: "",
    replace_original: true,
    delete_original: true,
  });
  // update the original "hi" message
  console.log (body.container);
  webClient.chat.update({
    token: slack_bot_token,
    channel: body.container.channel_id,
    ts: body.container.message_ts,
    text: "goodbye",
    replace_original: true,
    delete_original: true,
  });
});

(async () => {
  // Start your app
  await app.start(process.env.PORT || 3000);

  console.log("⚡️ Bolt app is running!!");
})();

Thanks for your help

Upvotes: 1

Views: 1696

Answers (1)

jure
jure

Reputation: 611

You're right that the message_ts you're trying to use right now is not the correct one. You'll need to save the message_ts of the original "hi" message instead.

You can do that in a number of ways, one would be to use a database, store the message_ts value and retrieve it when you need it again. However, if you want to avoid doing that, a neat thing you can do is set the value of the button you're generating in the ephemeral message as the message_ts of the original message.

// Keep in mind I've removed the code that isn't relevant
app.message("hi", async ({ message, channel, say }) => {
  ...
  let ts = message.timestamp;
  await webClient.chat.postEphemeral({
    ...
          type: "button",
          text: {
            type: "plain_text",
            text: "Click me",
            emoji: true,
          },
          action_id: "click",
          value: `${ts}` // <- store the message_ts here
        },
      },
    ],
  });
});

So then in the response to the users button click, you'll receive a payload which will, among other things, contain the value that you set earlier when you generated the button. You can then use this value to update the original message, as you are doing right now.

An example of action response payload: https://api.slack.com/reference/interaction-payloads/block-actions#examples

Upvotes: 1

Related Questions