Exemplos de filtros interativos personalizados

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 6 min. de leitura
  • Como administrador, você pode criar widgets de filtro interativos personalizados para fornecer opções de filtragem avançadas nos painéis.

    Caso de uso

    Este exemplo detalha como criar um filtro personalizado para filtrar relatórios na tabela Tarefa ou em suas tabelas secundárias. O filtro mostra somente registros em que o usuário atual é o solicitante. O filtro expõe dois botões para o usuário, um botão para adicionar o filtro e um para remover o filtro.

    Criar um widget de filtro interativo personalizado

    Crie widgets de filtro interativos personalizados para fornecer opções de filtragem avançadas nos painéis.

    Antes de Iniciar

    Função necessária: administrador

    Procedimento

    1. Abra um painel ao qual você deseja adicionar o filtro interativo personalizado.
    2. Clique no ícone adicionar conteúdo ().
    3. Na lista Categoria de widget, selecione Blocos de conteúdo.
      Menu de categoria de widget com Blocos de conteúdo selecionados
    4. Na lista de blocos de conteúdo, selecione Novo conteúdo dinâmico.
    5. No painel Novo conteúdo dinâmico, clique em Adicionar.
      Nova opção de widget de conteúdo dinâmico
      Um novo bloco de conteúdo dinâmico é adicionado ao painel.
    6. No painel, clique no link que diz Clique aqui para configurar este bloco de conteúdo dinâmico reutilizável.
      Nova opção de widget de conteúdo dinâmico
    7. Defina a lógica de filtragem no campo Conteúdo dinâmico.
      Conteúdo dinâmico - Novo registro

    O que Fazer Depois

    Defina a lógica de filtragem.

    Criar uma opção de filtro de data/hora personalizada

    Quando a seleção padrão de opções de filtro de data/hora não atende às suas necessidades, você pode criar uma opção personalizada.

    Antes de Iniciar

    Siga estas etapas para criar uma opção de filtro de data/hora personalizada que pode ser incluída em qualquer filtro interativo baseado em data/hora para uso em um painel. Neste exemplo, você cria uma opção de filtro para o período de duas semanas, uma quinzena.

    Função necessária: administrador

    Procedimento

    1. Navegar até Todos > Definição do Sistema > Regras de negócios.
    2. Abra a regra de negócios Obter opções de filtro de data para filtros de data.
      Esta regra preenche a lista de opções selecionáveis em formulários para filtros interativos de tipo de data novos ou existentes.
    3. Na guia Avançado, modifique o campo Script para incluir o JavaScript necessário para adicionar a nova opção.
      Adicione a seguinte linha:
      answer.add('<Time_Period_Name>@javascript:<Beginning_Time_Period>@javascript:<Ending_Time_Period>', gs.getMessage('<Textual_Representation_Of_Time_Period>'));
    4. Na linha adicionada, faça as seguintes substituições.
      OpçãoDescrição
      <Time_Period_Name> Um nome exclusivo para o período selecionado. Essa cadeia de caracteres é usada internamente pelo sistema para identificar a opção e é definida como algo que pode ser descritivo do período descrito.

      Insira o valor 112_Última quinzena.

      <Beginning_Time_Period> A data e hora específicas em que este filtro é iniciado. Este valor pode usar valores absolutos ou relativos. É muito mais comum usar um valor relativo que usa a sintaxe de URL JavaScript.

      Insira o valor gs.daysAgoStart(14) para indicar que o intervalo de tempo para esta seleção deve ser exatamente duas semanas atrás.

      <Ending_Time_Period> A data e hora específicas em que o período desta opção de filtro deve terminar. Este valor também pode usar valores absolutos ou relativos. Semelhante ao Beginning_Time_Period, este valor geralmente é um período de tempo relativo para usar a sintaxe de URL JavaScript.

      Insira o valor gs.daysAgoStart(0) para indicar que o período termina na data e hora atuais.

      <Textual_Representation_Of_Time_Period> Uma cadeia de caracteres de texto curta que é exibida na lista de opções de filtro de Data/Hora, que aparecem em ordem alfabética crescente.

      Insira Última quinzena, para indicar que esta seleção especifica um período de uma quinzena antes da data e hora atuais.

      A declaração completa agora é:
      answer.add('112_Last Fortnight@javascript:gs.daysAgoStart(14)@javascript:gs.daysAgoEnd(0)', gs.getMessage('Last fortnight'));
    5. Selecione Atualizar para salvar suas mudanças na regra de negócio.
    6. Verifique se a nova opção está disponível ao editar ou criar um filtro de data/hora.
      1. Navegar até Todos > Relatórios > Administração > Filtros interativos.
      2. Selecione um filtro de Data.
        Os filtros disponíveis incluem Última quinzena.
        Opções de filtro de data disponíveis, incluindo a última quinzena
    7. Edite um filtro de data para incluir o novo valor e adicione o filtro a um painel.
      Um filtro de data com a última opção de quinzena disponível

    Definir lógica de filtragem - exemplo

    Depois de criar o filtro interativo, adicione a lógica de filtragem.

    Antes de Iniciar

    Função necessária: administrador

    Os filtros usam a classe DashboardMessageHandler para gerenciar filtros ativos. Instanciar DashboardMessageHandler com um valor exclusivo.
    Nota:
    O ID do filtro interativo personalizado deve ser exclusivo. Se ele tiver o mesmo ID de outro filtro interativo ou filtro interativo personalizado, a lógica de filtragem funcionará corretamente.

    Procedimento

    1. No registro de conteúdo dinâmico, adicione a lógica de filtragem ao bloco XML de conteúdo dinâmico.
    2. O botão Somente minerar publica um filtro nos relatórios da tabela de tarefas usando a consulta codificada caller_idDYNAMIC90d1921e5f510100a9ad2572f2b477fe.
      O botão Todas as tarefas remove o filtro.
    3. Você pode adicionar botões ou outros elementos de interface ao conteúdo dinâmico. Neste exemplo, o código da função claroFilter() e os botões no filtro são adicionados abaixo da função publicarFilter().
      <?xml version="1.0" encoding="utf-8" ?>
      <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
       <script>
           var my_dashboardMessageHandler = new DashboardMessageHandler("my_unique_id");
          
          function publishFilter () {
              var filter_message = {};
              filter_message.id = "my_unique_id";
              filter_message.table = "task";
          
          <!--     Add your own filter query logic here -->
              filter_message.filter = "assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe";
              SNC.canvas.interactiveFilters.setDefaultValue({
                      id: filter_message.id,
                      filters: [filter_message]
                  }, false);
              my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
          }
          
          function clearFilter() {
              var filter_message = {};
              filter_message.id = "my_unique_id";
              filter_message.table = "task";
              filter_message.filter = "";
              SNC.canvas.interactiveFilters.setDefaultValue({
                      id: filter_message.id,
                      filters: [filter_message]
                  }, false);
              my_dashboardMessageHandler.removeFilter();
          }
       </script>   
       
      Example of a filter that generates a static filter on 'task' table reports, or removes it <br/>
          <input id="allTasks" type="button" value="All tasks" onclick="clearFilter();" />
          <input id="onlyMine" type="button" value="Only mine" onclick="publishFilter();" />
          
      </j:jelly>
    4. Selecione Enviar.

    Resultado

    O filtro interativo personalizado aparece no painel ao qual você adicionou o bloco de conteúdo dinâmico. Ele também está na lista de blocos de conteúdo no painel Adicionar widgets.

    Exemplo de filtro interativo personalizado - Vários relatórios

    Você pode usar um filtro interativo personalizado para filtrar vários relatórios usando tabelas diferentes. Existem duas APIs diferentes para publicar um filtro interativo para uma única tabela ou várias tabelas. Este exemplo filtra um relatório nas tabelas de incidentes e problemas por grupo de atribuição usando um filtro interativo personalizado.

    Sobre filtros interativos personalizados em várias tabelas

    Lembre-se do seguinte ao criar um filtro interativo personalizado:
    • Filtros interativos personalizados que se aplicam a apenas uma tabela usam a função DashboardMessageHandler.publishFilter().
    • Filtros interativos personalizados que se aplicam a várias tabelas usam a função DashboardMessageHandler.publishMessage().
    • Antes de publicar, é necessária uma chamada de filtro interativo para a função SNC.canvas.interactiveFilters.setDefaultValue().
    • Uma chamada para a função SNC.canvas.interactiveFilters.removeDefaultValue() ou DashboardMessageHandler.removeFilter() é necessária antes de redefinir o filtro.

    Um filtro interativo personalizado que chama o método publicarFilter() várias vezes atualiza o relatório associado o mesmo número de vezes. Chamadas repetidas para este método podem causar problemas de desempenho.

    Como aplicar o filtro interativo personalizado a várias tabelas

    O exemplo a seguir filtra o relatório por grupo de atribuição nas tabelas Incidente [incidente] e Problema [problema].

    DashboardMessageHandler.publishMessage() aceita vários filtros como uma matriz. Construa a matriz de filtro e crie uma única instância de DashboardMessageHandler que chama DashboardMessageHandler.publishMessage([filters]). Este método atualiza o widget apenas uma vez.

    <?xml version="1.0" encoding="UTF-8"?>
    <j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:g2="null" xmlns:j2="null" trim="false">
       <script>
          var my_dashboardMessageHandler = new DashboardMessageHandler("my_unique_id");
    
    function publishMultipleFilter() {
          <!-- Mutliple filters can be passed as an array -->
          var finalFilter = [{"table":"incident","filter":"assignment_group=6fcd3b573b331300ad3cc9bb34efc447"}, {"table":"problem","filter":"assignment_group=6fcd3b573b331300ad3cc9bb34efc447"}];
          <!-- call setDefaultValue first -->
          SNC.canvas.interactiveFilters.setDefaultValue({
    id: my_dashboardMessageHandler._unique_id,
    filters: finalFilter,
    }, false);
          <!-- then call Publishmessage to publish filters-->
          my_dashboardMessageHandler.publishMessage(finalFilter);
    }
    
    function clearFilter() {
    SNC.canvas.interactiveFilters.removeDefaultValue(my_dashboardMessageHandler._unique_id, false);
    my_dashboardMessageHandler.removeFilter();
    }
       </script>
       
    Example of a filter that filters incident and problem table where the assignment group is Problem solving
       <input id="allTasks" type="button" value="All" onclick="clearFilter();" />
       <input id="onlyMine" type="button" value="Assignment group is [Problem solving]" onclick="publishMultipleFilter();" />
    </j:jelly>