モーダルの Block kit

モーダルを使用すると、リッチかつインタラクティブで動的なビューを作成し、構造化された方式でユーザーから情報を収集できます。その作成には、モーダルビューのオープン/更新、またはプッシュアクションを使用します。 Block kit を使ったモーダルの例

モーダルビューはブロックを使用して構築されます。モーダルビューの構成要素は、タイトル、(ブロックで構成される) ビュー、投稿/閉じるボタンです。入力ブロックと呼ばれる、モーダル専用のブロックを使用することもできます。それには、次のようなものがあります。

• 単一行の入力
• 複数行の入力
• 選択メニューの入力
• 日付選択のカレンダーの入力
• チェックボックスの入力

インタラクティブなコンポーネントと入力ブロックとの比較

入力ブロックの動作は、他のブロックのインタラクティブなコンポーネントとは異なります。

ボタン、メニュー、その他のインタラクティブなコンポーネントは クリック時 にコマンドを呼び出すのに対し、入力ブロックは、 ビューの送信時 にのみコマンドを呼び出します。たとえばユーザーは [承認] と [拒否] の間で自由に選択を行えますが、その値は、ユーザーが送信ボタンをクリックしてモーダルを送信したときに初めて固定されます。

ユーザーの選択は、[送信] のクリック時に初めて固定される。

ビューに入力ブロックが含まれている場合は、 必ず 送信/閉じるボタンを定義しなければなりません。入力ブロックが含まれていない場合は、送信/閉じるボタンを指定する必要はありません。

モーダルのスタック

モーダルは、1つのビュースタックにつき1度に最大3つのビューを保持できます。ユーザーに表示されるのは一番上のビューのみであり、これはアクティブビューとも呼ばれます。ビュースタックは便利な機能です。ユーザーは、アクティブビューを送信した後/閉じた後に、ビュースタックを使用して前のビューに戻ることができます。

各モーダルは最大3つのビューをスタック可能

モーダルを開くとルートビューが開かれます。モーダルの更新は、( View ID を通して) 指定した既存のビューを置き換えて行います。また、モーダルビューのプッシュは、ビュースタックの最上位に新しいビューを適用して行います。

各ビューは、それに関連付けられた ID を持っています。既存のビューを更新する場合は、この View ID が必要となります。

ビュー間の情報の受け渡し

ユーザーがインタラクティブなコンポーネントを操作するか、モーダルを送信すると、bot コマンドが呼び出され、その bot コマンドにより下流のレシピがトリガーされます。モーダルの場合、この下流のレシピがモーダルビューを更新したりプッシュしたりすることがあります。下流のレシピに含まれるモーダルアクションが一部のパラメータ (ユーザー ID や商談 ID など) を自身のビューで使用できるように、そうしたパラメータを渡すこともできます。

これらのパラメータは、下流のレシピに含まれる New command トリガー内で定義して、そのレシピで受け取る準備をしておく必要があります。パラメータ名とデータ型を上流のレシピのものと一致させておくことが重要です。たとえば、(上流のレシピでレンダリングされる) モーダルビューで単一行の入力データとして opportunity_id を使用しているときは、下流のレシピの New command の文字列パラメータとしても opportunity_id を指定してください。

パラメータは、カンマで区切られた名前と値のペア (たとえば name: John Smith, user_id: AB12345) として渡すか、JSON (たとえば {"opportunity_id": "OPP1234567"}) で渡すことができます。JSON を使用すると、配列またはオブジェクト形式のパラメータを渡すこともできます。

モーダルの操作

モーダルは以下を使用して開くことができます。

• ボタン
• メニュー
• オーバーフロー
• 選択メニュー
• 日付選択のカレンダー
• ラジオボタン
• ショートカット
• メッセージアクション
• スラッシュコマンド
• モーダルビューの送信

以上のコンポーネントは bot コマンドを呼び出し、トリガー ID を生成します。そうすると、New command トリガーがその ID を取得できます。トリガー ID はモーダルに必須です。モーダルビューのオープン、更新、プッシュには、このトリガー ID が必要になります。

New command トリガーのデータツリーには、 Modals オブジェクトが含まれています。このオブジェクトは、ユーザーがモーダルアクションを実行できるように、モーダル関連のコンテキストを格納しています。

モーダルデータピル	説明
View ID	コマンドを呼び出したビュー (アクティブビュー) の ID。ビューの送信から実行されたコマンドの場合、そのビューは送信時にすでに閉じられているため、この View ID をビューの更新/プッシュに使用することはできません。ビューが1つだけアクティブな場合、この View ID はRoot View ID と同一になります。
Root View ID	ルートビューの View ID。
Previous View ID	現在のビューの下にあるビューの ID。
Private metadata	必要に応じて下流のレシピに渡すことができるプライベートデータ。この項目は暗号化され、ユーザーには表示されません。
Hash	モーダルの更新時に必要に応じて使用できる一意の値。指定すると、このハッシュを検証することで最新のビューだけが更新されるようになり、更新が非同期に発生する場合に正しいビューが更新されるようになります。

モーダルビューのオープン/更新、プッシュアクション

このアクションにより、リッチかつインタラクティブで動的なモーダルを作成し、構造化された方式でユーザーから情報を収集できます。モーダルはブロックを使用して構築されます。 モーダルビューのオープン/更新、プッシュアクション

Modal action type を open、update、push に設定すると、それぞれの設定に対応して、新規のモーダルビューを開いたり、既存のビューを更新したり、新規ビューを既存のビューの上にプッシュしたりできます。

どの種類のモーダルアクションでも、必ず トリガー ID が要求されます。トリガー ID は、ユーザーが以下を操作したときに、Slack によって生成されます。

• ボタン
• メニュー
• オーバーフロー
• 選択メニュー
• 日付選択のカレンダー
• ラジオボタン
• ショートカット
• メッセージアクション
• スラッシュコマンド
• モーダルビューの送信

モーダルビューを開くには、 New command トリガーの出力から取得される トリガー ID が必要です。 モーダルビューを開くための トリガー ID (New command トリガーから取得)

モーダルビューの更新にも トリガー ID が必要です。また、更新するビューの View ID の指定も必要です。この View ID も、 New command トリガーのデータツリーの Modals 以下から見つかります。 モーダルビューを更新するためのトリガー ID と View ID (どちらも New command トリガーから取得)

モーダルビューを (既存のビューの上に) プッシュするには、 トリガー ID が必要です。ただし、この トリガー ID は、既存のビューから生成されたものでなければなりません。 モーダルビューをプッシュするための トリガー ID (New command トリガーから取得)

モーダルビューの更新タイミング

通常、bot コマンドは、そのコマンド自身が存在するアクティブビュー (View ID) を更新します。 アクティブビュー上での変更

一方、モーダルの送信では通常、ルートビュー (Root View ID) または前のビュー (Previous View ID) が更新されます。これらのビューは、 New command トリガー データツリーの Modals 以下から見つかります。

Root View ID と Previous View ID は New command トリガーから見つかる

WARNING

デフォルトでは、送信されたビューは閉じられます。ビューの送信に応じてビューを更新するときは、正確な View ID を使用してください。

モーダルビューのプッシュのタイミング

通常、bot コマンドは、そのコマンド自身が存在するアクティブビュー ( View ID ) の上にビューをプッシュします。 View ID は、 New command トリガー データツリー内の Modals の以下にあります。

アクティブビュー上での変更

Root View ID と Previous View ID は New command トリガーから見つかる

WARNING

デフォルトでは、送信されたビューは閉じられます。モーダルビューはアクティブビューの上にのみプッシュするようにしてください。

モーダルビューのオープン/更新、プッシュアクションの入力

以下の表では、このアクションを使用する際の設定を示しています。

入力			説明
Trigger ID (必須)			モーダルビューを開くことができるのは、インタラクティブなコンポーネント (ボタンやメニューなど)、モーダルの送信、メッセージアクション、ショートカット、スラッシュコマンドのみです。ユーザーがこれらの機能を操作/使用すると、トリガー ID が生成されます。これらは、New command トリガーの Modals オブジェクト以下にあるデータツリーから取得できます。
Modal action type (必須)			Modal action type を open、update、push に設定すると、それぞれの設定に対応して、新規のモーダルビューを開いたり、既存のビューを更新したり、新規ビューを既存のビューの上にプッシュしたりできます。これは、[Custom value] に切り替えると動的に設定できます。アクションが必要としない View ID は無視されます (たとえば、モーダルビューを開いたり、プッシュしたりするときなど)。
View ID (任意)			既存のモーダルを更新する場合は、更新するビューの View ID を指定します。モーダルビューを開いたり、プッシュしたりするときは、この項目は無視されます。
View	Title of modal		モーダルビューのタイトル。最大24文字を使用できます。
	Blocks		積み上げたり並び替えたりできるブロックの配列。
	Submit view	Submit command	ユーザーがモーダルの送信を行ったときに呼び出されるコマンド。
		Hidden parameters	ユーザーがモーダルを送信するとき、いくつかのパラメータ (ユーザー ID、商談 ID など) を渡すと、下流のレシピは、操作に使用するコンテキストを得ることができます。 これらのパラメータは、下流のレシピに含まれる New command トリガー内で定義して、そのレシピで受け取る準備をしておく必要があります。上流と下流の両方のレシピのパラメータ名が一致していなければなりません。 パラメータは、カンマで区切られた名前と値のペア (例えば name: John Smith, user_id: AB12345) として渡すか、JSON (たとえば {"opportunity_id": "OPP1234567"}) で渡すことができます。JSON を使用するときは、配列またはオブジェクト形式のパラメータを渡すこともできます。 パラメータ名とデータ型を上流のレシピのものと一致させておくことが重要です。たとえば、(上流のレシピでレンダリングされる) モーダルビューで単一行の入力データとして opportunity_id を使用しているときは、下流のレシピの New command の文字列パラメータとしても opportunity_id を指定してください。
		Submit button label	送信ボタンのラベル。最大24文字を使用できます。
		Close button label	閉じるボタンのラベル。最大24文字を使用できます。
		Clear on close	閉じるボタンをクリックすると、モーダル内のすべてのビューが消去され、閉じられます。デフォルトは false です。
		Notify on close	ユーザーが閉じるボタンをクリックしたとき、view_closed イベントを送信します。デフォルトは false です。このイベントをリッスンするには、New event トリガーを使用します。
Advanced	Private metadata		高度なユーザー向け。機密データを渡すときに使用されます。この項目は暗号化され、ユーザーには表示されません。最大長は3000文字です。
	Callback ID		高度なユーザー向け。下流のレシピでビュー送信イベントを参照するために使用されます。最大長は255文字です。
	Hash		モーダルの更新時に必要に応じて使用できる一意の値。指定すると、このハッシュを検証することで最新のビューだけが更新されるようになり、更新が非同期に発生する場合に正しいビューが更新されるようになります。モーダルビューを開いたり、プッシュしたりするときは、この項目は無視されます。