Compartilhar via


Informações de referência sobre o modelo de tela de calendário para aplicativos de tela

Para aplicativos de tela no Power Apps, entenda como cada controle significativo no modelo de tela de calendário contribui para a funcionalidade padrão geral da tela. Este mergulho profundo apresenta as fórmulas de comportamento e os valores de outras propriedades que determinam como os controles respondem à entrada do usuário. Para uma discussão de alto nível sobre a funcionalidade padrão desta tela, consulte a visão geral da tela de calendário.

Este tópico destaca alguns controles significativos e explica as expressões ou fórmulas para as quais várias propriedades (como Items e OnSelect) desses controles são definidas:

Pré-requisito

Familiaridade com como adicionar e configurar telas e outros controles, conforme você cria um aplicativo no Power Apps.

Lista suspensa do calendário

Controle dropdownCalendarSelection.

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

    Este valor é uma operação de conector que recupera os calendários do Outlook do usuário do aplicativo. Você pode ver o valor que esta operação recupera.

  • Propriedade: OnChange
    Valor: Select(dropdownCalendarSelection)

    Quando o usuário seleciona uma opção na lista, a função na propriedade OnSelect do controle é executada.

  • Propriedade: OnSelect
    Valor: uma função If, que aparece no bloco de código a seguir, e várias funções adicionais, que aparecem no bloco de código depois dele.

    Essa parte da fórmula é executada apenas na primeira vez em que o usuário seleciona uma opção na lista suspensa após abrir o aplicativo:

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

    O código anterior define as seguintes variáveis:

    • _userDomain: o domínio corporativo do usuário do aplicativo, conforme refletido no endereço de email do usuário.
    • _dateSelected: a data de hoje (por padrão). A galeria do calendário destaca essa data e a galeria de eventos mostra os eventos agendados para ela.
    • _firstDayOfMonth: o primeiro dia do mês atual. Como (Today + (1 - Today)) = Today - Today + 1 = 1, esta função DateAdd sempre retorna o primeiro dia do mês.
    • _firstDayInView: o primeiro dia em que a galeria do calendário pode ser exibida. Esse valor não é igual ao primeiro dia do mês, a menos que o mês comece em um domingo. Para impedir a exibição de uma semana inteira do mês anterior, o valor de _firstDayInView é _firstDayOfMonth - Weekday(_firstDayOfMonth) + 1.
    • _lastDayOfMonth: o último dia do mês atual, que é igual ao primeiro dia do próximo mês, menos um dia.

    As funções após a função If são executadas sempre que o usuário seleciona uma opção na lista suspensa do calendário (não apenas na primeira vez em que o usuário abre o aplicativo):

    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 )
    

    O código anterior define estas variáveis e uma coleção:

    • _calendarVisible: definida como false para que o calendário não apareça enquanto a nova seleção é carregada.
    • _showLoading: definida como true para que os indicadores de carregamento apareçam enquanto a nova seleção é carregada.
    • _myCalendar: definida como o valor atual do controle Lista suspensa do calendário para que os eventos do calendário correto sejam recuperados.
    • _minDate: definida como o mesmo valor de _firstDayInView. Essa variável determina quais eventos já foram recuperados do Outlook e armazenados em cache no aplicativo.
    • _maxDate: definida como o último dia visível no calendário. A fórmula é _firstDayInView + 40. O calendário exibe no máximo 41 dias, portanto, a variável _maxDate sempre reflete o último dia visível e determina quais eventos já foram recuperados do Outlook e armazenados em cache no aplicativo.
    • MyCalendarEvents: definida como uma coleção dos eventos do usuário no calendário selecionado, variando de _minDate a _maxDate.
    • _showLoading: definida como false; _calendarVisible é definida como true depois que todo o resto tiver sido carregado.

Propriedades de cor

Para ver propriedades de cor gerais, consulte Propriedades de cor e de borda no Power Apps.

Propriedades de cor exclusivas para o controle Lista suspensa do calendário:

  • ChevronBackground - cor da tela de fundo da lista suspensa do calendário.
  • ChevronDisabledBackground - cor da tela de fundo da lista suspensa do calendário desabilitada.
  • ChevronFill - cor de preenchimento da lista suspensa do calendário.
  • ChevronDisabledFill - cor de preenchimento da lista suspensa do calendário desabilitada.
  • ChevronHoverBackground - cor da tela de fundo da lista suspensa do calendário quando o usuário mantém o ponteiro do mouse sobre ela.
  • ChevronHoverFill - cor de preenchimento da lista suspensa do calendário quando o usuário mantém o ponteiro do mouse sobre ela.

Ícone do calendário

Controle iconCalendar.

  • Propriedade: OnSelect
    Valor: quatro funções Set que redefinem a galeria do calendário como a data de hoje:

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

    O código anterior redefine todas as variáveis de data necessárias para a exibição de calendário correta:

    • _dateSelected é redefinida como hoje.
    • _firstDayOfMonth é redefinida como o primeiro dia do mês de hoje.
    • _firstDayInView é redefinida como o primeiro dia visível quando o mês de hoje é selecionado.
    • _lastDayOfMonth é redefinida como o último dia do mês de hoje.

    A seção Lista suspensa do calendário deste tópico explica essas variáveis em mais detalhes.

Divisa do mês anterior

Controle iconPrevMonth.

  • Propriedade: OnSelect
    Valor: quatro funções Set e uma função If que mostram o mês anterior na galeria do calendário:

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

    Observação

    As definições de _firstDayOfMonth, _firstDayInView e _lastDayOfMonth são quase idênticas àquelas na seção Lista suspensa do calendário deste tópico.

    As três primeiras linhas do código anterior são executadas sempre que o usuário seleciona a divisa do mês anterior. O código define as variáveis necessárias para a exibição de calendário correta. O código restante é executado apenas se o usuário não tiver selecionado anteriormente este mês para o calendário selecionado.

    Se esse for o caso, _minDate é o primeiro dia que aparece quando o mês anterior é exibido. Antes de o usuário selecionar o ícone, o valor mínimo possível de _minDate é o dia 23 do mês atual. (Quando 1º de março cai em um sábado, _firstDayInView de março é 23 de fevereiro.) Isso significa que, se um usuário ainda não tiver selecionado este mês, _minDate é maior que o novo _firstDayOfMonth e a função If retorna true. O código é executado e uma coleção e uma variável são atualizadas:

    • MyCalendarEvents recupera eventos do calendário selecionado com a operação Office365Outlook.GetEventsCalendarViewV2. O intervalo de datas é entre a data _firstDayInView e _minDate - 1. Como MyCalendarEvents já contém eventos na data _minDate, 1 é subtraído dessa data para o valor máximo nesse novo intervalo de datas.

    • _minDate está definida como o _firstDayInView atual porque essa é a primeira data para a qual os eventos foram recuperados. Se um usuário retornar a essa data selecionando a divisa do mês anterior, a função If retornará false; o código não será executado porque os eventos para essa exibição já estão armazenados em cache em MyCalendarEvents.

Divisa do próximo mês

Controle iconNextMonth.

  • Propriedade: OnSelect
    Valor: quatro funções Set e uma função If que mostram o próximo mês na galeria do calendário:

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

    Observação

    As definições de _firstDayOfMonth, _firstDayInView e _lastDayOfMonth são quase idênticas àquelas na seção Lista suspensa do calendário deste tópico.

    As três primeiras linhas do código anterior, que são executadas quando o usuário seleciona a divisa do próximo mês, definem as variáveis necessárias para a exibição de calendário correta. O código restante é executado apenas se o usuário não tiver selecionado anteriormente este mês para o calendário selecionado.

    Nesse caso, _maxDate é o último dia que aparece quando o mês anterior é exibido. Antes de o usuário selecionar a divisa do próximo mês, o valor máximo possível de _maxDate é o dia 13 do próximo mês. (Quando 1º de fevereiro cai no domingo de um ano não bissexto, _maxDate é 13 de março, que é _firstDayInView + 40 dias.) Isso significa que, se um usuário ainda não tiver selecionado este mês, _maxDate é maior que o novo _lastDayOfMonth e a função If retorna true. O código é executado e uma coleção e uma variável são atualizadas:

    • MyCalendarEvents recupera eventos do calendário selecionado com a operação Office365Outlook.GetEventsCalendarViewV2. O intervalo de datas é entre _maxDate + 1 dia e _firstDayInView + 40 dias. Como MyCalendarEvents já contém eventos na data _minDate, 1 é adicionado a essa data para o valor mínimo nesse novo intervalo de datas. _firstDayInView + 40 é a fórmula de _maxDate, portanto, a segunda data no intervalo é apenas a nova _maxDate.

    • _maxDate está definida como _firstDayInView + 40 dias porque esse é o último dia para o qual os eventos foram recuperados. Se um usuário retornar a essa data selecionando a divisa do próximo mês, a função If retornará false; o código não será executado porque os eventos para essa exibição já estão armazenados em cache em MyCalendarEvents.

Galeria do calendário

Controle MonthDayGallery.

  • Propriedade: 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]

    O conjunto de 0 a 41 é usado para os itens na galeria do calendário porque, na pior das hipóteses, a exibição de calendário precisará exibir 42 dias inteiros. Isso ocorre quando o primeiro dia do mês é um sábado e o último dia do mês é um domingo. Nesse caso, o calendário mostra seis dias do mês anterior na linha que contém o primeiro dia do mês e seis dias do próximo mês na linha que contém o último dia do mês. São 42 valores exclusivos, dos quais 30 são para o mês selecionado.

  • Propriedade: WrapCount
    Valor: 7

    Este valor reflete uma semana de sete dias.

Controle de título na galeria do calendário

Controle de título MonthDayGallery.

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

    Lembre-se de que _firstDayInView é definido como (_firstDayOfMonth - seu valor de dia útil) + 1. Isso informa que _firstDayInView é sempre um domingo e _firstDayOfMonth está sempre na primeira linha de MonthDayGallery. Por causa desses dois fatos, _firstDayInView está sempre na primeira célula de MonthDayGallery. ThisItem.Value é o número dessa célula na propriedade do item MonthDayGallery. Então, tomando _firstDayInView como ponto de partida, cada célula exibe o incremento de _firstDayInView + seu respectivo valor de célula.

  • Propriedade: Fill
    Valor: uma função 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 )
    )
    

    Conforme discutido na descrição da propriedade Text, DateAdd(_firstDayInView, ThisItem.Value) representa o dia na célula visível. Levando isso em conta, o código anterior realiza estas comparações:

    1. Se o valor da célula for a data de hoje E essa célula for equivalente a _dateSelected, não forneça um valor de preenchimento.

    2. Se o valor da célula for a data de hoje, mas ela não for equivalente a _dateSelected, forneça o preenchimento ColorFade.

    3. A última comparação não é tão clara. É uma comparação entre o valor de texto real na célula e o valor do item da célula (o número em exibição e o número do item).

      Para entender melhor isso, considere setembro de 2018, um mês que começa no sábado e termina no domingo. Nesse caso, o calendário exibe de 26 a 31 de agosto e 1º de setembro na primeira linha e Abs(Title.Text - ThisItem.Value) = 26 até 1º de setembro. Então Abs(Title.Text - ThisItem.Value) = 5. Ele permanecerá em 5 até a última linha do calendário, que exibe 30 de setembro e de 1º a 6 de outubro. Nesse caso, Abs(Title.Text - ThisItem.Value) ainda será 5 para 30 de setembro, mas 35 para as datas de outubro.

      Este é o padrão: para os dias exibidos do mês anterior, Abs(Title.Text - ThisItem.Value) sempre será igual ao valor Title.Text do primeiro dia em exibição. Para os dias exibidos no próximo mês, Abs(Title.Text - ThisItem.Value) sempre será igual ao valor do item MonthDayGallery da primeira célula desse mês (neste caso, 1º de outubro) menos 1. E, o mais importante, para os dias exibidos no mês selecionado atualmente, Abs(Title.Text - ThisItem.Value) também sempre será igual ao valor do primeiro item daquele mês menos 1 e nunca excederá 5, como mostra o exemplo anterior. Portanto, é perfeitamente válido escrever a fórmula como Abs(Title.Text - ThisItem.Value) > 5.

      Essa instrução verifica se o valor de data está fora do mês selecionado atualmente. Se estiver, Fill é um cinza parcialmente opaco.

    Observação

    Você pode verificar a validade dessa última comparação inserindo um controle Rótulo na galeria e definindo sua propriedade Text como este valor:
    Abs(Title.Text - ThisItem.Value).

  • Propriedade: Visible
    Valor:

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

    A instrução anterior verifica se a célula está em uma linha em que não ocorrem dias do mês selecionado atualmente. Lembre-se de que subtrair o valor de dia útil de qualquer dia do seu valor de data e adicionar 1 sempre retorna o primeiro item da linha em que esse dia reside. Portanto, essa instrução verifica se o primeiro dia na linha é posterior ao último dia do mês visível. Se for, ele não aparecerá porque a linha inteira contém dias do mês seguinte.

  • Propriedade: OnSelect
    Valor: uma função Set que define a variável _dateSelected como a data da célula selecionada:

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

Controle de círculo na galeria do calendário

Controle de círculo MonthDayGallery.

  • Propriedade: Visible
    Valor: uma fórmula que determina se algum evento está agendado para a data selecionada e se os controles Subcírculo e Título são visíveis:

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

    O controle Círculo será visível se o campo Iniciar de qualquer evento for equivalente à data dessa célula, se o controle Título for visível e se o controle Subcírculo não for visível. Em outras palavras, esse controle será visível quando pelo menos um evento ocorrer nesse dia e esse dia não estiver selecionado. Se estiver selecionado, os eventos desse dia serão exibidos no controle CalendarEventsGallery.

Controle de subcírculo na galeria do calendário

Controle de subcírculo MonthDayGallery.

  • Propriedade: Visible
    Valor:

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

    O controle Subcírculo será visível quando _dateSelected for equivalente à data da célula e o controle Título for visível. Em outras palavras, esse controle aparecerá quando a célula for a data selecionada atualmente.

Galeria de eventos

Controle CalendarEventsGallery.

  • Propriedade: Items
    Valor: uma fórmula que classifica e filtra a galeria de eventos:

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

    A coleção MyCalendarEvents contém todos os eventos entre _minDate e _maxDate. Para exibir os eventos somente para a data selecionada, um filtro é aplicado em MyCalendarEvents a fim de exibir os eventos com uma data de início equivalente a \ _dateSelected. Os itens então são classificados pelas datas de início para colocá-los em ordem sequencial.

Próximas etapas

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).