Question

[wonboyn]

Hi Cameron,

Thanks for the great blog & also for providing the code.
Couple of questions:

• I'm trying to come to terms with the different FluentUI packages - which is the appropriate one to use when. Why did you use msteams-ui-components-react rather than @fluentui/react-northstar ?

• When I run the app in Teams, the modal react window is not tall enough forcing the user to scroll to see components lower down. Is it possible to size the surface component & if so how?

Thanks in advance.

Tim

[CameronDwyer]

Hi Tim,

This project was created from the Teams Yeoman Generator. At the time of creating the project the Yeoman Generator was using the msteams-ui-component-react and hadn't switched over the react-northstar. My advice would be to go with the newer FluentUI as it represents a move to a more unified UI language across Microsoft products.

The size of the modal window is controlled by properties set in this file:
https://github.com/CameronDwyer/Timely/blob/master/src/app/timelyMessageExtension/TimelyMessageExtension.ts

Notice the width and height properties returned in the onFetchTask method. They aren't exact sizes and this is most probably due to Teams running across different form factors and needing to adjust actual size accordingly.

public async onFetchTask(context: TurnContext, value: IMessagingExtensionActionRequest): Promise<MessagingExtensionResult | ITaskModuleResult> {

    return Promise.resolve<ITaskModuleResult>({
        type: "continue",
        value: {
            title: "Input form",
            url: `https://${process.env.HOSTNAME}/timelyMessageExtension/action.html`,
            width: "medium",
            height: "large"
        }
    });