Zenn
😸

Slack Platformのフォームにてユーザーを複数選択できるようにする

2023/07/03に公開
Slack
TypeScript
Deno
tech

導入

Slack Platform (次世代プラットフォーム) にてフォームを表示し、利用者に対象者を複数選択してもらいたいケースがありました。
このとき、サンプルアプリを見ながら作っていたのですが、複数選択のサンプルが無く実装にやや手間取ったので備忘もかねて記事にします。
(※実装時期が2023/3月頃だったので、今はサンプルがあるかもしれません）

参照した公式ドキュメント

実装

私の実装では app_name/workflows/workflow.ts に実装しています。

import { DefineWorkflow, Schema } from "deno-slack-sdk/mod.ts";

// ワークフローの定義
const addWorkflow = DefineWorkflow({
  callback_id: "callback_id",
  title: "array test",
  description: "適当な説明",
  input_parameters: {
    properties: {
      interactivity: {
        type: Schema.slack.types.interactivity,
      },
      user_id: {
        type: Schema.slack.types.user_id,
      },
    },
    required: ["interactivity"],
  },
});

// フォームの定義
const inputForm = addWorkflow.addStep(
  Schema.slack.functions.OpenForm,
  {
    title: "Form Title",
    interactivity: addWorkflow.inputs.interactivity,
    submit_label: "Submit",
    fields: {
      elements: [{
        name: "users",
        title: "ユーザー (複数選択可)",
        type: Schema.types.array,
        items: {
          type: Schema.slack.types.user_id,
        },
        description: "対象ユーザー",
      }],
      required: ["users"],
    },
  },
);

複数ユーザーを選択できるようにするには以下のように設定する必要があります。

  1. 要素の type には Schema.types.array を指定する
  2. itemsに type: Schema.slack.types.user_id を指定する

表示サンプル

ワークフローが起動されると以下のように表示され、ユーザーが複数名表示されることが確認できます。

応用

ドキュメントによると、Schema.types.array はユーザー以外にもチャンネルと文字列も設定可能とのこと

また、maxItemsも指定可能なため、最大選択個数も制御できるようです。

Discussion