Barra de Filtros
1. Geral
A Barra de Filtros permite que os usuários criem, editem e apliquem filtros em suas telas. A configuração da Barra de Filtros é flexível, permitindo personalizar a aparência e o comportamento dos filtros.
2. Como Configurar
Acessar a Configuração de Tela no Page Builder: Ao selecionar a opção para criar ou editar uma barra de filtros, você será direcionado para a tela de configuração de filtros.
Selecionar Cadastros: Na tela de configuração, você verá uma coluna com todos os cadastros disponíveis que podem ser incluídos no filtro. Marque os checkboxes dos cadastros desejados e aperte no botão azul para movê-los para a coluna de "Dimensões Escolhidas", que representam os parâmetros que aparecerão como seletores na barra.
Configurar Barra de Filtros:
Cor Primária: Define a cor de fundo do ícone exibido na tela do Page Builder e a cor dos ícones de calendário.
Cor Secundária: Define a cor do símbolo que aparece na barra no Page Builder.
Botão de Aplicar Seleção: Ative esta opção para que a seleção feita na barra de filtros só atualize a tela ao clicar no botão de aplicar.
Esperar Seleção para Mostrar Componentes: Habilite esta opção para que os componentes só sejam exibidos após uma seleção ser feita.
![](https://framerusercontent.com/images/vU14I8SM4Ru974Vt0oZzbvxFgeU.webp)
3. Exemplo de Uso
Vamos demonstrar um exemplo de utilização da Barra de Filtros para filtrar dados de metas e vendas por data e vendedor.
3.1. Passo a Passo
Configuração Inicial: Acesse o Page Builder e vá em “Configurações”. Selecione uma barra de filtro e crie uma nova, dando um nome como "Filtro do Exemplo".
Selecionar Cadastros: Na tela de configuração de filtros, adicione os cadastros "Calendário" e "Vendedor" à coluna de "Dimensões Escolhidas".
Configurar Aparência:
Defina a Cor Primária para um tom de roxo (#6a1b9a) e a Cor Secundária para cinza (#bdbdbd).
Ative a opção "Botão de Aplicar Seleção" para que a aplicação do filtro dependa do clique no botão.
Deixe a opção "Esperar Seleção para Mostrar Componentes" desativada para que os componentes sejam exibidos imediatamente.
Aplicar Filtros: Ao selecionar uma data inicial e final e um vendedor, clique no botão de aplicar seleção para filtrar os dados exibidos na tela.