Informazioni di riferimento per il modello di schermata del calendario per le app canvas

Per le app canvas in Power Apps, comprendi in che modo ciascun controllo significativo nel modello di schermata del calendario contribuisce alla funzionalità predefinita complessiva della schermata. In questo articolo sono presentate le formule di comportamento e i valori di altre proprietà che determinano il modo in cui i controlli rispondono all'input dell'utente. Per una discussione di alto livello sulla funzionalità predefinita di questa schermata, consulta la panoramica della schermata del calendario.

In questo argomento vengono evidenziati alcuni controlli significativi e descritte le espressioni o le formule su cui varie proprietà (come Items and OnSelect) di questi controlli sono impostate:

Prerequisito

Familiarità con l'aggiunta e la configurazione di schermate e altri controlli durante la creazione di un'app in Power Apps.

Elenco a discesa del calendario

Controllo dropdownCalendarSelection

  • Proprietà: Items
    Valore: Office365.CalendarGetTables().value

    Questo valore è un'operazione del connettore che recupera i calendari di Outlook dell'utente dell'app. Puoi vedere il valore recuperato da questa operazione.

  • Proprietà: OnChange
    Valore: Select(dropdownCalendarSelection)

    Quando l'utente seleziona un'opzione nell'elenco, la funzione nella proprietà OnSelect del controllo viene eseguita.

  • Proprietà: OnSelect
    Valore: una funzione If, che appare nel seguente blocco di codice, e diverse funzioni aggiuntive, che compaiono nel blocco di codice successivo.

    Questa parte della formula viene eseguita solo la prima volta che l'utente seleziona un'opzione nell'elenco a discesa dopo aver aperto l'app:

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

    Il codice precedente definisce le seguenti variabili:

    • _userDomain: dominio della società dell'utente dell'app, come indicato nell'indirizzo e-mail dell'utente.
    • _dateSelected: data odierna (per impostazione predefinita). La raccolta del calendario evidenzia questa data e la raccolta degli eventi mostra gli eventi in programma per quella data.
    • _firstDayOfMonth: il primo giorno del mese corrente. Poiché (Today + (1 - Today)) = Today - Today + 1 = 1, questa funzione DateAdd restituisce sempre il primo giorno del mese.
    • _firstDayInView: il primo giorno in cui è possibile mostrare la raccolta del calendario. Questo valore non è uguale al primo giorno del mese a meno che il mese non inizi di domenica. Per impedire la visualizzazione di un'intera settimana del mese precedente, il valore di _firstDayInView è _firstDayOfMonth - Weekday(_firstDayOfMonth) + 1.
    • _lastDayOfMonth: l'ultimo giorno del mese corrente, uguale al primo giorno del mese successivo, meno un giorno.

    Le funzioni dopo la funzione If eseguita ogni volta che l'utente seleziona un'opzione nell'elenco a discesa del calendario (non solo la prima volta che l'utente apre l'app):

    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, 
        'Office365'.GetEventsCalendarViewV2( _myCalendar.Name, 
            Text( _minDate, UTC ), 
            Text( _maxDate, UTC )
        ).value
    );
    UpdateContext( {_showLoading: false} );
    Set( _calendarVisible, true )
    

    Il codice precedente definisce queste variabili e una raccolta:

    • _calendarVisible: imposta su false in modo che il calendario non appaia mentre la nuova selezione viene caricata.
    • _showloading: imposta su true in modo che gli indicatori di caricamento vengano visualizzati durante il caricamento della nuova selezione.
    • _myCalendar: imposta sul valore corrente del controllo calendario a discesa in modo che vengano recuperati gli eventi dal calendario corretto.
    • _minDate: imposta sullo stesso valore di _firstDayInView. Questa variabile determina quali eventi sono già stati recuperati da Outlook e memorizzati nella cache dell'app.
    • _maxDate: imposta sull'ultimo giorno visualizzabile nel calendario. La formula è _firstDayInView + 40. Il calendario visualizza un massimo di 41 giorni, quindi la variabile _maxDate riflette sempre l'ultimo giorno visualizzabile e determina quali eventi sono già stati recuperati da Outlook e memorizzati nella cache dell'app.
    • MyCalendarEvents: imposta su una raccolta di eventi dell'utente dal calendario selezionato, compresi tra _minDate e _maxDate.
    • _showloading: imposta su false; _calendarVisible è impostato su true dopo che tutto il resto è stato caricato.

Proprietà del colore

Per le proprietà generali del colore, consulta Proprietà di colore e bordo in Power Apps.

Proprietà di colore uniche per il controllo a discesa del calendario:

  • ChevronBackground - Colore di sfondo per il menu a discesa del calendario.
  • ChevronDisabledBackground - Colore di sfondo per il menu a discesa del calendario disabilitato.
  • ChevronFill - Colore di riempimento per il menu a discesa del calendario.
  • ChevronDisabledFill - Colore di riempimento per il menu a discesa del calendario disabilitato.
  • ChevronHoverBackground - Colore di sfondo del menu a discesa del calendario quando l'utente mantiene il puntatore del mouse su di esso.
  • ChevronHoverFill - Colore di riempimento del menu a discesa del calendario quando l'utente mantiene il puntatore del mouse su di esso.

Icona del calendario

Controllo iconCalendar

  • Proprietà: OnSelect
    Valore: quattro funzioni Set che ripristinano la raccolta del calendario alla data odierna:

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

    Il codice precedente reimposta tutte le variabili di data necessarie per visualizzare la visualizzazione corretta del calendario:

    • _dateSelected viene reimpostato su oggi.
    • _firstDayOfMonth viene reimpostato sul primo giorno del mese di oggi.
    • _firstDayInView viene reimpostato sul primo giorno visualizzabile quando viene selezionato il mese di oggi.
    • _lastDayOfMonth viene reimpostato sull'ultimo giorno del mese di oggi.

    La sezione Calendario a discesa di questo argomento spiega queste variabili in modo più dettagliato.

Freccia di espansione del mese precedente

Controllo iconPrevMonth

  • Proprietà: OnSelect
    Valore: quattro funzioni Set e una funzione If che mostra il mese precedente nella raccolta del calendario:

    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,
            'Office365'.GetEventsCalendarViewV2( _myCalendar.Name,
                Text( _firstDayInView, UTC ), 
                Text( DateAdd( _minDate, -1, Days ), UTC )
            ).value
        );
        Set( _minDate, _firstDayInView )
    )
    

    Nota

    Le definizioni per _firstDayOfMonth, _firstDayInView e _lastDayOfMonth sono quasi identiche a quelle nella sezione Calendario a discesa di questo argomento.

    Le prime tre righe del codice precedente vengono eseguite ogni volta che l'utente seleziona la freccia di espansione del mese precedente. Il codice imposta le variabili necessarie per visualizzare la visualizzazione corretta del calendario. Il codice rimanente viene eseguito solo se l'utente non ha precedentemente selezionato questo mese per il calendario selezionato.

    Se questo è il caso, _minDate è il primo giorno visualizzato quando viene visualizzato il mese precedente. Prima che l'utente selezioni l'icona, _minDate ha un valore minimo possibile del 23 del mese corrente. (Quando il 1 marzo cade di sabato, _firstDayInView per marzo è il 23 febbraio). Ciò significa che se un utente non ha ancora selezionato questo mese, _minDate è maggiore del nuovo _firstDayOfMonth e la funzione If restituisce true. Il codice viene eseguito e una raccolta e una variabile vengono aggiornate:

    • MyCalendarEvents recupera gli eventi dal calendario selezionato con l'operazione Office365.GetEventsCalendarViewV2. L'intervallo di date è compreso tra _firstDayInView e _minDate - 1. Perché MyCalendarEvents contiene già eventi per la data _minDate, 1 viene sottratto da quella data per il valore massimo in questo nuovo intervallo di date.

    • _minDate è impostato sul _firstDayInView corrente perché questa è la prima data per la quale sono stati recuperati gli eventi. Se un utente ritorna a questa data selezionando la freccia di espansione del mese precedente, la funzione If restituisce false; il codice non viene eseguito perché gli eventi per questa visualizzazione sono già memorizzati nella cache in MyCalendarEvents.

Freccia di espansione del prossimo mese

Controllo iconNextMonth

  • Proprietà: OnSelect
    Valore: quattro funzioni Set e una funzione If che mostra il mese successivo nella raccolta del calendario:

    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, 
            'Office365'.GetEventsCalendarViewV2( _myCalendar.Name, 
                Text( DateAdd( _maxDate, 1, Days ), UTC ), 
                DateAdd( _firstDayInView, 40, Days )
            ).value
        );
        Set( _maxDate, DateAdd( _firstDayInView, 40, Days) )    
    )
    

    Nota

    Le definizioni per _firstDayOfMonth, _firstDayInView e _lastDayOfMonth sono quasi identiche a quelle nella sezione Calendario a discesa di questo argomento.

    Le prime tre righe del codice precedente, che vengono eseguite quando l'utente seleziona la freccia di espansione del mese successivo, impostano le variabili necessarie per visualizzare la corretta vista del calendario. Il codice rimanente viene eseguito solo se l'utente non ha precedentemente selezionato questo mese per il calendario selezionato.

    In questo caso, _maxDate è l'ultimo giorno visualizzato quando viene visualizzato il mese precedente. Prima che l'utente selezioni la freccia di espansione del mese successivo, _maxDate ha un valore massimo possibile del 13 del mese successivo. (Quando il 1 febbraio cade di domenica non anno bisestile, _maxDate è il 13 marzo, ossia _firstDayInView + 40 giorni). Ciò significa che se un utente non ha ancora selezionato questo mese, _maxDate è maggiore del nuovo _lastDayOfMonth e la funzione Ifrestituisce true. Il codice viene eseguito e una raccolta e una variabile vengono aggiornate:

    • MyCalendarEvents recupera gli eventi dal calendario selezionato con l'operazione Office365.GetEventsCalendarViewV2. L'intervallo di date è compreso tra _maxDate + 1 giorno e _firstDayInView + 40 giorni. Perché MyCalendarEvents contiene già eventi per la data _minDate, 1 viene aggiunto a quella data per il valore minimo in questo nuovo intervallo di date. _firstDayInView + 40 è la formula per _maxDate, quindi la seconda data dell'intervallo è solo la nuova _maxDate.

    • _maxDate è impostato sul _firstDayInView + 40 giorni perché questa è l'ultima data per la quale sono stati recuperati gli eventi. Se un utente ritorna a questa data selezionando la freccia di espansione del mese successivo, la funzione If restituisce false; il codice non viene eseguito perché gli eventi per questa visualizzazione sono già memorizzati nella cache in MyCalendarEvents.

Controllo MonthDayGallery

  • Proprietà: Items
    Valore: [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]

    I valori da 0 a 41 vengono utilizzati per gli elementi nella raccolta del calendario perché, nello scenario peggiore, la vista del calendario deve visualizzare 42 giorni interi. Ciò si verifica quando il primo del mese cade di sabato e l'ultimo del mese cade di domenica. In questo caso, il calendario mostra sei giorni dal mese precedente nella riga contenente il primo del mese e sei giorni dal mese successivo nella riga contenente l'ultimo del mese. Si tratta di 42 valori univoci, di cui 30 per il mese selezionato.

  • Proprietà: WrapCount
    Valore: 7

    Questo valore riflette una settimana di sette giorni.

Controllo Titolo MonthDayGallery

  • Proprietà: Text
    Valore: Day( DateAdd( _firstDayInView, ThisItem.Value, Days ) )

    Ricorda che _firstDayInView è definito come (_firstDayOfMonth - il valore del giorno della settimana) + 1. Questo ti indica che _firstDayInView è sempre domenica e _firstDayOfMonth è sempre nella prima riga di MonthDayGallery. A causa di questi due fatti, _firstDayInView è sempre nella prima cella di MonthDayGallery. ThisItem.Value è il numero per la cella nella proprietà dell'elemento MonthDayGallery. Quindi, prendendo _firstDayInView come punto di partenza, ogni cella visualizza l'incremento di _firstDayInView + il rispettivo valore della cella.

  • Proprietà: Fill
    Valore: una funzione 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 )
    )
    

    Come discusso nella descrizione della proprietà Testo, DateAdd(_firstDayInView, ThisItem.Value) rappresenta il giorno nella cella visibile. Tenendo conto di ciò, il codice precedente esegue questi confronti:

    1. Se il valore della cella è la data odierna E questa cella è equivalente a _dateSelected, non fornire un valore di riempimento.

    2. Se il valore della cella è la data odierna ma non è equivalente a _dateSelected, fornisci il riempimento ColorFade.

    3. L'ultimo confronto non è così chiaro. È un confronto tra il valore di testo effettivo nella cella e il valore dell'elemento cella (il numero visualizzato e il numero dell'articolo).

      Per capirlo meglio, considera settembre 2018, un mese che inizia di sabato e termina di domenica. In questo caso, il calendario visualizza dal 26 al 31 agosto e il 1 settembre nella prima riga e Abs(Title.Text - ThisItem.Value) = 26 fino al 1 settembre. Quindi Abs(Title.Text - ThisItem.Value) = 5. Rimarrà 5 fino all'ultima riga del calendario, che mostra il 30 settembre e dal 1 al 6 ottobre. In Abs(Title.Text - ThisItem.Value) sarà ancora 5 per il 30 settembre, ma sarà 35 per le date di ottobre.

      Questo è lo schema: per i giorni visualizzati dal mese precedente, Abs(Title.Text - ThisItem.Value) sarà sempre uguale al valore Title.Text del primo giorno sulla visualizzazione. Per i giorni visualizzati nel mese successivo, Abs(Title.Text - ThisItem.Value) sarà sempre uguale al valore dell'elemento MonthDayGallery della prima cella di quel mese (in questo caso, 1 ottobre) meno 1. E, soprattutto, per i giorni visualizzati nel mese attualmente selezionato, Abs(Title.Text - ThisItem.Value) eguaglierà sempre il valore del primo elemento di quel mese meno 1 e non supererà mai 5, come mostra l'esempio precedente. Quindi è perfettamente valido scrivere la formula come Abs(Title.Text - ThisItem.Value) > 5.

      Questa istruzione verifica se il valore della data è esterno al mese attualmente selezionato. Se lo è, il riempimento è un grigio parzialmente opaco.

    Nota

    Puoi verificare tu stesso la validità di quest'ultimo confronto inserendo un controllo Etichetta nella raccolta e impostando la proprietà Testo su questo valore:
    Abs(Title.Text - ThisItem.Value).

  • Proprietà: Visible
    Valore:

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

    L'istruzione precedente verifica se la cella si trova in una riga in cui non cadono i giorni del mese attualmente selezionato. Ricorda che sottraendo il valore del giorno della settimana di qualsiasi giorno dal suo valore di data e aggiungendo 1 viene sempre restituito il primo elemento nella riga in cui cade quel giorno. Quindi questa istruzione controlla se il primo giorno della riga cade dopo l'ultimo giorno del mese visualizzabile. In tal caso, non verrà visualizzato perché l'intera riga contiene i giorni del mese successivo.

  • Proprietà: OnSelect
    Valore: una funzione Set che imposta la variabile _dateSelected sulla data della cella selezionata:

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

Controllo del cerchio MonthDayGallery

  • Proprietà: Visible
    Valore: una formula che determina se sono programmati eventi per la data selezionata e se i controlli Cerchio secondario e Titolo sono visibili:

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

    Il controllo Cerchio è visibile se il campo Inizio per qualsiasi evento è equivalente alla data di quella cella, se il controllo Titolo è visibile e se il controllo Cerchio secondario non è visibile. In altre parole, questo controllo è visibile quando si verifica almeno un evento in questo giorno e il giorno non è selezionato. Se è selezionato, gli eventi per quel giorno vengono visualizzati nel controllo CalendarEventsGallery.

Controllo del cerchio secondario MonthDayGallery

  • Proprietà: Visible
    Valore:

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

    Il controllo Cerchio secondario è visibile quando _dateSelected è equivalente alla data della cella e il controllo Titolo è visibile. In altre parole, questo controllo appare quando la cella è la data attualmente selezionata.

Controllo CalendarEventsGallery

  • Proprietà: Items
    Valore: una formula che ordina e filtra la raccolta degli eventi:

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

    La raccolta MyCalendarEvents contiene tutti gli eventi compresi tra _minDate e _maxDate. Per visualizzare gli eventi solo per la data selezionata, viene applicato un filtro in MyCalendarEvents per visualizzare gli eventi con una data di inizio equivalente a \ _dateSelected. Gli elementi vengono quindi ordinati in base alla data di inizio per metterli in ordine sequenziale.

Passaggi successivi