在 Slack 模态视图中显示错误

1 javascript modal-dialog slack-api slack

我正在尝试创建一个模式,使用户能够输入日期以供进一步使用。该日期不能是过去或现在的日期(只能是未来的日期)。Slack表示可以在这里验证输入数据并在模态视图中显示错误,但我并不真正理解这种方法(我是一个自学者和新手)。

这是我的view对象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
              }
            }
          ]
        }
Run Code Online (Sandbox Code Playgroud)

我需要帮助在收到后在视图中显示错误(我已经可以描述该错误)view_submission。提前致谢!

Die*_*ego 5

首先,我强烈建议您在代码中将block_id“datepicker”更改为更具描述性的内容。Slack 的示例使用“ticket- due-date”,所以我将使用它。

输入日期后,Slack 将向您在交互请求 URL 中指定的端点发送 HTTP POST 请求。该有效负载将如下所示(从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"
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)

当您收到该请求时,您需要验证actions[0].selected_date。如果无效,则将下面的有效负载作为 POST 请求发送到response_url

{
  "response_action": "errors",
  "errors": {
    "ticket-due-date": "You may not select a due date in the past"
  }
}
Run Code Online (Sandbox Code Playgroud)