Modèle d’écran de calendrier dans les applications canevas

Article
03/15/2023

Dans une application canevas, ajoutez un écran de calendrier qui montre aux utilisateurs les événements à venir de leurs comptes Office 365 Outlook. Les utilisateurs peuvent sélectionner une date dans un calendrier et faire défiler une liste des événements de la journée. Vous pouvez modifier les détails qui apparaissent dans la liste, ajouter un deuxième écran qui affiche plus de détails sur chaque événement, afficher une liste des participants pour chaque événement et effectuer d’autres personnalisations.

Vous pouvez également ajouter d’autres écrans basés sur des modèles qui affichent différentes données de Office 365, tel que e-mail, individus dans une organisation, et disponibilité des individus que les utilisateurs pourraient souhaiter inviter à une réunion.

Cette vue d’ensemble vous apprend :

Comment utiliser l’écran du calendrier par défaut.
Comment le modifier.
Comment l’intégrer dans une application.

Pour une immersion totale dans la fonctionnalité par défaut de cet écran, consultez la référence écran calendrier.

Éléments requis

Bien savoir comment ajouter et configurer des écrans et d’autres commandes lorsque vous créez une application dans Power Apps.

Fonctionnalité par défaut

Pour ajouter un écran de calendrier à partir du modèle :

Se connecter à Power Apps, puis créez une application ou ouvrez une application existante dans Power Apps Studio.

Ce sujet montre une application pour téléphone, mais les mêmes concepts s’appliquent à une application pour tablette.
Sur l’onglet Accueil du ruban, sélectionnez Nouvel écran > Calendrier.

Par défaut, l’écran ressemble à ceci :
Pour afficher les données, sélectionnez une option dans la liste déroulante en haut de l’écran.

Quelques notes utiles :

La date du jour est sélectionnée par défaut, et vous pouvez facilement y revenir en sélectionnant l’icône de calendrier dans l’angle supérieur droit.
Si vous sélectionnez une autre date, un cercle l’entoure et un rectangle de couleur claire (bleu si le thème par défaut est appliqué) entoure la date du jour.
Si au moins un événement est prévu pour une date particulière, un petit cercle coloré apparaît sous cette date dans le calendrier.
Si vous sélectionnez une date pour laquelle un ou plusieurs événements sont planifiés, les événements apparaissent dans une liste sous le calendrier.

Modifier l’écran

Vous pouvez modifier la fonctionnalité par défaut de cet écran de plusieurs manières courantes :

Si vous souhaitez modifier davantage l’écran, utilisez la référence écran calendrier comme un guide.

Spécifier le calendrier

Si vous savez déjà quel calendrier vos utilisateurs doivent afficher, vous pouvez simplifier l’écran en spécifiant ce calendrier avant de publier l’application. Cette modification supprime la nécessité de la liste déroulante des calendriers, vous pouvez donc la supprimer.

Définissez la propriété OnStart de l’application à cette formule :

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 )

Notes

Cette formule est légèrement modifiée à partir de la valeur par défaut de la propriété OnSelect de la liste déroulante pour sélectionner un calendrier. Pour plus d’informations sur ce contrôle, consultez sa section dans la référence écran calendrier.

Remplacez {YourCalendarNameHere}, y compris les accolades, avec le nom du calendrier que vous souhaitez afficher (par exemple, Calendrier).

Important

Les étapes suivantes supposent que vous n’avez ajouté qu’un seul écran de calendrier à l’application. Si vous en avez ajouté plusieurs, les noms de contrôle (tels que iconCalendar1) se termineront par un nombre différent et vous devrez ajuster les formules en conséquence.
Définissez la propriété Y du contrôle iconCalendar1 sur cette expression :

RectQuickActionBar1.Height + 20
Définissez la propriété Y du contrôle LblMonthSelected1 sur cette expression :

iconCalendar1.Y + iconCalendar1.Height + 20
Définissez la propriété Texte du contrôle LblNoEvents1 sur la valeur suivante :

"No events scheduled"
Définissez la propriété Visible de LblNoEvents1 sur la formule suivante :

CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible
Supprimer ces contrôles :
- dropdownCalendarSelection1
- LblEmptyState1
- iconEmptyState1
Si l’écran du calendrier n’est pas l’écran par défaut, ajoutez un bouton qui permet de naviguer de l’écran par défaut à l’écran du calendrier afin de pouvoir tester l’application.

Par exemple, ajoutez un bouton sur Screen1 qui navigue vers Screen2 si vous avez ajouté un écran de calendrier à une application que vous avez créée à partir de blanc.
Enregistrez l’application, puis testez-la dans un navigateur ou sur un appareil mobile.

Afficher différents détails sur un événement

Par défaut, la galerie sous le calendrier, nommée CalendarEventsGallery, affiche l’heure de début, la durée, le sujet et le lieu de chaque événement. Vous pouvez configurer la galerie pour afficher tout champ (tel que l’organisateur) que le connecteur Office 365 soutient.

Dans CalendarEventsGallery, définissez la propriété Texte d’une nouvelle Étiquette ou d’une Étiquette existante sur ThisItem suivie d’un point.

IntelliSense répertorie les champs que vous pouvez sélectionner.
Sélectionnez le champ que vous souhaitez.

L’Étiquette indique le type d’informations que vous avez spécifié.

Masquer les événements non bloquants

Dans de nombreux bureaux, les membres de l’équipe envoient des demandes de réunion pour s’informer mutuellement de leur absence du bureau. Pour éviter de bloquer les plannings de chacun, la personne qui envoie la demande définit sa disponibilité sur Gratuit. Vous pouvez masquer ces événements du calendrier et de la galerie en mettant à jour quelques propriétés.

Définissez la propriété Items de CalendarEventsGallery sur cette formule :
```
SortByColumns(
    Filter(
        MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = 
            Text( _dateSelected, DateTimeFormat.ShortDate ),
        ShowAs <> "Free"
    ),
    "Start"
)
```
Dans cette formule, la fonction Filtre masque non seulement les événements planifiés pour une date autre que celle sélectionnée, mais également les événements pour lesquels la disponibilité est définie sur Gratuit.
Dans le calendrier, définissez la propriété Visible sur le contrôle Circle à cette formule :
```
CountRows(
    Filter(
        MyCalendarEvents,
        DateValue( Text(Start) ) = DateAdd( _firstDayInView, ThisItem.Value, TimeUnit.Days ),
        ShowAs <> "Free"
    )
) > 0 && !Subcircle1.Visible && Title2.Visible
```
Cette formule contient les mêmes filtres que la formule précédente. Par conséquent, le cercle indicateur d’événement apparaît sous une date uniquement s’il contient un ou plusieurs événements à la date sélectionnée et pour lesquels la disponibilité n’est pas définie sur Gratuit.

Intégrer l’écran dans une application

L’écran de calendrier est un puissant ensemble de commandes à part entière, mais il fonctionne généralement mieux dans le cadre d’une application plus grande et plus polyvalente. Vous pouvez intégrer cet écran dans une application plus grande de plusieurs façons, notamment en ajoutant ces options :

Afficher les détails de l’événement

Si les utilisateurs sélectionnent un événement dans CalendarEventsGallery, vous pouvez ouvrir un autre écran qui affiche plus d’informations sur cet événement.

Notes

Cette procédure affiche les détails de l’événement dans une galerie avec un contenu dynamique, mais vous pouvez obtenir des résultats similaires en adoptant d’autres approches. Par exemple, vous pouvez obtenir plus de contrôle de conception en utilisant une série d’Étiquettes à la place.

Ajouter un nouvel écran, nommé EventDetailsScreen, qui contient une nouvelle galerie à hauteur flexible et un bouton qui revient à l’écran du calendrier.
Dans la galerie à hauteur flexible, ajoutez un contrôle Étiquette et un contrôle Texte HTML et définissez la propriété AutoHeight des deux sur true.

Notes

Power Apps récupère le corps du message de chaque événement sous forme de texte HTML, vous devez donc afficher ce contenu dans un contrôle Texte HTML.
Définissez la propriété Y du contrôle Texte HTML sur cette expression :

Label1.Y + Label1.Height + 20
Ajustez les propriétés supplémentaires si nécessaire pour répondre à vos besoins de style.

Par exemple, vous souhaiterez peut-être ajouter une ligne de séparation sous le contrôle Texte HTML.
Définissez la propriété Items de la galerie à hauteur flexible sur cette formule suivante :
```
Table(
    { Title: "Subject", Value: _selectedCalendarEvent.Subject },
    { 
        Title: "Time", 
        Value: _selectedCalendarEvent.Start & " - " & _selectedCalendarEvent.End 
    },
    { Title: "Body", Value: _selectedCalendarEvent.Body }
)
```
Cette formule crée une galerie de données dynamiques définies sur les valeurs de champ de _selectedCalendarEvent, qui est définie chaque fois que l’utilisateur sélectionne un événement dans le contrôle CalendarEventsGallery. Vous pouvez étendre cette galerie pour inclure plus de champs en y ajoutant plus d’Étiquettes, mais cet ensemble fournit un bon point de départ.
Une fois les éléments de la galerie en place, définissez la propriété Texte du contrôle Étiquette sur ThisItem.Title, et la propriété HtmlText du contrôle Texte HTML sur ThisItem.Value.
Dans CalendarEventsGallery, définissez la propriété OnSelect du contrôle Title de cette formule :
```
Set( _selectedCalendarEvent, ThisItem );
Navigate( EventDetailsScreen, None )
```
Notes

Plutôt que d’utiliser la variable _selectedCalendarEvent, vous pouvez utiliser en lieu et place CalendarEventsGallery.Selected.

Afficher les participants à l’événement

L’opération Office365.GetEventsCalendarViewV2 récupère une variété de champs pour chaque événement, y compris un ensemble de participants obligatoires et facultatifs séparés par des points-virgules. Dans cette procédure, vous analyserez chaque ensemble de participants, déterminerez quels participants font partie de votre organisation et récupérerez les profils Office 365 de ceux qui y participent.

Si votre application ne contient pas le connecteur Office 365 Users, ajoutez-le.

Pour récupérer les profils Office 365 des participants à la réunion, définissez la propriété OnSelect du contrôle Title dans CalendarEventsGallery à cette formule :

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

Cette liste explique ce que chaque opération ClearCollect fait :

ClearCollect (AttendeeEmailsTemp)
```
ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ), 
        !IsBlank( Result)
    )
);
```
Cette formule concatène les participants obligatoires et facultatifs en une seule chaîne, puis divise cette chaîne en adresses individuelles à chaque point-virgule. La formule filtre ensuite les valeurs vides de cet ensemble et ajoute les autres valeurs dans une collection nommée AttendeeEmailsTemp.
ClearCollect(AttendeeEmails)
```
ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len(Result) - Find("@", Result) ) )
    )
);
```
Cette formule détermine approximativement si un participant fait partie de votre organisation. La définition de _userDomain est simplement l’URL du domaine dans l’adresse e-mail de la personne qui exécute l’application. Cette ligne crée une colonne true/false supplémentaire, nommée InOrg, dans la collection AttendeeEmailsTemp. Cette colonne contient true si userDomain est équivalent à l’URL du domaine de l’adresse e-mail dans cette ligne particulière de AttendeeEmailsTemp.

Cette approche n’est pas toujours exacte, mais elle se rapproche assez. Par exemple, certains participants de votre organisation peuvent avoir une adresse e-mail telle que Jane@OnContoso.com, alors que le domaine utilisateur _userDomain est Contoso.com. L’utilisateur de l’application et Jane peuvent travailler dans la même entreprise, mais leurs adresses e-mail varient légèrement. Pour de tels cas, vous pouvez utiliser cette formule :

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

Cependant, cette formule fait correspondre les adresses e-mail telles que Jane@NotTheContosoCompany.com avec un domaine utilisateur _userDomain tel que Contoso.com, et ces personnes ne travaillent pas dans la même entreprise.

ClearCollect(MyPeople)

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

Pour récupérer les profils Office 365, vous devez utiliser l’opération Office365Users.UserProfileou Office365Users.UserProfileV2. Ces opérations rassemblent d’abord tous les profils Office 365 pour les participants qui sont dans l’organisation de l’utilisateur. Ensuite, les opérations ajoutent quelques champs pour les participants extérieurs à l’organisation. Vous avez séparé ces deux éléments en opérations distinctes, car la boucle ForAll ne garantit pas l’ordre. Donc, ForAll pourrait recueillir un participant de l’extérieur de l’organisation en premier. Dans ce cas, le schéma de MyPeople contient seulement DisplayName, Id, JobTitle et UserPrincipalName. Cependant, les opérations UserProfile récupèrent des données beaucoup plus riches que cela. Vous forcez donc la collection MyPeople pour ajouter des profils Office 365 avant les autres profils.

Notes

Vous pouvez obtenir le même résultat avec une seule fonctionClearCollect :

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

Pour terminer cet exercice :

Ajoutez un écran contenant une galerie pour laquelle la propriété Items est définie sur MyPeople.
Dans la propriété OnSelect du contrôle Title dans CalendarEventsGallery, ajoutez une fonction Naviguer à l’écran que vous avez créé à l’étape précédente.

Étapes suivantes

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).

Modèle d’écran de calendrier dans les applications canevas

Éléments requis

Fonctionnalité par défaut

Modifier l’écran

Spécifier le calendrier

Afficher différents détails sur un événement

Masquer les événements non bloquants

Intégrer l’écran dans une application

Afficher les détails de l’événement

Afficher les participants à l’événement

Étapes suivantes

Commentaires

Ressources supplémentaires