Informació de referència sobre la plantilla de pantalla de calendari per a les aplicacions de llenç

Per a les aplicacions de llenç de Power Apps, enteneu com cada control significatiu de la plantilla de pantalla de calendari contribueix a la funcionalitat predeterminada general de la pantalla. En aquesta anàlisi en profunditat es presenten fórmules del comportament i els valors d'altres propietats que determinen com els controls responen a les entrades de l'usuari. Per a una discussió d'alt nivell sobre la funcionalitat per defecte d'aquesta pantalla, vegeu la informació general de la pantalla de calendari.

En aquest tema es ressalten alguns controls importants i s'expliquen les expressions o les fórmules amb què es defineixen diverses propietats (com ara Items i OnSelect) d'aquests controls:

Requisit previ

Familiaritzar-se amb com afegir i configurar pantalles i altres controls a mesura que creeu una aplicació a Power Apps.

Menú desplegable de calendari

Control dropdownCalendarSelection

  • Propietat: Items
    Valor: Office365.CalendarGetTables().value

    Aquest valor és una operació de connector que recupera els calendaris de l'Outlook de l'usuari de l'aplicació. Podeu veure el valor que recupera aquesta operació.

  • Propietat: OnChange
    Valor: Select(dropdownCalendarSelection)

    Quan l'usuari selecciona una opció de la llista, s'executa la funció a la propietat OnSelect del control.

  • Propietat: OnSelect
    Valor: una funció If, que apareix al bloc de codi següent i diverses funcions addicionals, que apareixen al bloc de codi següent.

    Aquesta part de la fórmula només executa la primera vegada que l'usuari selecciona una opció de la llista desplegable després d'obrir l'aplicació:

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

    El codi anterior defineix les variables següents:

    • _userDomain: domini de l'empresa de l'usuari de l'aplicació, tal com es reflecteix a l'adreça electrònica de l'usuari.
    • _dateSelected: data d'avui (per defecte). La galeria de calendari destaca aquesta data i la galeria d'esdeveniments mostra els esdeveniments programats en aquesta data.
    • _firstDayOfMonth: el primer dia del mes en curs. Com que (Today + (1 - Today)) = Today - Today + 1 = 1,aquesta funció DateAdd torna sempre el primer dia del mes.
    • _firstDayInView: el primer dia que pot mostrar la galeria de calendari. Aquest valor no és el mateix que el primer dia del mes, tret que el mes s'iniciï en un diumenge. Per evitar que es mostri una setmana sencera del mes anterior, el valor de _firstDayInView és _firstDayOfMonth - Weekday(_firstDayOfMonth) + 1.
    • _lastDayOfMonth: l'últim dia del mes en curs, que és el mateix que el primer dia del mes que ve, menys un dia.

    Les funcions després de l'execució de la funció If sempre que l'usuari selecciona una opció a la llista desplegable calendari (no només la primera vegada que l'usuari obre l'aplicació):

    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 )
    

    El codi anterior defineix aquestes variables i una col·lecció:

    • _calendarVisible: definit com a fals de manera que no aparegui el calendari mentre es carrega la nova selecció.
    • _showLoading: definit com a cert de manera que els indicadors de càrrega apareguin mentre s'està carregant la nova selecció.
    • _myCalendar: definit al valor actual del control llista desplegable de calendari per tal que es recuperin els esdeveniments del calendari correcte.
    • _minDate: definit al mateix valor que _firstdayinview. Aquesta variable determina quins esdeveniments ja s'han recuperat de l'Outlook i s'han emmagatzemat a la memòria cau de l'aplicació.
    • _maxDate: definit en l'últim dia visible al calendari. La fórmula és _firstDayInView + 40. El calendari mostra un màxim de 41 dies, de manera que la variable _maxDate sempre reflecteix l'últim dia visible i determina quins esdeveniments ja s'ha recuperat de l'Outlook i s'han emmagatzemat en memòria cau a l'aplicació.
    • MyCalendarEvents: definit a una col·lecció d'esdeveniments de l'usuari del calendari seleccionat, que van de _minDate a _maxDate.
    • _showLoading: definit com a fals; _calendarVisible es defineix com a cert després d'haver carregat la resta.

Propietats de color

Per a les propietats generals del color, consulteu les propietats color i vora a Power Apps.

Propietats de color úniques per al control desplegable de calendari:

  • ChevronBackground: color del fons per al menú desplegable de calendari.
  • ChevronDisabledBackground: color del fons per al menú desplegable de calendari desactivat.
  • ChevronFill: color d'emplenament per al desplegable de calendari.
  • ChevronDisabledFill: color d'emplenament per al desplegable de calendari desactivat.
  • ChevronHoverBackground: color de fons del calendari desplegable quan l'usuari manté el punter del ratolí a sobre.
  • ChevronHoverFill: color d'emplenament del calendari desplegable quan l'usuari manté el punter del ratolí a sobre.

Icona de calendari

Control iconCalendar

  • Propietat: OnSelect
    Valor: quatre funcions Set que restableixen la galeria de calendari a la data d'avui:

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

    El codi anterior restableix totes les variables de data necessàries per mostrar la visualització correcta del calendari:

    • _dateSelected es restableix al dia d'avui.
    • _firstDayOfMonth es restableix al primer dia del mes d'avui.
    • _firstDayInView es restableix al primer dia visible quan el mes d'avui està seleccionat.
    • _lastDayOfMonth es restableix a l'últim dia del mes d'avui.

    La secció Desplegable calendari d'aquest tema explica aquestes variables en més detall.

Cometes angulars de mes anterior

Control iconPrevMonth

  • Propietat: OnSelect
    Valor: quatre funcions Set i una funció If que mostren el mes anterior a la galeria de calendari:

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

    Nota

    Les definicions de _firstDayOfMonth, _firstDayInView i _lastDayOfMonth són gairebé idèntiques a les de la secció desplegable de calendari d'aquest tema.

    Les tres primeres línies del codi precedent s'executen sempre que l'usuari seleccioni les cometes angulars del mes anterior. El codi defineix les variables necessàries per mostrar la visualització de calendari adequada. El codi restant només s'executa si l'usuari no ha seleccionat prèviament aquest mes per al calendari seleccionat.

    Si aquest és el cas, _minDate és el primer dia que apareix quan el mes anterior es visualitza. Abans que l'usuari seleccioni la icona, _minDate té un mínim valor possible del 23 del mes en curs. (Quan l'1 de març cau en dissabte, _firstDayInView de març és el 23 de febrer.) Això vol dir que si un usuari encara no ha seleccionat aquest mes, _minDate és més gran que el nou _firstDayOfMonth i la funció If retorna cert. El codi s'executa i s'actualitza una col·lecció i una variable:

    • MyCalendarEvents recupera els esdeveniments del calendari seleccionat amb l'operació Office365Outlook.GetEventsCalendarViewV2. L'interval de dates es troba entre la data _firstDayInView i _mindate -1. Com que MyCalendarEvents ja conté esdeveniments a la data _minDate, 1 es resta d'aquesta data per al valor màxim d'aquest interval de dates nou.

    • _minDate es defineix al _firstDayInView actual perquè és la primera data per a la qual s'ha recuperat esdeveniments. Si un usuari torna a aquesta data seleccionant les cometes angulars del mes anterior, la funció If retorna fals; el codi no s'executa perquè els esdeveniments d'aquesta visualització ja estan desats a la memòria cau a MyCalendarEvents.

Cometes angulars del mes següent

Control iconNextMonth

  • Propietat: OnSelect
    Valor: quatre funcions Set i una funció If que mostren el mes següent a la galeria de calendari:

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

    Nota

    Les definicions de _firstDayOfMonth, _firstDayInView i _lastDayOfMonth són gairebé idèntiques a les de la secció desplegable de calendari d'aquest tema.

    Les tres primeres línies del codi anterior, que s'executen quan l'usuari selecciona les cometes angulars del mes següent, defineixen les variables necessàries per mostrar la visualització de calendari adequada. El codi restant només s'executa si l'usuari no ha seleccionat prèviament aquest mes per al calendari seleccionat.

    En aquest cas, _maxDate és l'últim dia que apareix quan el mes anterior es visualitza. Abans que l'usuari seleccioni les cometes angulars del mes següent, _maxDate té un valor màxim possible del 13 del proper mes. (Quan l'1 de febrer cau en un diumenge d'un any que no és de traspàs, _maxDate és el 13 de març, que és _firstDayInView+40 dies.) Això vol dir que si un usuari encara no ha seleccionat aquest mes, _maxDate és més gran que el nou _lastDayOfMonth i la funció If retorna cert. El codi s'executa i s'actualitza una col·lecció i una variable:

    • MyCalendarEvents recupera els esdeveniments del calendari seleccionat amb l'operació Office365Outlook.GetEventsCalendarViewV2. L'interval de dates es troba entre _maxDate+1 dia i _firstDayInView+40 dies. Com que MyCalendarEvents ja conté esdeveniments a la data _minDate, 1 s'afegeix a aquesta data per al valor mínim d'aquest interval de dates nou. _firstDayInView+40 és la fórmula per a _maxDate, per la qual cosa la segona data de l'interval és només el nou _maxDate.

    • _maxDate es defineix a _firstDayInView+40 dies perquè és l'últim dia per al qual s'ha recuperat esdeveniments. Si un usuari torna a aquesta data seleccionant les cometes angulars del mes següent, la funció If retorna fals; el codi no s'executa perquè els esdeveniments d'aquesta visualització ja estan desats a la memòria cau a MyCalendarEvents.

Control MonthDayGallery

  • Propietat: Items
    Valor: [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]

    El conjunt de 0 a 41 s'utilitza per als elements de la galeria de calendaris ja que, en el pitjor escenari, la visualització de calendari haurà de mostrar 42 dies complets. Això passa quan el primer dia del mes és un dissabte i l'últim del mes és un diumenge. En aquest cas, el calendari mostra sis dies del mes anterior a la fila que conté el primer dia del mes i sis dies del mes següent a la fila que conté l'últim dia del mes. Es tracta de 42 valors únics, dels quals 30 són per al mes seleccionat.

  • Propietat: WrapCount
    Valor: 7

    Aquest valor reflecteix una setmana de set dies.

Control de títol MonthDayGallery

  • Propietat: Text
    Valor: Day( DateAdd( _firstDayInView, ThisItem.Value, Days ) )

    Recordeu que _firstDayInView es defineix com a (_firstDayOfMonth-el seu valor de dia de la setmana) + 1. Això us indica que _firstDayInView sempre és un diumenge i que _firstDayOfMonth sempre està a la primera fila de MonthDayGallery. A causa d'aquests dos fets, _firstDayInView és sempre a la primera cel·la de MonthDayGallery. ThisItem.Value és el número per a aquesta cel·la de la propietat de l'element MonthDayGallery. D'aquesta manera, prenent _firstDayInView com a punt de partida, cada cel·la mostra l'increment de _firstDayInView+el seu valor respectiu de cel·la.

  • Propietat: Emplenament
    Valor: una funció 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 )
    )
    

    Tal com es discuteix a la descripció de la propietat Text, DateAdd(_firstDayInView, ThisItem.Value) representa el dia a la cel·la visible. Tenint en compte això, el codi anterior duu a terme aquestes comparacions:

    1. Si el valor de la cel·la és la data d'avui i aquesta cel·la equival a _dateSelected, no proporcionis un valor d'emplenament.

    2. Si el valor de la cel·la és la data d'avui però aquesta cel·la no equival a _dateSelected, proporciona l'emplenament ColorFade.

    3. L'última comparació no és clara. Es tracta d'una comparació entre el valor de text real de la cel·la i el valor de l'element de la cel·la (el número que es mostra i el número de l'element).

      Per entendre millor això, considereu el mes de setembre de 2018, un mes que s'inicia en un dissabte i que acaba en un diumenge. En aquest cas, el calendari mostra del 26 al 31 d'agost i l'1 de setembre a la primera fila i Abs(Title.Text - ThisItem.Value) = 26 fins a l'1 de setembre. Llavors Abs(Title.Text - ThisItem.Value) = 5. Es quedarà a 5 fins a l'última fila del calendari, que mostra el 30 de setembre i de l'1 d'octubre al 6. En aquest cas Abs(Title.Text - ThisItem.Value) continuarà sent 5 per al 30 de setembre, però serà 35 per a les dates d'octubre.

      Aquest és el patró: per als dies que es mostren del mes anterior, Abs(Title.Text - ThisItem.Value) sempre equivaldrà al valor Title.Text del primer dia que es mostra. Per als dies que es mostren en el proper mes, Abs(Title.Text - ThisItem.Value) sempre és igual al valor de l'element MonthDayGallery de la primera cel·la d'aquest mes (en aquest cas, 1 d'octubre) menys 1. I, el més important, per a dies que es visualitzen al mes seleccionat actualment, Abs(Title.Text - ThisItem.Value) també sempre és igual el valor del primer element d'aquest mes menys 1 i que mai excedirà 5, com mostra l'exemple anterior. Per tant, és perfectament vàlid per escriure la fórmula com Abs(Title.Text - ThisItem.Value) > 5.

      Aquesta afirmació comprova si el valor de la data es troba fora del mes seleccionat actualment. Si és així, Emplenament és gris parcialment opac.

    Nota

    Podeu comprovar la validesa d'aquesta última comparació per mitjà d'una inserció d'un control Etiqueta a la galeria i definir la propietat Text en aquest valor:
    Abs(Title.Text - ThisItem.Value).

  • Propietat: Visible
    Valor:

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

    L'estat anterior comprova si la cel·la està en una fila on no es produeix cap dia del mes seleccionat actualment. Recordem que restar el valor de dia de la setmana d'un dia al seu valor de data i sumar 1 sempre torna el primer element a la fila en què es troba el dia. Per tant, aquesta afirmació comprova si el primer dia a la fila és després del darrer dia del mes visible. Si és així, no es mostrarà perquè la fila sencera conté dies del mes següent.

  • Propietat: OnSelect
    Valor: una funció Set que defineix la variable _dateSelected a la data de la cel·la seleccionada:

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

Control de cercle MonthDayGallery

  • Propietat: Visible
    Valor: una fórmula que determina si hi ha planificat cap esdeveniment per a la data seleccionada i si els controls Subcercle i Títol són visibles:

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

    El control Cercle està visible si el camp Inici de qualsevol incidència és equivalent a la data d'aquesta cel·la, si el control Títol està visible, i si el control Subcercle no està visible. En altres paraules, aquest control és visible quan es produeix com a mínim un esdeveniment en aquest dia, i aquest dia no està seleccionat. Si se selecciona, els esdeveniments d'aquest dia es mostren al control CalendarEventsGallery.

Control de subcercle MonthDayGallery

  • Propietat: Visible
    Valor:

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

    El control Subcercle es visualitza quan _dateSelected és equivalent a la data de la cel·la i el control Títol es visualitza. En altres paraules, aquest control apareix quan la cel·la és la data actualment seleccionada.

Control CalendarEventsGallery

  • Propietat: Items
    Valor: una fórmula que ordena i filtra la galeria d'esdeveniments:

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

    La col·lecció MyCalendarEvents conté tots els esdeveniments entre _minDate i _maxDate. Per tal de mostrar els esdeveniments només per a la data seleccionada, s'aplica un filtre a MyCalendarEvents per mostrar els esdeveniments que tenen una data d'inici equivalent a _dateSelected. Els elements s'ordenen segons les dates d'inici per tal de posar-los en ordre seqüencial.

Passos següents