Compartilhar via

Modelo de tela Calendário em aplicativos de tela

  • Artigo

Em um aplicativo de tela, adicione uma tela de calendário que mostre aos usuários os futuros eventos de suas contas do Office 365 Outlook. Os usuários podem selecionar uma data no calendário e rolar por uma lista dos eventos desse dia. Você pode alterar os detalhes que aparecem na lista, adicionar uma segunda tela que mostra mais detalhes sobre cada evento, mostrar uma lista de participantes de cada evento e fazer outras personalizações.

Você também pode adicionar outras telas baseadas em modelo que mostram dados diferentes do Office 365, como o email, as pessoas em uma organização e a disponibilidade das pessoas que os usuários talvez queiram convidar para uma reunião.

Esta visão geral ensina:

  • Como usar a tela de calendário padrão.
  • Como modificá-la.
  • Como integrá-la a um aplicativo.

Para aprofundar-se na funcionalidade padrão desta tela, consulte a Referência da tela Calendário.

Pré-requisito

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

Funcionalidade padrão

Para adicionar uma tela de calendário a partir do modelo:

  1. Entre em para Power Apps e crie um aplicativo ou abra um aplicativo existente no Power Apps Studio.

    Este tópico mostra um aplicativo para telefone, mas os mesmos conceitos se aplicam a um aplicativo para tablet.

  2. Na guia Página Inicial da faixa de opções, selecione Nova tela > Calendário.

    Por padrão, a tela é semelhante a esta:

    Tela de calendário.

  3. Para exibir dados, selecione uma opção na lista suspensa próxima à parte superior da tela.

    Tela do calendário após a conclusão do carregamento.

Algumas observações úteis:

  • A data de hoje é selecionada por padrão e é possível retornar facilmente selecionando o ícone de calendário no canto superior direito.
  • Se você selecionar uma data diferente, haverá um círculo em volta dela e um retângulo de cor clara (azul se o tema padrão for aplicado) em volta da data de hoje.
  • Se, pelo menos, um evento estiver agendado para uma data específica, um pequeno círculo colorido aparecerá sob essa data no calendário.
  • Se você selecionar uma data para a qual um ou mais eventos estão agendados, o(s) evento(s) serão exibidos em uma lista no calendário.

Modificar a tela

Você pode modificar a funcionalidade padrão desta tela de algumas maneiras comuns:

Se você deseja modificar ainda mais a tela, use a Referência da tela Calendário como guia.

Especificar o calendário

Se já sabe qual calendário seus usuários devem exibir, você poderá simplificar a tela especificando esse calendário antes de publicar o aplicativo. Essa alteração elimina a necessidade da lista suspensa de calendários, portanto, você poderá removê-la.

  1. Defina a propriedade OnStart do aplicativo para esta fórmula:

    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 )

    Observação

    Essa fórmula foi ligeiramente editada do valor padrão da propriedade OnSelect da lista suspensa para a seleção de um calendário. Para obter mais informações sobre esse controle, consulte sua seção na Referência da tela Calendário.

  2. Substitua {YourCalendarNameHere}, incluindo as chaves, pelo nome do calendário que você quer que seja exibido (por exemplo, Calendário).

    Importante

    As etapas a seguir pressupõem que você tenha adicionado somente uma tela de calendário ao aplicativo. Se você adicionou mais de um, os nomes de controle (como iconCalendar1) terminarão com um número diferente e você deverá ajustar as fórmulas devidamente.

  3. Defina a propriedade Y do controle iconCalendar1 como esta expressão:

    RectQuickActionBar1.Height + 20

  4. Defina a propriedade Y do controle LblMonthSelected1 como esta expressão:

    iconCalendar1.Y + iconCalendar1.Height + 20

  5. Defina a propriedade Text do controle LblNoEvents1 como este valor:

    "No events scheduled"

  6. Defina a propriedade Visible LblNoEvents1 como esta fórmula:

    CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible

  7. Exclua estes controles:

    • dropdownCalendarSelection1
    • LblEmptyState1
    • iconEmptyState1

  8. Se a tela do calendário não for a tela padrão, adicione um botão que navegue da tela padrão para a tela do calendário para que você possa testar o aplicativo.

    Por exemplo, adicione um botão em Screen1 que navegue para Screen2 se você tiver adicionado uma tela de calendário a um aplicativo que criou do zero.

  9. Salve o aplicativo e teste-o em um navegador ou dispositivo móvel.

Exibir detalhes diferentes sobre um evento

Por padrão, a galeria no calendário, chamada CalendarEventsGallery, mostra o horário de início, a duração, o assunto e o local de cada evento. Você pode configurar a galeria para mostrar qualquer campo (como o organizador) ao qual o conector do Office 365 ofereça suporte.

  1. Em CalendarEventsGallery, defina a propriedade Text de um rótulo novo ou existente como ThisItem seguida por um ponto.

    O IntelliSense lista os campos que podem ser selecionados.

  2. Selecione o campo que você deseja.

    O rótulo mostra o tipo de informação que você especificou.

Ocultar eventos sem bloqueio

Em muitos escritórios, os membros da equipe enviam solicitações de reunião para notificar um ao outro quando estarão fora do escritório. Para evitar o bloqueio das agendas de todos, a pessoa que envia a solicitação define sua disponibilidade como Livre. Você pode ocultar esses eventos do calendário e da galeria atualizando algumas propriedades.

  1. Defina a propriedade Items de CalendarEventsGallery como esta fórmula:

    SortByColumns(
    Filter(
        MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = 
            Text( _dateSelected, DateTimeFormat.ShortDate ),
        ShowAs <> "Free"
    ),
    "Start"
)

    Nesta fórmula, a função Filter oculta não somente os eventos agendados para uma data diferente da selecionada, mas também os eventos para os quais a disponibilidade foi definida como Livre.

  2. No calendário, defina a propriedade Visible com controle Círculo como esta fórmula:

    CountRows(
    Filter(
        MyCalendarEvents,
        DateValue( Text(Start) ) = DateAdd( _firstDayInView, ThisItem.Value, TimeUnit.Days ),
        ShowAs <> "Free"
    )
) > 0 && !Subcircle1.Visible && Title2.Visible

    A fórmula contém os mesmos filtros que a fórmula anterior. Portanto, o círculo indicador de eventos será exibido sob uma data apenas se houver um ou mais eventos na data selecionada e para os quais a disponibilidade não estiver definida como Livre.

Como integrar a tela em um aplicativo

A tela do calendário é um poderoso conjunto de controles por si só, mas geralmente apresenta um desempenho melhor como parte de um aplicativo maior e mais versátil. É possível integrar esta tela a um aplicativo maior de várias maneiras, incluindo a adição destas opções:

Exibir detalhes do evento

Se os usuários selecionarem um evento em CalendarEventsGallery, você poderá abrir outra tela que mostra mais informações sobre esse evento.

Observação

Este procedimento mostra os detalhes do evento em uma galeria com conteúdo dinâmico, mas é possível obter resultados semelhantes usando outras abordagens. Por exemplo, você pode obter mais controle de design usando uma série de rótulos.

  1. Adicione uma tela em branco, chamada EventDetailsScreen, que contém uma galeria em branco de altura flexível e um botão que volte para a tela do calendário.

  2. Na galeria de altura flexível, adicione um controle Rótulo e um controle Texto HTML e defina a propriedade AutoHeight de ambos como verdadeira.

    Observação

    O Power Apps recupera o corpo da mensagem de cada evento como texto HTML. Portanto, é necessário mostrar esse conteúdo em um controle Texto HTML.

  3. Defina a propriedade Y do controle Texto HTML como esta expressão:

    Label1.Y + Label1.Height + 20

  4. Ajuste as propriedades adicionais conforme necessário para atender às suas necessidades de estilo.

    Por exemplo, talvez você queira adicionar uma linha separadora abaixo do controle Texto HTML.

  5. Defina a propriedade Items da galeria de altura flexível como esta fórmula:

    Table(
    { Title: "Subject", Value: _selectedCalendarEvent.Subject },
    { 
        Title: "Time", 
        Value: _selectedCalendarEvent.Start & " - " & _selectedCalendarEvent.End 
    },
    { Title: "Body", Value: _selectedCalendarEvent.Body }
)

    A fórmula cria uma galeria de dados dinâmicos configurados como os valores de campo de _selectedCalendarEvent, que é definido toda vez que o usuário seleciona um evento no controle CalendarEventsGallery. Você pode estender essa galeria para incluir mais campos adicionando mais rótulos a ela, mas esse conjunto fornece um bom ponto de partida.

  6. Com os itens da galeria no lugar, defina a propriedade Text do controle Rótulo como ThisItem.Title e a propriedade HtmlText do controle Texto HTML como ThisItem.Value.

  7. Em CalendarEventsGallery, defina a propriedade OnSelect do controle Título como esta fórmula:

    Set( _selectedCalendarEvent, ThisItem );
Navigate( EventDetailsScreen, None )

    Observação

    Em vez de usar a variável _selectedCalendarEvent, você pode usar CalendarEventsGallery.Selected.

Mostrar participantes do evento

A operação Office365.GetEventsCalendarViewV2 recupera uma variedade de campos de cada evento, incluindo um conjunto de participantes obrigatórios e opcionais separados por ponto e vírgula. Neste procedimento, você analisará cada conjunto de participantes, determinará quais participantes estão em sua organização e recuperará os perfis do Office 365 de quem estiver.

  1. Se o seu aplicativo não contiver o conector de Usuários do Office 365, adicione-o.

  2. Para recuperar os perfis do Office 365 dos participantes da reunião, defina a propriedade OnSelect do controle Título em CalendarEventsGallery como esta fórmula:

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

Esta lista discute o que cada operação ClearCollect faz:

  • ClearCollect(AttendeeEmailsTemp)

    ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ), 
        !IsBlank( Result)
    )
);

    Essa fórmula concatena os participantes obrigatórios e opcionais em uma única cadeia de caracteres e depois divide essa cadeia de caracteres em endereços individuais a cada ponto e vírgula. A fórmula então filtra os valores em branco desse conjunto e adiciona os outros valores a uma coleção chamada AttendeeEmailsTemp.

  • ClearCollect(AttendeeEmails)

    ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len(Result) - Find("@", Result) ) )
    )
);

    Essa fórmula determina aproximadamente se um participante está em sua organização. A definição de _userDomain é simplesmente a URL do domínio no endereço de email da pessoa que está executando o aplicativo. Essa linha cria uma coluna de verdadeiro/falso adicional, chamada InOrg, na coleção AttendeeEmailsTemp. Esta coluna conterá verdadeiro se userDomain for equivalente à URL do domínio do endereço de email nessa linha específica de AttendeeEmailsTemp.

    Essa abordagem nem sempre é precisa, mas é bem próxima. Por exemplo, certos participantes da sua organização podem ter um endereço de email como Jane@OnContoso.com, enquanto o _userDomain é Contoso.com. O usuário do aplicativo e Jane podem trabalhar na mesma empresa, mas apresentam pequenas variações nos endereços de email. Para casos como esses, convém usar esta fórmula:

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

    No entanto, esta fórmula combina endereços de email como Jane@NotTheContosoCompany.com com um _userDomain como Contoso.com, e essas pessoas não trabalham na mesma empresa.

  • ClearCollect(MyPeople)

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

    Recuperar perfis do Office 365, você deve usar a operação Office365Users.UserProfile ou Office365Users.UserProfileV2. Essas operações primeiro reúnem todos os perfis do Office 365 dos participantes que estão na organização do usuário. Em seguida, as operações adicionam alguns campos aos participantes de fora da organização. Você separa esses dois itens em operações distintas porque o loop ForAll não garante a ordem. Portanto, ForAll pode coletar um participante de fora da organização primeiro. Nesse caso, o esquema para MyPeople contém somente DisplayName, Id, JobTitle e UserPrincipalName. No entanto, as operações UserProfile recuperam dados muito mais avançados que isso. Então, você força a coleção MyPeople para adicionar perfis do Office 365 antes de outros perfis.

    Observação

    Você pode obter o mesmo resultado com somente uma função ClearCollect:

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

Para concluir este exercício:

  1. Adicione uma tela que contenha uma galeria para a qual a propriedade Items esteja definida como MyPeople.

  2. Na propriedade OnSelect do controle Título em CalendarEventsGalleryadicione uma função Navigate à tela que você criou na etapa anterior.

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