Kalender-Anzeige-Vorlage in Canvas-Apps

Artikel
03/16/2023

Fügen Sie in einer Canvas-App einen Kalenderbildschirm hinzu, auf dem Benutzer bevorstehende Ereignisse von ihrem angezeigt werden Office 365 Outlook-Konten. Benutzer können ein Datum aus einem Kalender auswählen und durch eine Liste der Ereignisse dieses Tages scrollen. Sie können ändern, welche Details in der Liste angezeigt werden, einen zweiten Bildschirm hinzufügen, in dem weitere Details zu jedem Ereignis angezeigt werden, eine Liste der Teilnehmer für jedes Ereignis anzeigen und andere Anpassungen vornehmen.

Sie können auch andere vorlagenbasierte Bildschirme hinzufügen, auf denen andere Daten von Office 365 angezeigt werden, wie Email, Menschen in einer Organisation und Verfügbarkeit von Personen, die Benutzer möglicherweise zu einer Besprechung einladen möchten.

Diese Übersicht lehrt Sie:

Verwendung des Standardkalenderbildschirms.
So ändern Sie ihn.
So integrieren Sie es in eine App.

Weitere Informationen zu den Standardfunktionen dieses Bildschirms finden Sie in der Kalender-Bildschirmreferenz.

Voraussetzung

Vertrautheit mit dem Hinzufügen und Konfigurieren von Bildschirmen und anderen Steuerelementen Erstellen Sie eine App in Power Apps.

Standardfunktionalität

So fügen Sie einen Kalenderbildschirm aus der Vorlage hinzu:

Melden Sie sich bei Power Apps an, und erstellen Sie dann eine App oder öffnen Sie eine vorhandene App in Power Apps Studio.

Dieses Thema zeigt eine Telefon-App, aber die gleichen Konzepte gelten für eine Tablet-App.
Auf der Registerkarte Home wählen Sie die Registerkarte des Menübands Neuer Bildschirm > Kalender.

Standardmäßig sieht der Bildschirm folgendermaßen aus:
Um Daten anzuzeigen, wählen Sie eine Option in der Dropdown-Liste oben auf dem Bildschirm.

Einige hilfreiche Hinweise:

Das heutige Datum ist standardmäßig ausgewählt, und Sie können einfach darauf zurückgreifen, indem Sie das Kalendersymbol in der oberen rechten Ecke auswählen.
Wenn Sie ein anderes Datum auswählen, wird es von einem Kreis umgeben, und ein helles Rechteck (blau, wenn das Standardthema angewendet wird) umgibt das heutige Datum.
Wenn für ein bestimmtes Datum mindestens ein Ereignis geplant ist, wird unter diesem Datum im Kalender ein kleiner farbiger Kreis angezeigt.
Wenn Sie ein Datum auswählen, für das ein oder mehrere Ereignisse geplant sind, werden die Ereignisse in einer Liste unter dem Kalender angezeigt.

Ändern des Bildschirms

Sie können die Standardfunktionalität dieses Bildschirms auf verschiedene Arten ändern:

Wenn Sie den Bildschirm weiter ändern möchten, verwenden Sie die Kalender-Bildschirmreferenz als Leitfaden.

Definieren Sie den Kalender

Wenn Sie bereits wissen, welchen Kalender Ihre Benutzer anzeigen sollen, können Sie den Bildschirm vereinfachen, indem Sie diesen Kalender angeben, bevor Sie die App veröffentlichen. Durch diese Änderung wird die Dropdown-Liste der Kalender nicht mehr benötigt, sodass Sie sie entfernen können.

Legen Sie die Eigenschaft OnStart der App auf die folgende Formel fest:

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 )

Hinweis

Diese Formel wird gegenüber dem Standardwert von der OnSelect Eigenschaft der Dropdown-Liste zur Auswahl eines Kalenders leicht bearbeitet. Weitere Informationen zu diesem Steuerelement finden Sie im Abschnitt im Kalender-Bildschirmreferenz.

Ersetzen Sie {YourCalendarNameHere}, einschließlich der geschweiften Klammern, mit dem Namen des Kalenders, den Sie anzeigen möchten (z. B. Kalender).

Wichtig

Bei den folgenden Schritten wird davon ausgegangen, dass Sie der App nur einen Kalenderbildschirm hinzugefügt haben. Wenn Sie mehr als einen hinzugefügt haben, steuern Sie Namen (wie iconCalendar1) der mit einer anderen Nummer endet und Sie müssen die Formeln entsprechend anpassen.
Legen Sie die Y-Eigenschaft des iconCalendar1-Steuerelements auf den folgenden Ausdruck fest:

RectQuickActionBar1.Height + 20
Legen Sie die Y-Eigenschaft des LblMonthSelected1-Steuerelements auf den folgenden Ausdruck fest:

iconCalendar1.Y + iconCalendar1.Height + 20
Legen Sie die Text-Eigenschaft des LblNoEvents1-Steuerelements auf den folgenden Wert fest:

"No events scheduled"
Legen Sie die Eigenschaft Visible auf LblNoEvents1 auf diese Formel fest:

CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible
Diese Steuerelemente löschen:
- dropdownCalendarSelection1
- LblEmptyState1
- iconEmptyState1
Wenn der Kalenderbildschirm nicht der Standardbildschirm ist, fügen Sie eine Schaltfläche hinzu, die vom Standardbildschirm zum Kalenderbildschirm navigiert, damit Sie die App testen können.

Fügen Sie beispielsweise eine Schaltfläche Bildschirm1 hinzu, die zum Screen2 navigiert, wenn Sie einer App, die Sie aus leer erstellt haben, einen Kalenderbildschirm hinzugefügt haben.
Speichern Sie die App und testen Sie sie in einem Browser oder auf einem mobilen Gerät.

Zeigen Sie verschiedene Details zu einem Ereignis an

Standardmäßig wird die Galerie unter dem Kalender CalendarEventsGallery benannt und zeigt die Startzeit, die Dauer, das Thema und den Ort jedes Ereignisses an. Sie können die Galerie so konfigurieren, dass jedes Feld (z. B. der Organizer) angezeigt wird, das die Office 365 Verbinder unterstützt.

In der CalendarEventsGallery stellen Sie die Eigenschaft Text auf ein neues oder ein bestehendes Etiketts zu ThisItem gefolgt von einem Punkt.

IntelliSense listet die Felder auf, die Sie auswählen können.
Wählen Sie das gewünschte Feld aus.

Das Etikett zeigt den von Ihnen angegebenen Informationstyp an.

Nicht blockierende Ereignisse ausblenden

In vielen Büros senden Teammitglieder Besprechungsanfragen, um sich gegenseitig zu benachrichtigen, wenn sie nicht im Büro sind. Um zu vermeiden, dass alle Zeitpläne blockiert werden, legt die Person, die die Anforderung sendet, die Verfügbarkeit auf frei. Sie können diese Ereignisse aus dem Kalender und der Galerie ausblenden, indem Sie einige Eigenschaften aktualisieren.

Legen Sie die Element Eigenschaft von CalendarEventsGallery auf diese Formel fest:
```
SortByColumns(
    Filter(
        MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = 
            Text( _dateSelected, DateTimeFormat.ShortDate ),
        ShowAs <> "Free"
    ),
    "Start"
)
```
In dieser Formel verbirgt die Funktion Filter nicht nur Ereignisse, die für ein anderes als das ausgewählte Datum geplant sind, sondern auch Ereignisse, für die die Verfügbarkeit auf frei festgelegt wird.
In diesem Kalender legen Sie die Eigenschaft Visible auf das Steuerelement Circle für diese Formel:
```
CountRows(
    Filter(
        MyCalendarEvents,
        DateValue( Text(Start) ) = DateAdd( _firstDayInView, ThisItem.Value, TimeUnit.Days ),
        ShowAs <> "Free"
    )
) > 0 && !Subcircle1.Visible && Title2.Visible
```
Diese Formel enthält dieselben Filter wie die vorherige Formel. Daher wird der Ereignisanzeigekreis nur dann unter einem Datum angezeigt, wenn er ein oder mehrere Ereignisse enthält, die sich am ausgewählten Datum befinden und für die die Verfügbarkeit nicht auf frei festgelegt ist.

Integrieren des Bildschirms in eine App

Der Kalenderbildschirm ist ein leistungsstarkes Bündel von Steuerelementen für sich, funktioniert jedoch normalerweise am besten als Teil einer größeren, vielseitigeren App. Sie können diesen Bildschirm auf verschiedene Arten in eine größere App integrieren, einschließlich der folgenden Optionen:

Ereignisdetails anzeigen

Wenn Benutzer ein Ereignis in CalendarEventsGallery auswählen, können Sie einen weiteren Bildschirm öffnen, in dem weitere Informationen zu diesem Ereignis angezeigt werden.

Hinweis

Dieses Verfahren zeigt Ereignisdetails in einer Galerie mit dynamischem Inhalt an. Sie können jedoch ähnliche Ergebnisse erzielen, indem Sie andere Ansätze wählen. Beispielsweise können Sie mehr Designkontrolle erhalten, indem Sie stattdessen eine Reihe von Beschriftungen verwenden.

Fügen Sie einen leeren Bildschirm mit dem Namen EventDetailsScreen hinzu, der eine leere Galerie mit flexibler Höhe und eine Schaltfläche enthält, die zurück zum Kalenderbildschirm navigiert.
In der Galerie mit flexibler Höhe fügen Sie ein Steuerelement Etikette und HTML-Text hinzu und legen Sie die Eigenschaft AutoHeight auf wahr fest.

Hinweis

Power Apps ruft den Nachrichtentext jedes Ereignisses als HTML-Text ab, sodass Sie diesen Inhalt in einer HTML-Text Steuerung anzeigen müssen.
Legen Sie die Y-Eigenschaft des HTML-Text-Steuerelements auf den folgenden Ausdruck fest:

Label1.Y + Label1.Height + 20
Passen Sie zusätzliche Eigenschaften nach Bedarf an Ihre Stilanforderungen an.

Beispielsweise möchten Sie möglicherweise eine Trennlinie unter dem HTML-Text Steuerelement hinzufügen.
Legen Sie die Element Eigenschaft der flexiblen Höhe des Katalogs auf diese Formel fest:
```
Table(
    { Title: "Subject", Value: _selectedCalendarEvent.Subject },
    { 
        Title: "Time", 
        Value: _selectedCalendarEvent.Start & " - " & _selectedCalendarEvent.End 
    },
    { Title: "Body", Value: _selectedCalendarEvent.Body }
)
```
Diese Formel erstellt eine Galerie dynamischer Daten, die auf die Feldwerte von _selectedCalendarEvent, festgelegt sind, die jedes Mal festgelegt werden, wenn der Benutzer ein Ereignis in der CalendarEventsGallery Steuerung auswählt.. Sie können diese Galerie um weitere Felder erweitern, indem Sie weitere Beschriftungen hinzufügen. Dieser Satz bietet jedoch einen guten Ausgangspunkt.
Stellen Sie mit den vorhandenen Galerieelementen die Eigenschaft Text des Steuerelements Etikette auf ThisItem.Title fest , und das Steuerelement HtmlText auf das Steuerelement HTML-Text auf ThisItem.Value fest.
Unter CalendarEventsGallery legen Sie die Eigenschaft OnSelect des Steuerelements Titel auf diese Formel fest.
```
Set( _selectedCalendarEvent, ThisItem );
Navigate( EventDetailsScreen, None )
```
Hinweis

Anstatt die _selectedCalendarEvent Variable zu nutzen, können Sie stattdessen CalendarEventsGallery auswählen.

Veranstaltungsteilnehmer anzeigen

Der Office365.GetEventsCalendarViewV2 Vorgang ruft eine Vielzahl von Feldern für jedes Ereignis ab, einschließlich einen durch Semikolons getrennten Satz erforderlicher und optionaler Teilnehmer. In diesem Verfahren analysieren Sie jede Gruppe von Teilnehmern, bestimmen, welche Teilnehmer sich in Ihrer Organisation befinden, und rufen die ab Office 365 Profile ab.

Wenn Ihre App das nicht den Office 365 Benutzeranschluss enthält, fügen sie ihn hinzu.

Um die Office 365 Profile der Besprechungsteilnehmer abzunehmen, legen Sie die OnSelect Eigenschaft des Steuerelements Titel von CalendarEventsGallery zu dieser Formel fest:

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 }
        )
    )
)

Diese Liste beschreibt, was jeder ClearCollect Vorgang macht:

ClearCollect (AttendeeEmailsTemp)
```
ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ), 
        !IsBlank( Result)
    )
);
```
Diese Formel verkettet die erforderlichen und optionalen Teilnehmer zu einer einzigen Zeichenfolge und teilt diese Zeichenfolge dann an jedem Semikolon in einzelne Adressen auf. Die Formel filtert dann leere Werte aus dieser Menge heraus und fügt die anderen Werte einer Sammlung mit dem Namen AttendeeEmailsTemp hinzu.
ClearCollect(AttendeeEmails)
```
ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len(Result) - Find("@", Result) ) )
    )
);
```
Diese Formel bestimmt ungefähr, ob sich ein Teilnehmer in Ihrer Organisation befindet. Die Definition von _userDomain ist einfach die Domain-URL in der E-Mail-Adresse der Person, die die App ausführt. Diese Zeile erstellt eine zusätzliche True/False-Spalte mit dem Namen InOrg, in der AttendeeEmailsTemp Sammlung. Diese Spalte enthält wahr, wenn userDomain der Domain-URL der E-Mail-Adresse in dieser bestimmten Zeile von AttendeeEmailsTemp entspricht.

Dieser Ansatz ist nicht immer genau, kommt aber ziemlich nahe. Beispielsweise haben bestimmte Teilnehmer in Ihrer Organisation möglicherweise eine E-Mail-Adresse wie Jane@OnContoso.com, wobei _userDomain Contoso.com ist. Der App-Benutzer und Jane arbeiten möglicherweise bei derselben Firma, haben jedoch geringfügige Abweichungen in ihren E-Mail-Adressen. In solchen Fällen möchten Sie möglicherweise die folgende Formel verwenden:

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

Diese Formel vergleicht jedoch E-Mail-Adressen wie Jane@NotTheContosoCompany.com mit einer _userDomain wie Contoso.com, und diese Personen arbeiten nicht bei derselben Firma.

ClearCollect (MyPeople)

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

Für das Abrufen von Office 365 Profilen müssen Sie den Office365Users.UserProfile oder Office365Users.UserProfileV2 Vorgang verwenden. Diese Vorgänge sammeln zuerst alle Office 365 Profile für Teilnehmer, die sich in der Organisation des Benutzers befinden. Anschließend fügen die Vorgänge einige Felder für Teilnehmer von außerhalb der Organisation hinzu. Sie haben diese beiden Elemente in unterschiedliche Operationen unterteilt, da die Für alle Schleife keine Ordnung garantiert. Deshalb sammelt Für alle möglicherweise zuerst einen Teilnehmer von außerhalb der Organisation. In diesem Fall enthält das Schema für Meine Leute nur Anzeigename, ID, Berufsbezeichnung und UserPrincipalName. Die UserProfile-Vorgänge rufen jedoch viel umfangreichere Daten ab. Also erzwingen Sie die Sammlung MyPeople Office 365 Profile vor den anderen Profilen hinzuzufügen.

Hinweis

Sie können das gleiche Ergebnis mit nur einee ClearCollect Funktion erzielen:

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: ""
            }
        )
    )
)

So beenden Sie diese Übung:

Fügen Sie einen Bildschirm hinzu, der eine Galerie enthält, für die die Element Eigenschaft auf Meine Leute festgelegt ist.
In der Eigenschaft OnSelect des Steuerelements Titel unter CalendarEventsGallery fügen Sie die Funktion Navigieren dem Bildschirm hinzu, den Sie im vorherigen Schritt erstellt haben.

Nächste Schritte

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).

Share via

Kalender-Anzeige-Vorlage in Canvas-Apps

Voraussetzung

Standardfunktionalität

Ändern des Bildschirms

Definieren Sie den Kalender

Zeigen Sie verschiedene Details zu einem Ereignis an

Nicht blockierende Ereignisse ausblenden

Integrieren des Bildschirms in eine App

Ereignisdetails anzeigen

Veranstaltungsteilnehmer anzeigen

Nächste Schritte

Feedback

Zusätzliche Ressourcen