Ir para o conteúdo

Painéis de calendário no Jitterbit App Builder

ordercalendar.png

Um painel de calendário

Painéis de Calendário preenchem um calendário com informações de uma fonte de dados, utilizando três tipos de controle únicos: Descrição, Início do Evento e Fim do Evento. O controle de Descrição designa o que aparecerá no calendário e, tipicamente, é o nome de um evento. Os controles de Início do Evento e Fim do Evento designam em qual dia o evento aparecerá e podem incluir carimbos de data/hora, que serão exibidos ao lado da descrição do evento. Assim como nos Painéis de Gráfico, os Painéis de Calendário podem ser vinculados a outro Painel para exibir mais detalhes sobre o evento no calendário.

Por padrão, o Painel de Calendário exibirá com base nos dados na Regra de Negócio, respeitando qualquer ordenação aplicada na Regra de Negócio. Revise sua Regra de Negócio para verificar a ordenação.

Se não houver dados na Regra de Negócio, então o mês, dia ou ano atual deve aparecer no Calendário. Assim que os dados forem adicionados, você provavelmente desejará adicionar uma ordenação à Regra de Negócio.

Como exibir o mês atual no calendário

Para garantir que o painel retorne o mês, dia ou ano atual, adicione uma coluna chamada Ordenação com tipo lógico numérico e aplique uma ordenação ascendente nesta coluna. Por exemplo, se seu objeto de negócio que suporta seu 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 declaraçã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 programaticamente, mas IIF não depende da sintaxe SQL. Ambos resultam em uma 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. Alternar entre as visualizações Diária, Semanal e Mensal pode ser feito clicando nos botões correspondentes no canto superior direito do painel. Os painéis de calendário não podem ser editados; no entanto, um painel separado que exibe os controles de evento pode ser editado.

Como mudar a data e hora de um evento

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

Como 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, selecione uma data no menu suspenso do calendário
  3. Para controles com data e hora habilitados, clique no ícone de Hora para abrir um relógio
  4. Clique no Marca de Verificação para salvar
  5. Após qualquer revisão feita no calendário, atualize a página e confirme a(s) atualização(ões)

Como criar um calendário usando o banco de dados northwinds

Neste exemplo, adicionaremos um novo painel de Calendário para representar visualmente a data em que os Pedidos são registrados no Northwinds.

Criar um objeto de negócio para usar com o painel do calendário

  1. Crie uma nova Regra de Negócio
  2. Dê um Nome à regra. Por exemplo: Pedido (Calendário)
  3. Defina o Propósito como Calendário
  4. Direcione para a tabela Pedido
  5. Clique no botão Salvar
  6. Na tabela Pedido, clique para selecionar as colunas OrderID e OrderDate
  7. Clique na aba Onde. Adicione a coluna OrderDate ao campo Esquerdo. Escolha IS NOT NULL como o Operador. Deixe o campo Direito em branco.
  8. Se desejar, adicione uma coluna que suporte Ordenação na aba Colunas. Por exemplo: DatePart(mm, O.OrderDate)

Criar o calendário

  1. Vá para App Workbench > Adicionar uma Página
  2. Nomeie a página como Calendário de Pedidos e clique em Criar
  3. Selecione o layout de coluna única, clique em Adicionar Painel
  4. Selecione o Calendário
  5. Localize a Regra do Calendário e clique em Selecionar
  6. Clique em Personalizar Página
  7. Insira Calendário de Pedidos para o Nome, selecione Painel de Calendário como o Tipo e selecione Mensal como o Subtipo.

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

    Coluna Nome Tipo de Uso
    Controle #1: OrderID Pedido Descrição
    Controle #2: OrderDate Data do Pedido Início do Evento

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

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

  1. Na página do Calendário em seu aplicativo, clique em Action Drawer > Live Designer
  2. Clique no botão Controles no painel do Calendário
  3. Clique no ícone Abrir Registro para o controle de onde vincular
  4. Em Atualização e Vinculação, defina Vincular à Página como Pedidos
  5. Verifique se está vinculado por OrderID nos Critérios
  6. Navegue até a visualização do aplicativo e confirme a atualização

Ativar o formato de hora de 24 horas

Desde o App Builder 4.60, os painéis de calendário suportam um formato de hora de 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 em seu aplicativo e selecione Action Drawer > Live Designer.
  2. Clique no botão Controles no painel do calendário.
  3. Clique na aba Edge Case.
  4. Na seção Geral, ative a configuração Usar Relógio de 24 Horas.
  5. Navegue até a visualização do aplicativo e confirme a atualização.

Use o controle de cor para mudar a cor dos eventos

  1. Adicione uma nova coluna à Regra de Negócio do Calendário. Por exemplo: insira '#000343' no campo Coluna ou Expressão. Insira Cor no campo Alias.
  2. Navegue até a página do Calendário do seu aplicativo e selecione Action Drawer > Live Designer

  3. Adicione um novo Controle.

    • Selecione Cor para a Coluna
    • Nomeie o controle como Cor
    • Selecione Cor para o Tipo de Controle

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