Ocultar e Mostrar um GroupBox no Formulário

[daniel.oriques]

Tenho a necessidade de Ocultar/Mostrar um GroupBox assim como os itens.

A ideia é criar processos que não fiquem sempre visível ao usuário, sendo mostrado quando necessário.

[daniel.giacomelli]

Olá @daniel.oriques

Vou mostrar como implementar este comportamento usando JavaScript.

Formulário

A seguir, será apresentada a estrutura do Formulário Dinâmico que será usado neste exemplo.

Campos

O Formulário terá os seguintes campos:

• btnFiltros - Botão que exibe os filtros.

• btnFiltrar - Botão que aplica e esconde os filtros.

Além desses dois botões, teremos um GroupBox cujo o título é “Filtros”. Dentro deste GroupBox ficarão os campos de filtros, que não serão abordados neste exemplo.

JavaScript

Adicione o seguinte código na sessão de Arquivos JavaScript do Formulário:

var filtros = (function () {
   
    // Essa função localiza o elemento do GroupBox a partir do titulo (name)
    function getGroupBoxElement(name) {
       
        var divs = document.querySelectorAll('.DynamicForm div.groupBox');
        for (var i = 0; i < divs.length; i++) {
            var div = divs[i];
            var legend = div.getElementsByClassName('legend')[0];
            if (legend) {
                var label = legend.getElementsByTagName('label')[0];
                if (label && label.innerHTML == name) {
                    return div;
                }
            }
        }
    }
    
    return {

        // Mostra os filtros
        mostrar: function(name) {
            var div = getGroupBoxElement(name);
            if (div) div.style.display = '';
        },

        // Esconde os filtros
        ocultar: function(name) {
            var div = getGroupBoxElement(name);
            if (div) div.style.display = 'none';
        }
    }
})();

O código a cima declara um objeto chamado “filtros” com duas funções: “mostrar” e “ocultar”. Ambas recebem por parâmetro o titulo do GroupBox que queremos mostrar ou ocultar.

Procedimentos

Agora falta apenas fazer a chamada das funções para mostrar e ocultar os filtros.

Teremos os seguintes procedimentos:

• btnFiltros_Click - Procedimento vinculado ao evento “Click” do botão “btnFiltro”. Vamos adicionar nele uma ação do tipo Executar Código JavaScript para chamar o código que mostra os filtros:

  filtros.mostrar('Filtros');
  

• btnFiltrar_Click - Procedimento vinculado ao evento “Click” do botão “btnFiltrar”. Vamos adicionar nele uma ação do tipo Executar Código JavaScript para chamar o código que oculta os filtros:

  filtros.ocultar('Filtros');
  

Cor de fundo

Para dar o toque final, vamos adicionar um código CSS para garantir o preenchimento da cor de fundo da GroupBox, já que em alguns temas ela não possui cor alguma, e caso ela esteja sobrepondo outro campo, vai ficar transparente.

Adicione o código a seguir na sessão de Arquivos CSS do Formulário:

.DynamicForm .fieldPage, .DynamicForm .groupBox {
    background-color: inherit;    
}

[daniel.oriques]

Top!! Obrigado Daniel.