Hello，大家好。
本篇开始我们来介绍一下Microsoft Graph Toolkit中的组件，通俗地说就是一些典型的控件。
想象一下如果我们要构建一个发起会议的应用，我们想要应用具有将会议议程项目转成Microsoft Planner任务的功能。我们需要一个人员选择器去选择公司中的人员，还需要一个被邀请人员的列表。
单是这些，在没有Microsoft Graph Toolkit的时候，我们需要学习如何连接到Microsoft Graph，自己编写认证代码并决策使用哪种认证流，更让人心酸的是我们需要进行必要的美化以使界面看起来好看一些。
完成上述工作，我们可能会花费几周的时间，那么有了Microsoft Graph Toolkit呢？可能一小时之内就完成了。
Microsoft Graph Toolkit中的mgt-agenda组件会展示一个日历视图，我们可以添加一个mgt-people-picker组件用于从公司中选择人员这个功能的实现。在展示人员信息上，我们可以使用mgt-person和mgt-people组件实现。当用鼠标悬浮在人员上时，还可以看到mgt-person-card组件承载的人员的详细信息。通过mgt-tasks组件，我们可以创建、完成或删除任务。我们甚至还可以通过mgt-teams-channel-picker组件在自己所属的频道向会议被邀请人发送提醒。
除了上面提到的之外，还有比如用于登录的mgt-login组件，用于发送自定义请求的mgt-get组件等。
每个组件都具有一些HTML属性、CSS自定义属性、JavaScript属性和事件来方便我们自定义，并且提供了模板功能。
mgt-login
登录组件用于管理身份验证的各个阶段，显示当前用户，登出。
用法示例：
<mgt-login></mgt-login>
从界面上看它由两个状态组成。
用户没有登录时，控件只是一个简单的登录按钮。
当用户登录了之后，控件会显示当前登录用户的用户名、照片和电子邮件，还有登出按钮。
为了正确运行该控件，我们需要将我们Microsoft Identity中的应用程序授予以下权限：
- User.Read
- People.Read
- Contacts.Read
- User.ReadBasic.All
对于这个控件，只有一个userDetails自定义属性，可以直接像它传递一个用户对象进行显示而跳过认证步骤，个人感觉除了demo之外意义不是很大，将这个属性设置为null会将它的状态置为登出状态。
let loginControl = document.getElementById('myLoginControl');
loginControl.userDetails = { displayName: 'Fabio Franzini', email: '[email protected]', personImage: 'url' }
注：之前文档里的属性叫profileImage，这个url属性我尝试替换成图片URL，但是不work，邮件也没显示。我已经提了一个issue，后来微软更新成了personImage，但是目前email还是不会显示。
https://stackoverflow.com/questions/61382360/mgt-login-set-userdetails-not-work-for-email-and-image
这个控件还提供了一些事件和函数，我们可以利用它们来管理或修改控件的创建过程。
使用以下方法可以个性化控件渲染的方式：
- renderButton: 渲染按钮
- renderButtonContent: 渲染按钮内容
- renderFlyout: 渲染浮出控件
- renderFlyoutContent: 渲染浮出控件内容
- hideFlyout: 隐藏浮出控件
- showFlyout: 显示浮出控件
- toggleFlyout: 切换浮出控件的状态
当我们想要得到mgt-login控件状态变化的提醒时，可以参考以下事件，很有用：
- loginInitiated: 当用户点击登录按钮开始登录过程时触发，可取消
- loginCompleted: 在登录过程成功完成，用户已登录时触发
- loginFailed: 用户取消登录或未能登录时触发
- logoutInitiated: 用户开始登出时触发，可取消
- logoutCompleted: 用户登出后触发
mgt-agenda
通过这个控件我们可以查看一个用户的日程或一个组的日历。
用法示例：
<mgt-agenda group-by-day days="2"></mgt-agenda>
上面的这个示例能够让我们查看接下来两天的日程：
确保这个控件正确工作需要Calendars.Read权限，它包含很多属性，也就具有了很高的可配置性：
- date: JavaScript日期字符串，用来指定从Microsoft Graph获取事件信息的开始日期
- days: 从Microsoft Graph获取几天的信息，默认值为3
- show-max: 要显示事件的最大数
- group-id: 指定要显示的组日历的ID以代替当前登录用户的日历
- event-query: 在从Microsoft Graph获取信息时要使用的查询字符串，使用该属性的话，会忽略掉date和days属性
- events: 控件用来渲染的要获取或设置的事件列表的数组，使用该属性获取控件加载的事件，还可以设置它去加载我们自己的事件
- group-by-day: 是否以日期分组事件的布尔值
这些属性中最有意思的是event-query这个属性，因为它的定制性很强，我们可以指定任意可以返回事件的Microsoft Graph终结点，并应用筛选和排序条件以展示我们想要的数据，例如：
<mgt-agenda event-query="/me/events?orderby=start/dateTime"></mgt-agenda>
它会以开始时间为序展示当前登录用户的事件。
此控件只有一个事件，eventClick，会在用户点击日程中的事件条目时触发。但是它有很多可以个性化控件渲染的方法，这些方法对应控件的一个指定部分：
renderLoading, renderNoData, renderGroups, renderHeader, renderEvents, renderEvent, renderTitle, renderLocation, renderAttendees, renderOther
本篇我们选两个组件进行介绍，其他的组件大家可以去Microsoft Docs了解更多。
https://docs.microsoft.com/en-us/graph/toolkit/overview