In this article, we will learn how to develop SPFx webparts for Office 365 SharePoint site and Microsoft Team, that leverages Microsoft Graph to search users and adaptive cards for rendering the user data effectively.
The sample used here uses the adaptive card, which has a very minimal UI. The sample used, shows how effectively UI could be changed by users. But complex custom UI could be built using the adaptive cards.
Adaptive Cards:
Let us use the adaptive card on our SPFx component for displaying user details. The following provides you the basic understanding.
- Introduced recently, a new way for developers to render content in a consistent way, which is a open framework.
- It is providing options for developers, to design the UI for the specific component, using schema or visually.
- https://adaptivecards.io/designer
- Primarily targeted for BOT frameworks, Teams, Cortona, and windows notifications.
The following snapshot showing the UI built for our sample. This snapshot has 2 container sets for displaying 2 user details. In the schema mentioned later in the article, the single container is used, which could iterated using for loops for building containers for the required user set.
 | |
|
