Microsoft Teams 탭에서 앱 버튼 이벤트 처리

Microsoft Teams 개인 앱의 앱 버튼을 클릭하는 사용자에게 응답할 수 있다는 사실을 알고 계셨습니까?

사용자 지정 탭을 통해 Microsoft Teams에 웹 앱 포함

사용자 지정 웹 앱이 있는 경우 Microsoft Teams에서 custom tab 로 표시할 수 있습니다. 이것은 사용자가 있는 곳으로 앱을 가져오고 사용자가 작업 컨텍스트에서 중요한 정보에 액세스할 수 있도록 하는 좋은 방법입니다.

Teams에 앱을 포함하면 사용자가 앱으로 작업할 수 있는 임계값을 낮출 수 있습니다. 또한 앱을 personal app 로 노출하면 사용자는 Teams 어디에 있든 왼쪽 레일에서 직접 액세스할 수 있습니다.

Microsoft Teams에서 전체 페이지 탭 구축

제 글에서는 Microsoft Teams 개인 앱에서 탭 헤더 막대를 제거하여 사용자에게 보다 맞춤화된 경험을 제공하는 방법을 보여 드렸습니다.



한 단계 더 나아가 왼쪽 레일에 있는 앱의 버튼을 클릭하여 사용자와 상호작용할 수 있고 예를 들어 애플리케이션의 메뉴를 표시할 수 있다는 사실을 알고 계셨습니까?

Microsoft Teams 탭에서 앱 버튼 이벤트 처리

Microsoft Teams JS SDK 버전 1.8에서 Microsoft는 앱 버튼과 상호 작용하는 사용자에게 응답하기 위한 세 가지 새로운 처리기( registerAppButtonClickHandler , registerAppButtonHoverEnterHandler 및 registerAppButtonHoverLeaveHandler )를 도입했습니다. 이러한 핸들러를 사용하면 왼쪽 레일에 고정되어 있을 때 앱의 앱 버튼을 클릭하거나 가리키거나 멀리 가져가는 사용자에 대해 각각 응답할 수 있습니다.

앱 버튼과의 첫 번째 상호 작용에서 평소와 같이 앱이 열립니다.



앱이 열리면 사용자가 앱 버튼을 다시 클릭하면 예를 들어 메뉴 패널을 표시하는 이벤트 핸들러가 트리거됩니다.

Following code snippets are based on tab code scaffolded using yo teams.

이 동작을 구현하려면 구성 요소의 componentWillMount 메서드에서 하나 이상의 앱 버튼 이벤트에 대한 처리기를 등록하는 것으로 시작합니다.

export class OverviewTab extends TeamsBaseComponent<IOverviewTabProps, IOverviewTabState> {
    // [...] trimmed for brevity

    public async componentWillMount() {
        this.updateTheme(this.getQueryVariable("theme"));

        if (await this.inTeams()) {
            microsoftTeams.initialize();
            microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);
            microsoftTeams.registerAppButtonClickHandler(() => this.handleAppButtonClick());
            microsoftTeams.getContext((context) => {
                microsoftTeams.appInitialization.notifySuccess();
                this.setState({
                    entityId: context.entityId
                });
                this.updateTheme(context.theme);
            });
        } else {
            this.setState({
                entityId: "This is not hosted in Microsoft Teams"
            });
        }
    }

    // [...] trimmed for brevity
}

몇 가지 옵션이 있는 패널을 표시하려는 경우 handleAppButtonClick 방법은 다음과 유사할 수 있습니다.

// [...] trimmed for brevity
import { teamsTheme } from "@fluentui/react-northstar";

export interface IOverviewTabState extends ITeamsBaseComponentState {
    entityId?: string;
    appMenuVisible: boolean;
}

// [...] trimmed for brevity

export class OverviewTab extends TeamsBaseComponent<IOverviewTabProps, IOverviewTabState> {
    constructor(props: IOverviewTabProps) {
        super(props);

        this.state = {
            appMenuVisible: false,
            theme: teamsTheme
        };
    }

    // [...] trimmed for brevity

    private handleAppButtonClick() {
        this.setState((prevState, props) => {
            return {
                appMenuVisible: !prevState.appMenuVisible
            };
        });
    }
}

마지막으로 render 메서드에서 패널을 표시합니다.

import { Panel, PanelType } from "@fluentui/react/lib/Panel";

// [...] trimmed for brevity

export class OverviewTab extends TeamsBaseComponent<IOverviewTabProps, IOverviewTabState> {
    // [...] trimmed for brevity

    /**
     * The render() method to create the UI of the tab
     */
    public render() {
        return (
            <Provider theme={this.state.theme}>
                <Panel
                    isLightDismiss
                    headerText="Menu"
                    isOpen={this.state.appMenuVisible}
                    onDismiss={() => this.setState({appMenuVisible: false})}
                    type={PanelType.smallFixedNear}>
                    <p>Options</p>
                </Panel>
                {/* [...] trimmed for brevity */}
            </Provider>
        );
    }

    private handleAppButtonClick() {
        this.setState((prevState, props) => {
            return {
                appMenuVisible: !prevState.appMenuVisible
            };
        });
    }
}

At this moment, Fluent UI Northstar, used by default in code scaffolded by yo teams, doesn't offer a panel component. Instead, you'd need to install @fluentui/react and load it from there.

이 예에서는 클릭 이벤트를 사용하여 탐색 기능이 있는 측면 패널을 표시하는 방법을 보여 주지만 가능성은 무한하며 창의력에 의해서만 제한됩니다.

이러한 새 이벤트 핸들러에 대한 자세한 내용은 documentation 을 참조하십시오.