画布应用中的日历屏幕模板

  • 项目

在画布应用中，添加一个日历屏幕，显示用户在 Office 365 Outlook 帐户中的近期事件。 用户可以从日历中选择日期，并滚动浏览当天的事件列表。 您可以更改列表中显示的详细信息，添加另一个屏幕以显示有关每个事件的更多详细信息，显示每个事件的参与者列表，以及进行其他自定义。

您还可以添加其他基于模板的屏幕，显示来自 Office 365 的不同数据，如电子邮件、组织中的人员，以及用户可能希望邀请加入会议的人员的可用性。

本概述向您讲授：

  • 如何使用默认日历屏幕。
  • 如何修改。
  • 如何将它集成到应用中。

要更深入地了解此屏幕的默认功能，请参阅日历屏幕参考。

先决条件

熟悉在 Power Apps 中创建应用时如何添加和配置屏幕及其他控件。

默认功能

若要从模板添加日历屏幕，请执行以下操作：

  1. 登录到 Power Apps，然后创建一个应用或在 Power Apps Studio 中打开一个现有应用。

    此主题演示了一个手机应用，但是相同的概念也适用于平板电脑应用。

  2. 在功能区的主页选项卡上，选择新建屏幕 > 日历。

    默认情况下，屏幕的外观类似于：

    日历屏幕。

  3. 若要显示数据，请在靠近屏幕顶部的下拉列表中选择一个选项。

    完成加载后的日历屏幕。

一些有用的注释：

  • 默认选择当前日期，您可以选择右上角的日历图标轻松返回到此日期。
  • 如果您选择其他日期，该日期会被一个圆圈圈住，当前日期被一个浅色矩形（如果应用默认主题，则为蓝色）圈住。
  • 如果在特定日期安排了至少一个事件，在日历中的这个日期下方会出现一个彩色小圆圈。
  • 如果选择计划了一个或多个事件的日期，事件将出现在日历下方的列表中。

修改屏幕

您可以通过几种常用方式修改此屏幕的默认功能：

如果要进一步修改屏幕，请使用日历屏幕参考作为指南。

指定日历

如果您已经知道用户应会查看哪个日历，您可以在发布应用之前通过指定该日历来简化该屏幕。 此更改消除了对日历下拉列表的需要，因此您可以将其删除。

  1. 将应用的 OnStart 属性设置为此公式：

    Set( _userDomain, Right( User().Email, Len( User().Email ) - Find( "@", User().Email ) ) );
Set( _dateSelected, Today() );
Set( _firstDayOfMonth, DateAdd( Today(), 1 - Day( Today() ), Days ) );
Set( _firstDayInView, 
    DateAdd( _firstDayOfMonth, -( Weekday( _firstDayOfMonth) - 2 + 1 ), Days )
);
Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
Set( _calendarVisible, false );
Set( _myCalendar, 
    LookUp(Office365Outlook.CalendarGetTablesV2().value, DisplayName = "{YourCalendarNameHere}" )
);
Set( _minDate, 
    DateAdd( _firstDayOfMonth, -( Weekday(_firstDayOfMonth) - 2 + 1 ), Days )
);
Set( _maxDate, 
    DateAdd(
        DateAdd( _firstDayOfMonth, -( Weekday(_firstDayOfMonth) - 2 + 1 ), Days ),
        40, 
        Days 
    )
);
ClearCollect( MyCalendarEvents, 
Office365Outlook.GetEventsCalendarViewV3(_myCalendar.name, 
    Text( _minDate, UTC),
    Text( _maxDate, UTC)
).value
);
Set( _calendarVisible, true )

    备注

    此公式在用于选择日历的下拉列表的 OnSelect 属性的默认值中略微进行了编辑。 有关该控件的详细信息，请参阅日历屏幕参考中对应的那一节的内容。

  2. 将 {YourCalendarNameHere}（包括花括号）替换为您要显示的日历名称（例如，Calendar）。

    重要

    以下步骤假定您仅向应用添加了一个日历屏幕。 如果添加了多个，控件名称（如 iconCalendar1）将以不同的数字结尾，您需要相应地调整公式。

  3. 将 iconCalendar1 控件的 Y 属性设置为以下表达式：

    RectQuickActionBar1.Height + 20

  4. 将 LblMonthSelected1 控件的 Y 属性设置为以下表达式：

    iconCalendar1.Y + iconCalendar1.Height + 20

  5. 将 LblNoEvents1 控件的 Text 属性设置为以下值：

    "No events scheduled"

  6. 将 LblNoEvents1 的 Visible 属性设置为以下公式：

    CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible

  7. 删除这些控件：

    • dropdownCalendarSelection1
    • LblEmptyState1
    • iconEmptyState1

  8. 如果日历屏幕不是默认屏幕，请添加一个从默认屏幕导航到日历屏幕的按钮，以便您可以测试应用。

    例如，如果您向从空白创建的应用添加了日历屏幕，请在 Screen1 上添加一个导航到 Screen2 的按钮。

  9. 保存应用，然后在浏览器或移动设备上对其进行测试。

显示有关事件的其他详细信息

默认情况下，日历下的库（名为 CalendarEventsGallery），显示每个事件的开始时间、持续时间、主题和位置。 您可以将库配置为显示 Office 365 连接器支持的任何字段（如组织者）。

  1. 在 CalendarEventsGallery 中，将新标签或现有标签的 Text 属性设置为 ThisItem 后跟句点。

    IntelliSense 列出了您可以选择的字段。

  2. 选择所需的字段。

    标签显示您指定的信息类型。

隐藏非阻止事件

在许多办公室中，团队成员发送会议请求以在他们离开办公室时互相通知。 为避免阻止每个人的计划，发送请求的人将其可用性设置为空闲。 您可以通过更新几个属性来从日历和库中隐藏这些事件。

  1. 将 CalendarEventsGallery 的 Items 属性设置为以下公式：

    SortByColumns(
    Filter(
        MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = 
            Text( _dateSelected, DateTimeFormat.ShortDate ),
        ShowAs <> "Free"
    ),
    "Start"
)

    在此公式中，Filter 函数不仅隐藏计划在所选日期之外的日期的事件，而且还隐藏可用性设置为空闲的事件。

  2. 在日历中，将圆圈控件的 Visible 属性设置为以下公式：

    CountRows(
    Filter(
        MyCalendarEvents,
        DateValue( Text(Start) ) = DateAdd( _firstDayInView, ThisItem.Value, TimeUnit.Days ),
        ShowAs <> "Free"
    )
) > 0 && !Subcircle1.Visible && Title2.Visible

    此公式包含与上一个公式相同的筛选器。 因此，只有在选定日期有一个或多个事件且这些事件中可用性未设置为空闲时，事件指示圆圈才会出现在日期下方。

将屏幕集成到应用中

日历屏幕本身就是一个功能强大的控件包，但通常在作为更大、更多功能的应用的一部分时表现最佳。 您可以通过多种方式将此屏幕集成到更大的应用中，包括添加以下选项：

查看事件详细信息

如果用户在 CalendarEventsGallery 中选择了一个事件，您可以打开另一个显示有关该事件的更多信息的屏幕。

备注

此过程在包含动态内容的库中显示事件详细信息，但是您可以采用其他方法来获得类似的结果。 例如，您可以改为使用一系列标签来获得更多的设计控制。

  1. 添加一个名为 EventDetailsScreen 的空白屏幕，其中包含一个空白的高度灵活的库和一个导航回日历屏幕的按钮。

  2. 在高度灵活的库中，添加一个标签控件和一个 HTML 文本控件，并将两者的 AutoHeight 属性设置为 true。

    备注

    Power Apps 以 HTML 文本的形式检索每个事件的消息正文，因此您需要在 HTML 文本控件中显示该内容。

  3. 将 HTML 文本控件的 Y 属性设置为以下表达式：

    Label1.Y + Label1.Height + 20

  4. 根据需要调整其他属性以适合您的样式需求。

    例如，您可能想要在 HTML 文本控件下方添加一条分隔线。

  5. 将高度灵活的库的 Items 属性设置为以下公式：

    Table(
    { Title: "Subject", Value: _selectedCalendarEvent.Subject },
    { 
        Title: "Time", 
        Value: _selectedCalendarEvent.Start & " - " & _selectedCalendarEvent.End 
    },
    { Title: "Body", Value: _selectedCalendarEvent.Body }
)

    此公式创建一个动态数据库，其设置为 _selectedCalendarEvent 的字段值，每次用户在 CalendarEventsGallery 控件中选择一个事件时都会对此库进行设置。 您可以通过在其中添加更多标签来扩展此库以包括更多字段，不过这一设置提供了一个很好的起点。

  6. 有了库项后，将标签控件的 Text 属性设置为 ThisItem.Title，将 HTML 文本控件的 HtmlText 属性设置为 ThisItem.Value。

  7. 在 CalendarEventsGallery 中，将标题控件的 OnSelect 属性设置为以下公式：

    Set( _selectedCalendarEvent, ThisItem );
Navigate( EventDetailsScreen, None )

    备注

    除了使用 _selectedCalendarEvent 变量之外，您还可以使用 CalendarEventsGallery.Selected。

显示事件参与者

Office365.GetEventsCalendarViewV2 操作为每个事件检索各种字段，包括以分号分隔的一组必需和可选参与者。 在此过程中，您将分析每组参与者，确定组织中有哪些参与者，并检索所有参与者的 Office 365 配置文件。

  1. 如果您的应用未包含 Office 365 用户连接器，请添加。

  2. 要检索会议参与者的 Office 365 配置文件，请将 CalendarEventsGallery 中标题控件的 OnSelect 属性设置为以下公式：

    Set( _selectedCalendarEvent, ThisItem );
ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ),
        !IsBlank( Result )
    )
);
ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len( Result ) - Find( "@", Result ) ) )
    )
);
ClearCollect( MyPeople,
    ForAll( AttendeeEmails, If( InOrg, Office365Users.UserProfile( Result ) ) ) 
);
Collect( MyPeople,
    ForAll( AttendeeEmails,
        If( !InOrg, 
            { DisplayName: Result, Id: "", JobTitle: "", UserPrincipalName: Result }
        )
    )
)

此列表讨论了每个 ClearCollect 操作的作用：

  • ClearCollect(AttendeeEmailsTemp)

    ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ), 
        !IsBlank( Result)
    )
);

    此公式将必需和可选参与者连接到一个字符串中，然后在每个分号处将该字符串拆分为单独的地址。 然后，公式会从这个集中筛选出空白值，并将其他值添加到名为 AttendeeEmailsTemp 的集合中。

  • ClearCollect(AttendeeEmails)

    ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len(Result) - Find("@", Result) ) )
    )
);

    此公式大致确定参与者是否在您的组织中。 _userDomain 的定义只是运行应用的人员的电子邮件地址中的域 URL。 此行在 AttendeeEmailsTemp 集合中创建一个名为 InOrg 的额外的 true/false 列。 如果 userDomain 等同于 AttendeeEmailsTemp 特定行中的电子邮件地址的域 URL，此列将包含 true。

    这种方法并不总是很准确，但很接近。 例如，您组织中的某些参与者可能具有类似于 Jane@OnContoso.com 的电子邮件地址，而 _userDomain 是 Contoso.com。 应用用户和 Jane 可能在同一家公司工作，但其电子邮件地址略有不同。 对于此类情况，您可能需要使用以下公式：

    Upper(_userDomain) in Upper(Right(Result, Len(Result) - Find("@", Result)))

    但是，此公式会将像 Jane@NotTheContosoCompany.com 这样的电子邮件地址与像 Contoso.com 这样的 _userDomain 匹配，那些人不在同一家公司工作。

  • ClearCollect(MyPeople)

    ClearCollect( MyPeople,
    ForAll( AttendeeEmails, 
        If( InOrg, 
            Office365Users.UserProfile( Result )
        )
    )
);
Collect( MyPeople,
    ForAll( AttendeeEmails,
        If( !InOrg, 
            { 
                DisplayName: Result, 
                Id: "", 
                JobTitle: "", 
                UserPrincipalName: Result
            }
        )
    )
);

    若要检索 Office 365 配置文件，您必须使用 Office365Users.UserProfile 或 Office365Users.UserProfileV2 操作。 这些操作首先收集用户组织中的参与者的所有 Office 365 配置文件。然后，这些操作会为组织外部的参与者添加一些字段。 您将这两项划归到不同的操作，因为 ForAll 循环不能保证顺序。 因此，ForAll 可能会首先从组织外部收集参与者。 在这种情况下，MyPeople 的架构仅包含 DisplayName、Id、JobTitle 和 UserPrincipalName。 但是，UserProfile 操作检索的数据要比这丰富得多。 因此，您可以强制 MyPeople 集合在其他配置文件之前添加 Office 365 配置文件。

    备注

    您只需使用一个 ClearCollect 函数即可实现相同的结果：

    ClearCollect( MyPeople, 
    ForAll(
        AddColumns(
            Filter(
                Split(
                    ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, 
                    ";"
                ), 
                !IsBlank( Result )
            ), 
            "InOrg", _userDomain = Right( Result, Len( Result ) - Find( "@", Result ) )
        ), 
        If( InOrg, 
            Office365Users.UserProfile( Result ), 
            { 
                DisplayName: Result, 
                Id: "", 
                JobTitle: "", 
                UserPrincipalName: Result, 
                Department: "", 
                OfficeLocation: "", 
                TelephoneNumber: ""
            }
        )
    )
)

完成此练习：

  1. 添加一个包含库的屏幕，将库的 Items 属性设置为 MyPeople。

  2. 在 CalendarEventsGallery 中的标题控件的 OnSelect 属性中，向上一步中创建的屏幕添加一个 Navigate 函数。

后续步骤

备注

您能告诉我们您的文档语言首选项吗？ 进行简短调查。（请注意，此调查是英文版调查）

此调查大约需要七分钟。 不会收集个人数据（隐私声明）。