How to receive request from embedded webview in botframework and close the messaging extensions window?

user_4736604 0
Viewed 343

I have a bot that includes a capability to have a messaging extensions feature. I have followed an example here. But instead of card view I used embedded web view to show my custom UI (which is a react app hosted in S3)

This is the code I used to open up the message extension preview:

  handleTeamsMessagingExtensionFetchTask(context, action) {
    const url = process.env.POPUP_VIEW_URL;
    return {
      task: {
        type: 'continue',
        value: {
          url: url,
          fallbackUrl: url,
          width: 680,
          height: 400,
          title: 'Feedback & praise',
        },
      },
    };
  }

The popup will have this UI: Iframe content

I tried to find an example/documentation on how the bot can receive the request from the UI when the user clicks the Submit request button but cannot find it so far. I looked at this this, but it uses an adaptive card example.

I wonder if there's an example from the documentation for embedded webview? I also thought just to have an API call when the user clicks the button, but still confuse on how to close the preview window after the API call return success.

botframework
2 Answers

You need to use submitTask in your button click

microsoftTeams.tasks.submitTask(JSON);
user_57969380

As @Rajesh answer above. This is basically what I did

  1. Add @microsoft/teams-js to my react app
  2. From my component which contains the button. Since I don't need to pass any information back to the bot/teams so I only call the function without arguments.
import * as microsoftTeams from "@microsoft/teams-js";

...

export const myComponent = () => {
  const submitRequest = () => {
    // make API request
    if (success) {
      microsoftTeams.initialize(); // This is a must
      microsoftTeams.tasks.submitTask();
    }
  }


  return (
    <>
     ...
     <button onClick={submitRequest} type="button">Submit request</button>
    </>
  );
}
user_47366040
Related