Tutorial: Menu Árvore

Neste tutorial mostramos como criaro um Menu Árvore. Este menu organiza os seus itens verticalmente em formato árvore com itens pais e filhos. Veja no exemplo abaixo:

Criando um Menu

1. Crie uma nova aplicação do tipo Menu Árvore.

Criando os itens do menu

2. Para criar os itens que farão parte do menu, no menu de aplicação clique no item “Itens do Menu”.

No menu que iremos criar existe uma hierarquia, de forma que teremos itens e subitens. Inicialmente vamos inserir os itens principais do menu.

3. Para criar itens você tem duas opções, clicar no botão “+” ou no botão importar aplicações. Assim pode inserir todos os itens desejados e depois organizá-los.

No exemplo estamos usando variáveis de linguagem para obter um sistema em vários idiomas. Saiba mais sobre nossa ferramenta de dicionário de dados. Pode também adicionar o nome dos labels manualmente no campo “texto”.

Criando os Sub-itens no menu

4. Para criarmos subitens é necessário estar com o item marcado e depois clicar na seta “>” para definir a hiérarquia em níveis.

5. No quadro abaixo informamos quais itens e subitens foram utilizados para a criação deste exemplo. Também informamos o nome das aplicações chamadas em casa item, todas as aplicações existem dentro do nosso projeto de exemplo “Samples”.

Item (Label)Aplicação
Formulário
– Mestre/detalheform38
– Múltiplos registrosform40
– Grid Editávelform39
– Validação de Chave Únicaform44
– Pedidosform53
Consulta
– Agrupamento – Cliente x Estadosgrid05
– Resumo Matrizgrid29
– Submenu
— Drill Down Simplesgrid14
— Clientesgrid20
Relatórios
– Invoicepdf03
– Cartão visitaspdf02

6. Depois de criado o menu, iremos adicionar um último item com o target sair para que sirva para o usuário deixar o menu ou sair do sistema.

É possível configurar também hint e ícones (com suporte a biblioteca de ícones do Font Awesome).

7. Após finalizar as configurações, nosso menu está pronto para visualização e testes, clique na opção do menu principal do Scriptcase “Executar Aplicação”.

Compartilhe este tutorial

Tutoriais na mesma categoria

Menu com Font Awesome

Para que os itens em um menu tenham ícones da nova funcionalidade e design Font-Awesome, faça o s...

Abas com dashboards

Neste exemplo veremos uma aplicação de Abas exibindo várias Dashboards. Aplicações ...

Aplicação aba com consulta e gráfico

Neste exemplo veremos uma aplicação do tipo aba, onde nela será possível abrir na mesma página...

Menu com Abas

Neste exemplo veremos como configurar para que o menu abra as aplicações em abas. Criando ...

Comente este post