Ir para o conteúdo

Painéis de calendário no Jitterbit App Builder

Visão geral

Painéis de calendário preenchem um calendário com informações de uma fonte de dados, usando três tipos de controle obrigatórios: Descrição, Início do evento e Fim do evento. O controle Descrição designa o que aparece no calendário, normalmente o nome de um evento. Início do evento e Fim do evento designam o dia em que cada evento começa e termina, opcionalmente incluindo timestamps exibidos ao lado da descrição do evento. Como painéis de gráfico, painéis de calendário podem ser vinculados a outro painel para exibir mais detalhes sobre um evento no calendário. Consulte Painéis para a lista completa de tipos de controle do painel de calendário.

Por padrão, um painel de calendário é exibido com base nos dados de sua regra de negócio, respeitando qualquer classificação que a regra aplicar; revise sua regra de negócio para verificar sua classificação. Se a regra de negócio ainda não tiver dados, o calendário mostra o mês, dia ou ano atual. Após adicionar dados, você provavelmente desejará adicionar uma classificação à regra de negócio também — consulte Exibir o mês atual por padrão abaixo.

Por exemplo, a captura de tela a seguir mostra um painel de calendário:

ordercalendar.png

Esta página também aborda as seguintes tarefas:

Exibir o mês atual por padrão

Para garantir que o painel retorne o mês, dia ou ano atual, adicione uma coluna chamada Sort com tipo lógico numérico e aplique uma classificação crescente nessa coluna. Por exemplo, se o objeto de negócio que oferece suporte ao painel de calendário tiver uma coluna chamada StartDate que você gostaria de usar e for uma fonte de dados SQL, você pode usar uma função de escape SQL:

${ABS(DateDiff(day, getdate(), StartDate))}

ou uma instrução IIF do App Builder:

IIF(DateDiff(dd, Now(), StartDate) < 0, (DateDiff(dd, Now(), StartDate))*-1, DateDiff(dd, Now(), StartDate))

Nota

O método de escape SQL é mais eficiente, mas IIF não depende da sintaxe SQL. Ambos produzem saída idêntica.

Para visualizar outros meses, clique nos botões de chevron para frente e para trás no canto superior esquerdo do painel. Para alternar entre as exibições Dia, Semana e Mensal, clique nos botões correspondentes no canto superior direito do painel. Painéis de calendário não podem ser editados diretamente; porém, é possível editar um painel separado que exibe os controles do evento.

Alterar a data e hora de um evento

Para alterar a data e hora de um evento:

  1. Selecione o evento.
  2. No painel que exibe as informações do evento, clique no ícone Lápis.
  3. Ajuste a data e hora conforme necessário e clique no ícone Marca de seleção para salvar.

Adicionar um novo evento ao calendário

Para adicionar um novo evento ao calendário:

  1. Selecione qualquer evento pré-existente e clique no botão Criar.
  2. Insira um título para o evento e selecione uma data no menu suspenso do calendário.
  3. Para controles com hora e data ativadas, clique no ícone Hora para abrir um relógio.
  4. Clique no ícone Marca de seleção para salvar.
  5. Após fazer qualquer revisão no calendário, atualize a página para confirmar a atualização.

Criar um calendário usando o banco de dados Northwinds

Este exemplo adiciona um novo painel de calendário para representar visualmente as datas em que os pedidos são registrados no banco de dados de exemplo Northwinds.

  1. Crie um objeto de negócio para usar com o painel de calendário:

  2. Crie uma nova regra de negócio.

  3. Dê um Nome à regra. Por exemplo: Order (Calendar).
  4. Defina o campo Purpose como Calendar.
  5. Selecione a tabela Order.
  6. Clique em Save.
  7. Na tabela Order, selecione as colunas OrderID e OrderDate.
  8. Clique na aba Where. Adicione a coluna OrderDate ao campo Left, escolha IS NOT NULL como o Operator e deixe o campo Right em branco.

  9. Se desejar, adicione uma coluna que suporte classificação à aba Columns. Por exemplo: DatePart(mm, O.OrderDate).

  10. Crie o calendário:

    1. Acesse App Workbench > Pages.
    2. Nomeie a página como Order Calendar e clique em Create.
    3. Selecione o layout de coluna única e clique em + Add Panel.
    4. Selecione Calendar.
    5. Localize a regra de negócio criada acima e clique em Select.
    6. Clique em Customize Page.
    7. Digite Order Calendar para o Name, selecione Calendar Panel como o Type e selecione Monthly como o Sub Type.

    8. Adicione dois controles com as seguintes configurações:

      Column Name Usage Type
      Control #1: OrderID Order Description
      Control #2: OrderDate Order Date Event Start

    9. Navegue até a visualização do app e confirme que agora você vê o calendário.

Configure os eventos do calendário para vincular a outra página

Para configurar os eventos de um calendário para vincular a outra página:

  1. Na página do calendário do seu app, selecione Action Drawer > Live Designer.
  2. Clique no botão Controls no painel Calendar.
  3. Clique no ícone Open Record do controle a partir do qual deseja vincular.
  4. Em Update and Linking, defina Link To Page como Orders.
  5. Verifique se está vinculado por OrderID nos Criteria.
  6. Navegue até a visualização do aplicativo e confirme a atualização.

Consulte Configure how linked pages open para saber como Link Target e Replace Page In History afetam o comportamento da página vinculada.

Ative o formato de hora em 24 horas

A partir do App Builder 4.60, os painéis de calendário suportam o formato de hora em 24 horas. Por padrão, os horários dos eventos são exibidos no formato de 12 horas. Para mudar para o formato de 24 horas:

  1. Navegue até a página do calendário no seu app e selecione Action Drawer > Live Designer.
  2. Clique no botão Controls no painel de calendário.
  3. Clique na aba Edge Case.
  4. Na seção General, ative a configuração Use 24-Hour Clock.
  5. Navegue até a visualização do aplicativo e confirme a atualização.

Use o controle de cor para alterar a cor dos eventos

Para usar o controle de cor para alterar a cor dos eventos:

  1. Adicione uma nova coluna à regra de negócio do calendário. Por exemplo, digite '#000343' no campo Column or Expression e digite Color no campo Alias.
  2. Navegue até a página do calendário do seu app e selecione Action Drawer > Live Designer.

  3. Adicione um novo controle:

    • Selecione Color para a Column.
    • Nomeie o controle como Color.
    • Selecione Color para o Control Type.

  4. Navegue até a visualização do aplicativo e confirme a atualização.