Question 304543 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to listen for changes in the input choice set of an adaptive card?

I have been making a teams bot using Bot framework sdk 4.0 and Node JS.
i have this adaptive card with an image and input selection choices as a drop down and selecting and clicking the update button (which is an action.submit button) will update the image in the adaptive card.
enter image description here

I want to make it so that instead of having to click the update button i want it to trigger the update function when the selection is made from the dropdown list.

How do i listen for the selection in the dropdown list in the bot?

Tags:

2

Answers


  1. 0

    To listen for changes in the input choice set of an Adaptive Card in your Teams bot, you can use the app.adaptiveCards.actionSubmit method to handle the action.submit event triggered by the dropdown selection.
    Register the Adaptive Card action handler in your bot code using the app.adaptiveCards property. This will listen for the action.submit event triggered by the dropdown selection.

    app.adaptiveCards.actionSubmit('DynamicSubmit', async (context, _state, data: SubmitData) => {
  // Handle the dropdown selection here
  await context.sendActivity(`Dynamically selected option is: ${data.choiceSelect}`);
});

    In your Adaptive Card JSON, make sure to set the id property of the action.submit button to match the action name specified in the code above (DynamicSubmit in this example).

    {
  "type": "Action.Submit",
  "title": "Update",
  "id": "DynamicSubmit"
}

    if you want to update the image in the Adaptive Card based on the selected option, you can modify the action handler code as follows:

    app.adaptiveCards.actionSubmit('DynamicSubmit', async (context, _state, data: SubmitData) => {
  // Update the image based on the selected option
  if (data.choiceSelect === 'Option 1') {
    // Update image for Option 1
  } else if (data.choiceSelect === 'Option 2') {
    // Update image for Option 2
  } else {
    // Handle other options
  }
  await context.sendActivity(`Dynamically selected option is: ${data.choiceSelect}`);
});

    Refer : Microsoft Teams AI GitHub repository Specifically, you can refer to the index.ts file for the implementation details.

    Login or Signup to reply.
  2. 0

    you can use onInput property and add handler to it
    example :

    // Create an Adaptive Card with an Input.ChoiceSet
const card = {
  type: 'AdaptiveCard',
  body: [
    {
      type: 'Input.ChoiceSet',
      id: 'myChoiceSet',
      choices: [
        { title: 'Option 1', value: 'option1' },
        { title: 'Option 2', value: 'option2' },
        { title: 'Option 3', value: 'option3' }
      ],
      onInput: handleChoiceSetInput // Specify the callback function
    }
  ],
  actions: []
};
// Function to handle the choice set input
function handleChoiceSetInput(event) {
  const selectedValue = event.value;
  console.log(`Selected value: ${selectedValue}`);
  // Perform any desired actions based on the selected value
}
// Send the Adaptive Card to the user
await context.sendActivity({
  attachments: [CardFactory.adaptiveCard(card)]
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search