Implement an action-based message extension

Completed

To implement an action-based message extension, you need to send a task module, if required, process the task module submission, and respond with a Teams message. The Teams Toolkit scaffolds the required methods for you, which you'll update as needed for your app. In this unit, you'll learn about the functionality your app needs to implement.

Create and send the task module

If you aren't using a static list of parameters to create the task module, you'll need to create and return the task module from your message extension's web service.

When your extension is invoked, the Bot Framework will send an Activity object to your web service of type composeExtension/fetchTask with a command ID, along with other metadata about the request depending on where in Teams the user invokes from.

Your web service needs to respond with a task object that contains either a taskInfo object with the Adaptive Card or web URL, or a simple string message.

The following code demonstrates a response implemented using the Bot Framework SDK. The method handleTeamsMessagingExtensionFetchTask() is called by the Bot Framework SDK when a message of type composeExtension/fetchTask is received. This example responds with an Adaptive Card:

class TeamsMessagingExtensionsActionPreview extends TeamsActivityHandler {
    handleTeamsMessagingExtensionFetchTask(context, action) {
      const adaptiveCard = CardFactory.adaptiveCard({
        actions: [{
          data: { submitLocation: 'messagingExtensionFetchTask'},
          title: 'Submit',
          type: 'Action.Submit'
        }],
        body: [
          { text: 'Task Module', type: 'TextBlock', weight: 'bolder'},
          { type: 'TextBlock', text: 'Enter text for Question:' },
          { id: 'Question', placeholder: 'Question text here', type: 'Input.Text', value: userText },
          { type: 'TextBlock', text: 'Options for Question:' },
          { type: 'TextBlock', text: 'Is Multi-Select:' },
          {
            choices: [{ title: 'True', value: 'true' }, { title: 'False', value: 'false' }],
            id: 'MultiSelect',
            isMultiSelect: false,
            style: 'expanded',
            type: 'Input.ChoiceSet',
            value: isMultiSelect ? 'true' : 'false'
          },
          { id: 'Option1', placeholder: 'Option 1 here', type: 'Input.Text', value: option1 },
          { id: 'Option2', placeholder: 'Option 2 here', type: 'Input.Text', value: option2 }
        ],
        type: 'AdaptiveCard',
        version: '1.0'
      });

      return {
        task: {
          type: 'continue',
          value: {
            card: adaptiveCard,
            height: 450,
            title: 'Task Module Fetch Example',
            url: null,
            width: 500
          }
        }
      };
    }
}

Handle the task module submission

When a user submits the message extension's task module, the Bot Framework will send another Activity object to your web service of type composeExtension/submitAction with the command ID and parameter values set.

You have multiple options when receiving this message, including:

• No response: don't respond with any feedback to the user, such as when the submission triggers a long-running action or when you plan to provide feedback in another way, such as a proactive message.
• Another task module: you can respond with another task module as part of a multi-step interaction.
• Card response: respond with a card that the user can interact with or insert into a message.
• Adaptive Card from a bot: respond with a card that is added to the conversation as a reply to a message, enabling a bot to update the message in the future. To respond to the conversation, you'll need to register your message extension as a bot.
• Request authentication or additional configuration from the user: after the user completes the process, the original invoke is resent to your web service.

The following code demonstrates a message extension web service, implemented using the Bot Framework SDK, that responds with a card that can either be added as a response to a message, or added to the Compose message box. This is the most common response type:

class TeamsMessagingExtensionsActionPreview extends TeamsActivityHandler {
  handleTeamsMessagingExtensionSubmitAction(context, action) {
    const data = action.data;
    const heroCard = CardFactory.heroCard(data.title, data.text);
    heroCard.content.subtitle = data.subTitle;
    const attachment = { contentType: heroCard.contentType, content: heroCard.content, preview: heroCard };

    return {
      composeExtension: {
        type: 'result',
        attachmentLayout: 'list',
        attachments: [
          attachment
        ]
      }
    }
  }
}

The method handleTeamsMessagingExtensionSubmitAction() is called by the Bot Framework SDK when a message of type composeExtension/submitAction is received.