Partager via

Informations de référence pour le modèle d’écran du calendrier pour les applications canevas

  • Article

Pour les applications canevas dans Power Apps, comprenez comment chaque contrôle significatif du modèle d’écran du calendrier contribue à la fonctionnalité par défaut globale de l’écran. Cette immersion présente les formules de comportement et les valeurs d’autres propriétés qui déterminent la façon dont les contrôles répondent aux entrées de l’utilisateur. Pour une discussion de niveau supérieur sur la fonctionnalité par défaut de cet écran, consultez la vue d’ensemble de l’écran du calendrier.

Cette rubrique met en évidence certains contrôles importants et explique les expressions ou formules auxquelles diverses propriétés (telles que Itemset OnSelect) de ces contrôles sont définies :

Éléments requis

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

Liste déroulante du calendrier

Contrôle dropdownCalendarSelection.

  • Propriété : Items
    Valeur : Office365.CalendarGetTables().value

    Cette valeur est une opération de connecteur qui récupère les calendriers Outlook de l’utilisateur de l’application. Vous pouvez voir la valeur que cette opération récupère.

  • Propriété : OnChange
    Valeur : Select(dropdownCalendarSelection)

    Lorsque l’utilisateur sélectionne une option dans la liste, la fonction de la propriété OnSelect de la commande s’exécute.

  • Propriété : OnSelect
    Valeur : la fonction If, qui apparaît dans le bloc de code suivant, et plusieurs fonctions supplémentaires, qui apparaissent dans le bloc de code suivant.

    Cette partie de la formule s’exécute uniquement la première fois que l’utilisateur sélectionne une option dans la liste déroulante après avoir ouvert l’application :

    If( IsBlank( _userDomain ),
    UpdateContext( {_showLoading: true} );
    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) - 1), Days ) );
    Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) )  
);

    Le code précédent définit les variables suivantes :

    • _userDomain : domaine de la société de l’utilisateur de l’application, comme indiqué dans l’adresse e-mail de l’utilisateur.
    • _dateSelected : date du jour (par défaut). La galerie de calendriers met en évidence cette date et la galerie d’événements affiche les événements planifiés pour cette date.
    • _firstDayOfMonth : le premier jour du mois actuel. Parce que (Today + (1 - Today)) = Today - Today + 1 = 1, cette fonction DateAdd renvoie toujours le premier jour du mois.
    • _firstDayInView : le premier jour auquel la galerie de calendriers peut s’afficher. Cette valeur n’est pas la même que le premier jour du mois, sauf si le mois commence un dimanche. Pour éviter d’afficher une semaine entière du mois précédent, la valeur de _firstDayInView est _firstDayOfMonth - Weekday(_firstDayOfMonth) + 1.
    • _lastDayOfMonth : le dernier jour du mois en cours, qui est le même que le premier jour du mois suivant, moins un jour.

    Les fonctions après la fonction If s’exécutent chaque fois que l’utilisateur sélectionne une option dans la liste déroulante du calendrier (et pas seulement la première fois où l’utilisateur ouvre l’application) :

    Set( _calendarVisible, false );
UpdateContext( {_showLoading: true} );
Set( _myCalendar, dropdownCalendarSelection2.Selected );
Set( _minDate, 
    DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days )
);
Set(_maxDate, 
    DateAdd(
        DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days ), 
        40, 
        Days
    )
);
ClearCollect( MyCalendarEvents, 
    Office365Outlook.GetEventsCalendarViewV2( _myCalendar.Name, 
        Text( _minDate, UTC ), 
        Text( _maxDate, UTC )
    ).value
);
UpdateContext( {_showLoading: false} );
Set( _calendarVisible, true )

    Le code précédent définit ces variables et une collection :

    • _calendarVisible : définie sur false afin que le calendrier ne s’affiche pas lors du chargement de la nouvelle sélection.
    • _showLoading: définie sur true afin que les indicateurs de chargement s’affichent lors du chargement de la nouvelle sélection.
    • _myCalendar : définie sur la valeur actuelle du contrôle calendar drop-down afin que les événements du bon calendrier soient récupérés.
    • _minDate : définie sur la même valeur que _firstDayInView. Cette variable détermine quels événements ont déjà été récupérés à partir d’Outlook et mis en cache dans l’application.
    • _maxDate : définie sur le dernier jour visible dans le calendrier. La formule est _firstDayInView + 40. Le calendrier affiche un maximum de 41 jours, donc la variable _maxDate reflète toujours le dernier jour visible et détermine quels événements ont déjà été récupérés à partir d’Outlook et mis en cache dans l’application.
    • MyCalendarEvents : définie sur une collection des événements de l’utilisateur du calendrier sélectionné, allant de _minDate à _maxDate.
    • _showLoading : définie sur false; _calendarVisible est définie sur true après le chargement de la totalité des éléments.

Propriétés de la couleur

Pour les propriétés générales des couleurs, reportez-vous à Propriétés de couleur et de bordure dans Power Apps.

Propriétés de couleur uniques pour le contrôle déroulant du calendrier :

  • ChevronBackground : couleur d’arrière-plan pour le menu déroulant du calendrier.
  • ChevronDisabledBackground : couleur d’arrière-plan pour le menu déroulant du calendrier désactivé.
  • ChevronFill : couleur de remplissage pour le menu déroulant du calendrier.
  • ChevronDisabledFill : couleur de remplissage pour le menu déroulant du calendrier désactivé.
  • ChevronHoverBackground : couleur d’arrière-plan du menu déroulant du calendrier lorsque l’utilisateur conserve le pointeur de la souris dessus.
  • ChevronHoverFill : couleur de remplissage du menu déroulant du calendrier lorsque l’utilisateur conserve le pointeur de la souris dessus.

Icône du calendrier

Contrôle iconCalendar.

  • Propriété : OnSelect
    Valeur : quatre fonctions Set qui réinitialisent la galerie de calendriers à la date du jour :

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

    Le code précédent réinitialise toutes les variables de date qui sont nécessaires pour afficher la vue du calendrier appropriée :

    • _dateSelected est réinitialisée à la date du jour.
    • _firstDayOfMonth est réinitialisée sur le premier jour du mois du jour.
    • _firstDayInView est réinitialisée au premier jour visible lorsque le mois du jour est sélectionné.
    • _lastDayOfMonth est réinitialisée sur le dernier jour du mois du jour.

    La section Menu déroulant du calendrier de cette rubrique explique ces variables plus en détails.

Chevron du mois précédent

Contrôle iconPrevMonth.

  • Propriété : OnSelect
    Valeur : quatre fonctions Set et une fonction If qui affiche le mois précédent dans la galerie de calendriers :

    Set( _firstDayOfMonth, DateAdd( _firstDayOfMonth, -1, Months ) );
Set( _firstDayInView, 
    DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days )
);
Set( _lastDayOfMonth, DateAdd(DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
If( _minDate > _firstDayOfMonth,
    Collect( MyCalendarEvents,
        Office365Outlook.GetEventsCalendarViewV2( _myCalendar.Name,
            Text( _firstDayInView, UTC ), 
            Text( DateAdd( _minDate, -1, Days ), UTC )
        ).value
    );
    Set( _minDate, _firstDayInView )
)

    Notes

    Les définitions pour _firstDayOfMonth, _firstDayInView et _lastDayOfMonth sont pratiquement identiques à celles dans la section menu déroulant du Calendrier de cette rubrique.

    Les trois premières lignes du code précédent s’exécutent chaque fois que l’utilisateur sélectionne le chevron du mois précédent. Le code définit les variables nécessaires pour afficher la vue du calendrier appropriée. Le code restant s’exécute uniquement si l’utilisateur n’a pas sélectionné ce mois-ci pour le calendrier sélectionné.

    Si c’est le cas, _minDate est le premier jour qui s’affiche lorsque le mois précédent s’affiche. Avant que l’utilisateur ne sélectionne l’icône, _minDate a une valeur minimale possible le 23 du mois en cours. (Si le 1er mars tombe un samedi, _firstDayInView pour mars est le 23 février.) Cela signifie que si un utilisateur n’a pas encore sélectionné ce mois, _minDate est postérieure à la nouvelle variable _firstDayOfMonth, et la fonction If renvoie la valeur true. Le code s’exécute et une collection et une variable sont mises à jour :

    • MyCalendarEvents récupère les événements du calendrier sélectionné avec l’opération Office365Outlook.GetEventsCalendarViewV2. La plage de dates se situe entre la date _firstDayInView et le _minDate – 1. Parce que MyCalendarEvents contient déjà des événements sur la date _minDate, 1 est soustrait de cette date pour la valeur maximale dans cette nouvelle plage de dates.

    • _minDate est définie sur la valeur _firstDayInView actuelle, car il s’agit de la première date à laquelle des événements ont été récupérés. Si un utilisateur revient à cette date en sélectionnant le chevron du mois précédent, la fonction If renvoie false ; le code ne s’exécute pas, car les événements de cette vue sont déjà mis en cache dans MyCalendarEvents.

Chevron mois prochain

Contrôle iconNextMonth.

  • Propriété : OnSelect
    Valeur : quatre fonctions Set et une fonction If qui affichent le mois suivant dans la galerie de calendriers :

    Set( _firstDayOfMonth, DateAdd( _firstDayOfMonth, 1, Months ) );
Set( _firstDayInView, 
    DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days ) );
Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
If(_maxDate < _lastDayOfMonth, 
Collect(MyCalendarEvents,
        Office365Outlook.GetEventsCalendarViewV2(_myCalendar.Name,
            Text(DateAdd(_maxDate, 1, Days), UTC),
            Text(DateAdd(_firstDayInView, 40, Days))
        ).value
);
Set(_maxDate, DateAdd(_firstDayInView, 40, Days))
)

    Notes

    Les définitions pour _firstDayOfMonth, _firstDayInView et _lastDayOfMonth sont pratiquement identiques à celles dans la section menu déroulant du Calendrier de cette rubrique.

    Les trois premières lignes du code précédent, qui s’exécutent lorsque l’utilisateur sélectionne le chevron du mois suivant, définissent les variables nécessaires pour afficher la vue du calendrier appropriée. Le code restant s’exécute uniquement si l’utilisateur n’a pas sélectionné ce mois-ci pour le calendrier sélectionné.

    Dans ce cas, _maxDate est le dernier jour qui s’affiche lorsque le mois précédent s’affiche. Avant que l’utilisateur ne sélectionne le chevron du mois suivant, _maxDate a une valeur maximale possible du 13 le mois suivant. (Si le 1er février tombe un dimanche une année non bissextile, _maxeDate est le 13 mars, qui est _firstDayInView + 40 jours.) Cela signifie que si un utilisateur n’a pas encore sélectionné ce mois, _maxDate est postérieure à la nouvelle variable _lastDayOfMonth, et la fonction If renvoie la valeur true. Le code s’exécute et une collection et une variable sont mises à jour :

    • MyCalendarEvents récupère les événements du calendrier sélectionné avec l’opération Office365Outlook.GetEventsCalendarViewV2. La plage de dates se situe entre _maxDate + 1 jour et _firstDayInView + 40 jours. Parce que MyCalendarEvents contient déjà des événements sur la date _minDate, 1 est ajouté à cette date pour la valeur minimale dans cette nouvelle plage de dates. _firstDayInView + 40 est la formule pour _maxDate, donc la deuxième date de la plage est juste la nouvelle variable _maxDate.

    • _maxDate est définie sur la valeur _firstDayInView + 40 jours, car il s’agit de la dernière date à laquelle des événements ont été récupérés. Si un utilisateur revient à cette date en sélectionnant le chevron du mois suivant, la fonction If renvoie false ; le code ne s’exécute pas, car les événements de cette vue sont déjà mis en cache dans MyCalendarEvents.

Contrôle MonthDayGallery.

  • Propriété : Items
    Valeur : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19, 20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41]

    L’ensemble de 0 à 41 est utilisé pour les éléments de la galerie de calendriers, car, dans le pire des scénarios, la vue du calendrier doit afficher 42 jours complets. Cela se produit lorsque le premier du mois est un samedi et le dernier du mois est un dimanche. Dans ce cas, le calendrier affiche six jours du mois précédent dans la ligne contenant le premier du mois et six jours à partir du mois suivant dans la ligne contenant le dernier du mois. Il s’agit de 42 valeurs uniques, dont 30 pour le mois sélectionné.

  • Propriété : WrapCount
    Valeur : 7

    Cette valeur reflète une semaine de sept jours.

Contrôle de titre MonthDayGallery.

  • Propriété : Texte
    Valeur : Day( DateAdd( _firstDayInView, ThisItem.Value, Days ) )

    Rappelez que _firstDayInView est défini comme ( _firstDayOfMonth – sa valeur de jour en semaine) + 1. Cela vous dit que _firstDayInView est toujours un dimanche, et _firstDayOfMonth est toujours dans la première ligne de la variable MonthDayGallery. En raison de ces deux faits, _firstDayInView est toujours dans la toute première cellule de MonthDayGallery. ThisItem.Value est le numéro de cette cellule dans la propriété de l’élément MonthDayGallery. Donc, en prenant _firstDayInView comme point de départ, chaque cellule affiche l’incrément de _firstDayInView + sa valeur de cellule respective.

  • Propriété : Fill
    Valeur : une fonction If :

    If( DateAdd( _firstDayInView, ThisItem.Value ) = Today() && 
            DateAdd( _firstDayInView, ThisItem.Value ) = _dateSelected, 
        RGBA( 0, 0, 0, 0 ),
    DateAdd( _firstDayInView, ThisItem.Value) = Today(), 
        ColorFade( Subcircle.Fill, 0.67 ),
    Abs( Title.Text - ThisItem.Value) > 10,
        RGBA( 200, 200, 200, 0.3 ),
    RGBA( 0, 0, 0, 0 )
)

    Comme indiqué dans la description de la propriété Texte, DateAdd(_firstDayInView, ThisItem.Value) représente le jour dans la cellule visible. En tenant compte de cela, le code précédent effectue ces comparaisons :

    1. Si la valeur de la cellule est la date du jour ET que cette cellule est équivalente à _dateSelected, ne fournissez pas de valeur de remplissage.

    2. Si la valeur de la cellule est la date du jour, mais si cette cellule n’est pas équivalente à _dateSelected, fournissez la valeur de remplissage ColorFade.

    3. La dernière comparaison n’est pas aussi claire. Il s’agit d’une comparaison entre la valeur réelle du texte dans la cellule et la valeur de l’élément de cellule (le numéro affiché et le numéro d’article).

      Pour mieux comprendre cela, prenons septembre 2018, un mois qui commence un samedi et se termine un dimanche. Dans ce cas, le calendrier affiche du 26 au 31 août et le 1er septembre dans la première ligne, et Abs(Title.Text - ThisItem.Value) = 26 jusqu’au 1er septembre. Puis Abs(Title.Text - ThisItem.Value) = 5. Il reste à 5 jusqu’à la dernière ligne du calendrier, qui affiche le 30 septembre et le 1er octobre jusqu’au 6 octobre. Dans ce Abs(Title.Text - ThisItem.Value) reste toujours 5 pour le 30 septembre, mais sera 35 pour les dates d’octobre.

      Voici le schéma : pour les jours affichés depuis le mois précédent, Abs(Title.Text - ThisItem.Value) est toujours égal à la valeur Title.Text du premier jour affiché. Pour les jours affichés le mois suivant, Abs(Title.Text - ThisItem.Value) est toujours égal à la valeur de l’élément MonthDayGallery de la première cellule de ce mois (dans ce cas, le 1er octobre) moins 1. Et, plus important encore, pour les jours affichés dans le mois actuellement sélectionné, Abs(Title.Text - ThisItem.Value)est également toujours égal à la valeur du premier élément de ce mois moins 1 et ne dépasse jamais 5, comme le montre l’exemple précédent. Il est donc parfaitement valable d’écrire la formule comme Abs(Title.Text - ThisItem.Value) > 5.

      Cette instruction vérifie si la valeur de la date est en dehors du mois actuellement sélectionné. Si c’est le cas, la valeur Fill affiche une couleur grise partiellement opaque.

    Notes

    Vous pouvez vérifier vous-même la validité de cette dernière comparaison en insérant un contrôle Étiquette dans la galerie et en définissant sa propriété Texte sur cette valeur :
    Abs(Title.Text - ThisItem.Value).

  • Propriété : Visible
    Valeur :

    !(
    DateAdd( _firstDayInView, ThisItem.Value, Days ) - 
        Weekday( DateAdd( _firstDayInView, ThisItem.Value,Days ) ) + 1 
    > _lastDayOfMonth
)

    L’instruction précédente vérifie si la cellule est dans une ligne où aucun jour du mois actuellement sélectionné ne survient. N’oubliez pas que le fait de soustraire la valeur du jour de la semaine de tout jour à partir de sa valeur de date et d’ajouter 1 renvoie toujours le premier élément sur la première ligne où se trouve ce jour. Cette instruction vérifie donc si le premier jour de la ligne est postérieur au dernier jour du mois visible. Si tel est le cas, il n’apparaît pas, car la ligne entière contient les jours du mois suivant.

  • Propriété : OnSelect
    Valeur : fonction Set qui définit la variable _dateSelected à la date de la cellule sélectionnée :

    Set( _dateSelected, DateAdd( _firstDayInView, ThisItem.Value, Days ) )

Contrôle MonthDayGallery Circle.

  • Propriété : Visible
    Valeur : formule qui détermine si des événements sont planifiés pour la date sélectionnée et si les contrôles Subcircle et Title sont visibles :

    CountRows(
    Filter( MyCalendarEvents, 
        DateValue( Text( Start ) ) = DateAdd( _firstDayInView, ThisItem.Value, Days )
    )
) > 0 && !Subcircle.Visible && Title.Visible

    Le contrôle Circle est visible si le champ Début pour tout événement est équivalent à la date de cette cellule, si le contrôle Title est visible, et si le contrôle Subcircle n’est pas visible. En d’autres termes, ce contrôle est visible lorsqu’au moins un événement se produit ce jour-là et que ce jour n’est pas sélectionné. S’il est sélectionné, les événements de ce jour sont affichés dans le contrôle CalendarEventsGallery.

Contrôle MonthDayGallery Subcircle.

  • Propriété : Visible
    Valeur :

    DateAdd( _firstDayInView, ThisItem.Value ) = _dateSelected && Title.Visible

    Le contrôle Subcircle est visible lorsque _dateSelected équivaut à la date de la cellule et le contrôle Title est visible. En d’autres termes, ce contrôle apparaît lorsque la cellule est la date actuellement sélectionnée.

Contrôle CalendarEventsGallery.

  • Propriété : Items
    Valeur : formule qui trie et filtre la galerie d’événements :

    SortByColumns(
    Filter( MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = Text( _dateSelected, DateTimeFormat.ShortDate )
    ),
    "Start"
)

    La collection MyCalendarEvents contient tous les événements entre _minDate et _maxDate. Afin d’afficher les événements uniquement pour la date sélectionnée, un filtre est appliqué sur MyCalendarEvents pour afficher les événements dont la date de début est équivalente à \ _dateSelected. Les éléments sont ensuite triés par date de début pour les mettre dans un ordre séquentiel.

É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é).