Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Comentário: DI-2772

Função

O componente Menu Dinâmico é usado para navegar nas páginas do seu projeto, com ele você pode organizar as páginas para que possa ter acesso. Como mostrado na Figura 1, ele é usado na barra de navegação do seu projeto.

Image RemovedFigura 1 - Exemplo do componente rodando no browser

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.


Image Added

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).


Image Added

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.

Âncora
menuConfiguracao
menuConfiguracao

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


Image RemovedImage Added

Figura 1.1 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. O nível

  • Nível 0 (
Principal
  • principal): é o corpo do menu.
Após isso, vem o(s) menu(s) da barra que se encontram no nível 1, e por fim, vem o(s) item(ns) desse(s) menu(s), que se encontram no último nível, nível 2.
  • 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
titleDica

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.


Image Added

Figura 2.1

Podemos ter um item no nível 1, mas se criarmos um item logo abaixo dele (nível 2), ele virará automaticamente um menu.

Após o nível 2 não é possível adicionar mais itens, ou seja, os itens do nível 2 não podem ter subitens. No entanto, não existe limites para criação de menu e itens na barra de navegação.

Image Removed

Figura 2.2 - Níveis de profundidade dos menus

menu ou

Para criar um menu ou item de nível 1, selecione selecione Principal (nível 0) e clique em em + (Adicionar item), informe um nome na janela que será exibida e clique em em OK. (Figura 2.32)

Image Removed

Figura 2.3 - Processo para criação de menu/item nível 1

Para adicionar um item de nível 2, faça o mesmo procedimento informado acima, porém, ao invés de selecionar Principal, selecione o menu onde deseja criar o item de nível 2 e clique em + (Adicionar item). (Figura 2.4)

Image Removed

. Clique e arraste o item criado para reordená-lo.


Dica

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.


Image Added

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

menu ou

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

ATENÇÃO
Nota
titleAtenção

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


Image Added

Figura 2.3 - Removendo item

Opções

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.

Informações

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


Image RemovedImage Added

Figura 2.5 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.

Âncora
dragDropRecursos
dragDropRecursos

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.


Image Added 

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

Nome em inglês
Dynamic Menu


Nesta página

Índice


Compatibilidade

  • Formulário web

Equivalente mobile

Não possui.


Botão do Componente

Image RemovedImage Added


Imagem no Editor VisualImage Removed

Image Added


Assista sobre o tema no Cronapp Academy

Informações

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