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

[gautamsarawagi]

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.

[filmaj]

Hey @gautamsarawagi thanks for submitting. This is a feature we are aware of is a need, and are working to figure out how to enable it. However, we have no timeline at this time.

[gautamsarawagi]

Hey @filmaj Thanks for the reply.

Also, If you want I would love to pick this up. I actually spent some time on this. I would like to give it a try.