[QUERY] Ability to add dropdown with dynamic values in forms.

Question

I want to build a form which contains 2 dropdowns. and the options of second dropdown depends on the first dropdown'd input.

Context

I tried this way :

// greeting_workflow.ts

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

const GreetingWorkflow = DefineWorkflow({
  callback_id: "greeting_workflow",
  title: "Send a greeting",
  description: "Send a greeting to channel",
  input_parameters: {
    properties: {
      interactivity: {
        type: Schema.slack.types.interactivity,
      },
      channel: {
        type: Schema.slack.types.channel_id,
      },
    },
    required: ["interactivity"],
  },
});

const findDropDown2options = () => {
  console.log("Hello")
  // DropDownValue1Function
}

const inputForm = GreetingWorkflow.addStep(
  Schema.slack.functions.OpenForm,
  {
    title: "Send a greeting",
    interactivity: GreetingWorkflow.inputs.interactivity,
    submit_label: "Send greeting",
    fields: {
      elements: [
        {
          name: "recipient",
          title: "Recipient",
          type: Schema.slack.types.user_id,
        },
        {
          name: "channel",
          title: "Channel to send message to",
          type: Schema.slack.types.channel_id,
          default: GreetingWorkflow.inputs.channel,
        },
        {
          name: "message",
          title: "Message to recipient",
          type: Schema.types.string,
          long: true,
        },
        {
          name: "dropDownValue1",
          title: "Select a Value:",
          type: Schema.types.string,
          enum: ["value 1", "value 2", "value 3"],
          onChange: findDropDown2options()
        },
        {
          name: "dropDownValue2",
          title: "Select a Value 2:",
          type: Schema.types.string,
          enum: ["value 1", "value 2", "value 3"],
        },
      ],
      required: ["recipient", "channel", "message", "dropDownValue1"],
    },
  },
);

GreetingWorkflow.addUnhandledEventHandler(async ({body}) => {
  console.log("Unhandled Event Happened",body)
})
// Link the function to update dropDownValue2 options dynamically
const dropDownValue2Step = GreetingWorkflow.addStep(
  DropDownValue1Function,
  {
    dropDownValue1: inputForm.outputs.fields.dropDownValue1,
  },
);

export default GreetingWorkflow;

custom functions:

// greeting_function.ts

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

export const DropDownValue1Function = DefineFunction({
  callback_id: "drop_down_value_1_function",
  title: "Process DropDownValue1 Selection",
  description: "Process selection of dropDownValue1 and update dropDownValue2 options",
  source_file: "functions/greeting_function.ts",
  event: "on_change",
  input_parameters: {
    properties: {
      dropDownValue1: {
        type: Schema.types.string,
        description: "The value selected from dropDownValue1",
      },
    },
    required: ["dropDownValue1"],
  },
  output_parameters: {
    properties: {
      dropDownValue2: {
        type: Schema.types.string,
        description: "The options for dropDownValue2",
      },
    },
    required: ["dropDownValue2"],
  },
});

export default SlackFunction(
  DropDownValue1Function,
  async ({ inputs }) => {
    const { dropDownValue1 } = inputs;

    let secondDropdownOptions: string[] = [];

    // Determine options for dropDownValue2 based on dropDownValue1 selection
    switch (dropDownValue1) {
      case "value 1":
        secondDropdownOptions = ["value1_option1", "value1_option2"];
        break;
      case "value 2":
        secondDropdownOptions = ["value2_option1", "value2_option2"];
        break;
      case "value 3":
        secondDropdownOptions = ["value3_option1", "value3_option2"];
        break;
      default:
        secondDropdownOptions = ["default 1", "default 2", "default 3"];
        break;
    }

    // Convert the array of options to a comma-separated string
    const dropdownValue2 = secondDropdownOptions.join(",");

    console.log(dropdownValue2)

    return { outputs: { dropDownValue2: dropdownValue2 } };
  },
);

The functions getting triggered on form submit only.

Requirements

Please read the Contributing guidelines and Code of Conduct before creating this issue or pull request. By submitting, you are agreeing to those rules.

Start by reviewing greeting_workflow.ts and greeting_function.ts, then inspect the SDK's form and interactivity entry points for support for on-change updates. Determine whether dynamic dropdown options are supported; done means documenting the supported approach or clearly recording the limitation and expected behavior.