Função

O componente Menu Dinâmico permite gerenciar menus e seus itens, adicionando ações específicas para cada elemento, como abrir um novo formulário ou executar um bloco de programação. O Menu Dinâmico é um subcomponente da Barra de navegação (web) e, nesse contexto, é utilizado para facilitar o acesso as outras páginas da aplicação.


Figura 1 - Exemplo do componente rodando no browser


O componente Menu Dinâmico é responsivo, ou seja, em telas pequenas ele muda o seu formato para um menu vertical, melhorando a usabilidade para o usuário (Figura 1.1).


Figura 1.1 - Menu Dinâmico responsivo

Principais propriedades

Propriedades

Na tabela abaixo estão descritas as principais propriedades do componente.

NomePropriedadeFunção
IdentificadoridAtributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
ConfiguraçãooptionsAbre a janela de configuração do Menu Dinâmico.
Valor alternativocontentValor alternativo do componente.
Classes CSSclass

Adiciona classes CSS que já foram criadas.

Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Menu Dinâmico.

NomePropriedadeFunção

Geral

General

Estiliza o item principal do componente.

Item aberto

Open item

Estiliza o Item principal que está aberto no componente.

Subitem

Subitem

Estiliza o Subitem do componente.

Plano de fundo do Subitem

Subitem Background

Estiliza o plano de fundo do Subitem do componente.

Ao arrastar o componente para a área de edição aparecerá a janela Opções de Menu, configure-a seguindo os passos abaixo. Você também poderá acessá-la pela aba de Propriedades, que aparece do lado direito da tela ao selecionar o componente, clicando no botão "..." no campo Configurações (Figura 2).


Figura 2 - Configuração do Componente Menu Dinâmico


  1. Adicionar novo item ou menu;

  2. Excluir o item ou menu selecionado;

  3. Área que exibe a árvore hierárquica para seleção dos itens e menus;

  4. Propriedades do menu ou item selecionado.

O Menu Dinâmico pode ser definido em níveis quando se encontra no modo de configuração.

  • Nível 0 (principal): é o corpo do menu. Todos os itens ou menus serão criados dentro dele;
  • Nível 1: é um item (ou menu) que se encontra dentro do menu de nível 0;
  • Nível 2: é um item (ou menu) que se encontra dentro de menus dos níveis 1 e assim por diante até o nível 9. 


Dica

Nas configurações do Menu dinâmico é possível criar itens com até 10 níveis de hierarquia. Apesar da possibilidade, não é recomendado o uso de tantos níveis, pois deixa o sistema com uma usabilidade ruim.


Figura 2.1 - Níveis de profundidade dos menus

Para criar um item de nível 1, selecione Principal (nível 0) e clique em + (Adicionar item), informe um nome na janela que será exibida e clique em OK (Figura 2.2). Clique e arraste o item criado para reordená-lo.


Também é possível adicionar elementos ao menu arrastando itens da árvore de arquivos, veja mais detalhes no tópico Drag and Drop da árvore de arquivos.


Figura 2.2 - Processo para criação de item nível 1

Para excluir um item ou menu, selecione-o na árvore hierárquica e clique no botão Remover. Finalize clicando em OK na janela de confirmação (Figura 2.3).

Atenção

Ao excluir um item, todos os seus subitens serão excluídos.


Figura 2.3 - Removendo item

A tabela abaixo exibe a função de cada uma das propriedades da janela de opções

Nome

Função

Nome

Identifica o item ou menu da árvore hierárquica.

Título

Rótulo que será exibido no menu ou item.

Ícone

Ícone que será exibido no lado direito do rótulo.

Oculto

Permite ocultar o menu ou item da barra de navegação através de uma expressão ou bloco de programação.

Ação

Define alguma ação a ser tomada no clique.

*Não é necessário adicionar nenhuma ação para expandir os itens nos menus.

Segurança

Define os grupos de acesso que poderão visualizar e acessar os itens ou menus.

Para saber mais sobre a segurança no Cronapp, acesse a documentação Permissão de Segurança.


Figura 2.4 - Opções das propriedades


  1. Abre a janela para tradução dos rótulos do item ou menu selecionado;

  2. Exibe o ícone selecionado para o menu ou item;

  3. Abre a janela de configuração da propriedade selecionada;

  4. Limpa o campo da propriedade selecionada.

Drag and Drop da árvore de arquivos

Outra forma de adicionar item ao Menu dinâmico é a partir do recurso de Drag and Drop (arrastar e soltar). Selecione um formulário e solte-o na área de edição, em cima do componente Menu dinâmico (Figura 3). O menu de contexto Criar Componente será aberto, selecione a opção Formulário > (+) (destaque 1) para adicionar o item arrastado no nível 1 (no mesmo nível que "Home" e "Admin") ou navegue entre os menus de contextos para adicionar o item em outro local, por exemplo, Formulário > Home > (+) (destaque 2) e o item arrastado será de nível 2, dentro de "Home".

Esse recurso irá funcionar independentemente da configuração do Modo Avançado.


 

Figura 3 - Adicionando um item ao menu através do Drag and Drop

Nome em inglês
Dynamic Menu


Nesta página


Compatibilidade

  • Formulário web

Equivalente mobile

Não possui.


Botão do Componente



Imagem no Editor Visual


Assista sobre o tema no Cronapp Academy

Caso seja seu primeiro acesso ao Cronapp Academy, crie antes uma conta gratuita e matricule-se no curso abaixo.