Skip to content
This repository has been archived by the owner on Oct 17, 2024. It is now read-only.

Solution Overview

Jump to bottom
Abhijeet Bodhankar edited this page Jun 24, 2020 · 2 revisions

The Contact Group Lookup app has the following main components:

  • MS Teams Static Tab: An Azure web app that implements following functionality
    • Static Tab
    • Task module for the search interface

MS Teams Static Tab:

The tab is implemented as a React application, using UI components from Fluent UI React, Office UI Fabric React and icons from font awesome wherever applicable. Add contact group in a task module. Tab is authenticated using Single Sign-On Authentication.

The tab's front-end gets its data from Asp.net Core web APIs implemented by the same app service that's hosting it. These APIs are protected by AAD token authentication.

Static tabs has three main react components.

• Distribution List component: This react component helps user to search favorite contact groups and pin/unpin them to bring them on top. Pinning/unpinning contact groups is stored in Azure Table storage against user's Id. Sorting, pagination details are stored as state of react component so that every change in the state re-renders the component. Component does not show pinned distribution lists if they are deleted from AAD.

• Add Distribution List component: This react component opens up in Task module and fetches the list of contact groups from AAD using MS graph based on search criteria. Added distribution lists are stored in Azure Table storage against user's Id. It calls Graph APIs to fetch contact groups.

• Distribution List Members component: Clicking on contact group in Distribution List Component takes users to Distribution list members component where all users present in selected contact group are listed. Component allows users to chat with single user/group chat window. Component always shows pinned users at top. Sorting, pagination details are stored as state of react component so that every change in the state re-renders the component. Component has ability to list down nested contact group, if present.

Pagination Component: Distribution List & Distribution List members component will make use of custom pagination component as Fluent UI react Grid does not support paging.

Graph API: Graph API are used to get contact group details and members of each contact group. Presence API is used for getting presence of members in contact group. Presence API is in Beta version.

Clone this wiki locally