Ir para o conteúdo

Como criar um menu no Jitterbit App Builder

Menus são a forma principal de permitir que usuários naveguem em suas aplicações. Eles podem fornecer acesso a páginas específicas agrupando e listando-as em um formato fácil de entender e usar. Alguns são configurados automaticamente quando você cria uma aplicação. Outros menus você deve configurar por conta própria. Esta página descreve o processo de criar e configurar um novo menu no App Builder.

Menus padrão

Por padrão, toda nova aplicação possui estes menus:

  • Home Page é o menu de página inicial padrão da aplicação.

  • Application Menu é o menu definido para ser visível na barra de ferramentas da aplicação.

  • Mobile define menus que são visíveis apenas em dispositivos móveis.

Você pode criar seus próprios menus bem como alterar quais são exibidos em sua aplicação.

Criar um menu

Para criar um menu, siga estas etapas:

  1. Selecione App Workbench > UI Layer - Menu. O painel Menus é aberto.

  2. O painel Menus lista os menus que existem atualmente. O painel Menu Diagram ilustra a estrutura do menu selecionado, incluindo qualquer submenu e seus itens.

  3. Clique no botão + Menu no painel Menu.

  4. Digite as seguintes informações:

    create a menu

    1. Name: Um nome para o novo menu. Este é o único campo obrigatório.

    2. Width: Um valor de largura fixa para o novo menu.

    3. Menu Item Themes: Se você usar temas, escolha um aqui para aplicar estilo aos itens do menu.

    4. Source Rule: Escolha uma regra de origem subjacente.

    5. Public: Ative para permitir que o menu seja usado em outra aplicação.

  5. Clique no botão Save. Agora você pode interagir com o painel Menu Items para adicionar itens ao seu menu recém-criado (consulte Adicionar itens de menu para saber mais).

Quando uma nova aplicação é criada, o App Builder configura automaticamente um menu chamado Home Page para ser o menu de página inicial e outro chamado Application Menu para ser exibido no lado direito da barra de ferramentas superior, visível em todas as páginas. Você pode alterar essas configurações de visibilidade, como selecionar seus próprios menus para preencher essas funções, seguindo estas etapas:

  1. Acesse o App Workbench.

  2. Clique na aba App Settings.

  3. No painel App Settings, clique em More > Edge Case.

  4. Escolha a aba Regions - Controls:

    application menu

    1. Em Application Menu, selecione qual menu deve ser visível no lado direito da barra de ferramentas superior. O padrão é o menu com o mesmo nome.

    2. Em Home Page, selecione uma página para ser a página inicial. O padrão é Home.

    3. Em Mobile Menu, selecione qual menu será visto pelos usuários em dispositivos móveis. O padrão é o menu Mobile.

    4. Em System Menu, selecione um menu para ser visível no lado esquerdo da barra de ferramentas superior. Por padrão, não há nenhum.

      Nota

      Na lista suspensa, há uma opção criada pelo sistema chamada System Menu. Quando selecionada, ela exibe ícones com algumas configurações úteis como auditoria, perfil do usuário, idiomas e outros. No entanto, todas essas configurações também estão disponíveis no menu hambúrguer à direita da barra de ferramentas superior.

Adicionar itens de menu

Para adicionar itens a um menu, localize-o acessando App Workbench > UI Layer - Menu e encontrando-o no painel Menus.

Depois de encontrar o menu ao qual deseja adicionar itens, você pode clicar no ícone ou clicar duas vezes em sua linha ou nome no painel Menu Diagram para ver um detalhamento de seus itens.

O painel Menu Items mostrará todos os itens existentes nesse menu. Para adicionar um novo item, clique no botão + Menu Item e a caixa de diálogo Menu Item será aberta, contendo as seguintes abas:

  • Configurações: Nesta aba, os seguintes campos estão disponíveis:

    • Tipos de Controle de Menu: Selecione Item de Menu se estiver adicionando uma opção a um menu ou Menu Aninhado se estiver criando um novo submenu.

    • Menu Pai: Selecione o menu pai do item que está criando.

    • Posição: Digite um número para definir a ordem de exibição deste item.

    • Nome: Digite o nome do novo item.

    • Link para Página: Use o dropdown para selecionar qual página da sua aplicação este item deve vincular.

  • Opções de Link: Nesta aba, o campo Link Externo está disponível. Use-o se quiser que o item vincule a um recurso web externo. A URL inserida deve começar com https:// ou http://.

  • Opções de Exibição: Nesta aba, os seguintes campos estão disponíveis:

    • Rótulo: Defina um rótulo que aparecerá no menu.

    • Rótulo de Dica: Defina o texto da dica que aparecerá quando um usuário passar o mouse sobre o item.

    • Imagem: Use o dropdown para pesquisar e selecionar uma imagem para associar ao item.

    • Ícone: Use o dropdown para pesquisar e selecionar um ícone para associar ao item. Consulte Categorias de ícone para ver os conjuntos de ícones disponíveis.

    • Visibilidade do Rótulo: Selecione se o rótulo deve estar Visível ou Oculto na aplicação.

    • Tema: Se usar temas, escolha um aqui para aplicar estilo ao item.

    • Ativo: Esta caixa de seleção determina se o item será exibido no menu (habilitado por padrão).

Clique em Salvar para confirmar suas configurações e salvar o novo item.