Displaying errors in slack modal view

Question

I'm trying to create a modal which will enable the users to input a date for further use. This date cannot be a date from the past or present (only future dates). Slack indicates that it is possible to validate input data and display errors in the modal views here but I don't really understand this method (I'm a self-learner and a greenhorn).

here's my view object in the view.open :

 { type: "modal", callback_id: "tests", title: { type: "plain_text", text: "Tests", emoji: true }, submit: { type: "plain_text", text: "Send", emoji: true }, close: { type: "plain_text", text: "Cancel", emoji: true }, blocks: [ { type: "input", block_id: "datepicker", optional: false, element: { action_id: "calendar", type: "datepicker", initial_date: "2020-09-05", placeholder: { type: "plain_text", text: "Select a date", emoji: true } }, label: { type: "plain_text", text: "Label", emoji: true } } ] }

I need help with displaying the error in the view ( I can already describe that error) after receiving view_submission . Thanks in advance!

Answer 1

First, I highly recommend that, in your code, you change the block_id from "datepicker" to something more descriptive. Slack's example uses "ticket-due-date", so I'll use that.

When a date is entered, Slack will send an HTTP POST request to the endpoint you specified in the Interactivity Request URL. That payload will look something like this (acquired from Block Kit Builder ):

{
    "type": "block_actions",
    "user": {
        "id": "U0CA5",
        "username": "Amy McGee",
        "name": "Amy McGee",
        "team_id": "T3MDE"
    },
    "api_app_id": "A0CA5",
    "token": "Shh_its_a_seekrit",
    "container": {
        "type": "message",
        "text": "The contents of the original message where the action originated"
    },
    "trigger_id": "12466734323.1395872398",
    "team": {
        "id": "T0CAG",
        "domain": "acme-creamery"
    },
    "response_url": "https://www.postresponsestome.com/T123567/1509734234",
    "actions": [
        {
            "type": "datepicker",
            "block_id": "ticket-due-date",
            "action_id": "vxw",
            "selected_date": "1990-04-26",
            "initial_date": "1990-04-28",
            "action_ts": "1599429672.233568"
        }
    ]
}

When you receive that request, you need to validate actions[0].selected_date . If invalid, then send the payload below as a POST request to response_url .

{
  "response_action": "errors",
  "errors": {
    "ticket-due-date": "You may not select a due date in the past"
  }
}

Answer 2

You need to respond to the same request that is calling your endpoint.

Here's how the interaction endpoint would look like:

 app.post("/your_endpoint", (req, res) => { const validationErrors = { datepicker: "Please enter a valid date" }; // Respond to the request with an error payload res.send({ response_action: "errors", errors: validationErrors, }); });