How can I invoke onInvokeActivity in task module?

Question

I'm building teams app, and I want to invoke function to fetch data from backend every time user input in tag input form which is Input.choiceSet.

So I guess I need to use onInvokeActivity inside of export class ActionApp extends TeamsActivityHandler like below. But it's not invoked when I typed in the input form.

I appreciate any advice to achieve this.

export class ActionApp extends TeamsActivityHandler {
  constructor() {
    super();
  }
  // other codes..

  async onInvokeActivity(context: TurnContext): Promise<any> {
    if (context.activity.name == 'application/search') {
      
      console.log("invoked");
      //need to fetch data from backend every time user input in tag input form
    }

    return super.onInvokeActivity(context);
  }

Following is the card sent to task module.

{
      $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
      type: "AdaptiveCard",
      version: "1.4",

      body: [
        {
          type: "TextBlock",
          weight: "Bolder",
          text: "Original Message Link:",
          wrap: true,
          size: "Medium",
        },
        {
          id: "url",
          type: "Input.Text",
          value: originalMessageURL,
          wrap: true,
          size: "Medium",
        },
        {
          type: "TextBlock",
          weight: "Bolder",
          text: "Original Message:",
          wrap: true,
          size: "Medium",
        },

        {
          id: "message",
          type: "Input.Text",
          value: messageText,
          wrap: true,
          size: "Medium",
        },
        {
          type: "TextBlock",
          weight: "Bolder",
          text: "Tags:",
          wrap: true,
          size: "Medium",
        },

        {
          type: "Input.ChoiceSet",
          id: "tagsChoiceSet",
          choices: tagsList,

          style: "filtered",
          isMultiSelect: true,
        },
        {
          type: "TextBlock",
          weight: "Bolder",
          text: "Posted by:",
          wrap: true,
          size: "Medium",
        },
        {
          id: "originalMSWriter",
          type: "Input.Text",
          value: originalMSWriter,
          wrap: true,
          size: "Medium",
        },
      ],
      actions: [
        {
          data: {
            submitLocation: "messagingExtensionFetchTask",
            user: user,
            originalMSWriterId: originalMSWriterId,
            userId: userId,

            msteams: {
              type: "invoke",
              value: {
                type: "task/submit",
              },
            },
          },
          title: "Submit",
          type: "Action.Submit",
        },
      ],
    }

I read this and this but it seems it's not resolved.

Answer 1

To fetch data from the backend every time the user inputs in the tag input form, you can use the onInvokeActivity method in your ActionApp class.

export class ActionApp extends TeamsActivityHandler {
  constructor() {
    super();
  }
  async onInvokeActivity(context: TurnContext): Promise<any> {
    if (context.activity.name === 'task/fetch') {
      console.log("invoked");
      // Fetch data from the backend here
    }
    return super.onInvokeActivity(context);
  }
  // Other methods and code...
}

To fetch data from the backend, you can make an HTTP request using a library like axios or node-fetch.

import axios from 'axios';
// Inside the onInvokeActivity method
async onInvokeActivity(context: TurnContext): Promise<any> {
  if (context.activity.name === 'task/fetch') {
    console.log("invoked");
    
    // Fetch data from the backend
    const response = await axios.get('https://example.com/api/data');
    const data = response.data;
    // Do something with the fetched data
    // Return the task module response
    return {
      task: {
        type: 'continue',
        value: {
          title: 'Task module title',
          height: 500,
          width: 'medium',
          url: 'https://contoso.com/msteams/taskmodules/newcustomer',
          fallbackUrl: 'https://contoso.com/msteams/taskmodules/newcustomer'
        }
      }
    };
  }
  return super.onInvokeActivity(context);
}

This example uses axios to make an HTTP GET request to 'https://example.com/api/data' to fetch the data from the backend. You can replace this URL with your own backend API endpoint.

After fetching the data, you can process it as needed and return the task module response using the return statement. The task module response should include the task property with a type of 'continue' and a value object that specifies the title, height, width, URL, and fallback URL of the task module. Make sure to install the axios library by running npm install axios in your project directory.

Answer 2

I could solve this by checking context.activity.name == "application/search in onInvokeActivity also I added this in Input.ChoiceSet: "choices.data": {type: "Data.Query",dataset: "tagDataSet"}

`

   public async onInvokeActivity(context: any): Promise<any> {
   
        if (context.activity.name == "application/search") {
          let searchQuery = context.activity.value.queryText;
          console.log("searchQuery", searchQuery);
    }
     ////other code 
    
     
        return super.onInvokeActivity(context);
      }

Also, I installed the app to the channel.