--- title: Manual de Criação e Adição de Menus slug: aura/manual-de-criacao-e-adicao-de-menus docTags: createdAt: 2025-07-07T20:39:55.891Z --- Este documento tem como finalidade servir como um guia prático e objetivo para a criação, configuração e adição de menus :::BlockQuote Esta funcionalidade está disponível apenas para o papel de **Desenvolvedor**. ::: Geralmente, a **URL do Citsmart** instalada no OCI está localizada no repositório GitLab da equipe. Entretanto, em algumas situações, pode não estar disponível. Por isso, antes de cadastrar os menus, certifique-se de ter as seguintes informações: 1 - URL do Citsmart 2 - Perfil de administrador 3 - Valor da senha da engine Caso não possua algum desses **itens obrigatórios**, solicite à equipe de infraestrutura. *** *Este manual está dividido em seções para facilitar a localização das informações. As seções são:* **[Cadastrar e Configurar uma Aplicação](#)** 🔹 Antes de criar menus, você precisa cadastrar e configurar uma aplicação. Se ainda não tem uma, este é o seu primeiro passo. **[Criação dos Menus](docId\:cYLfKEuq2Ys_ofV2-yG3R)** 🔹 Se você já configurou sua aplicação, aqui é ensinado como criar os menus. **[Exportar e Importar Pacotes](docId\:cYLfKEuq2Ys_ofV2-yG3R)** 🔹 Aprenda como exportar e importar pacotes para otimizar a configuração da sua aplicação e agilizar o processo de replicação de menus e dados entre ambientes. **[Menu Antigo/FrontManager Antigo](docId\:cYLfKEuq2Ys_ofV2-yG3R)** 🔹 Em alguns ambientes, o Front Manager pode estar com versões antigas. Essa seção mostra como proceder nesses casos específicos. *** ## Criar uma aplicação 1. No menu lateral, acesse **Administração da Hyper Platform > Aplicações**. ![Menu Aplicações](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/x22Z_cGV5-2TOS0gKxVYe_menusaplicacoes.png) 1. Na aba, selecione a opção **Criar**. ![Criar Nova Aplicações](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/VI1qW5bkb-jK2br_4roUU_menusaplicacoescriar.png) 2. Preencha o formulário - **Nome:** `@hyper/` - **Descrição:** `` - **Situação:** `Ativa` - **Renderizar:** `Legado - Iframe` - **Tipo:** `Gerenciada pela plataforma` - **Ícone:** `Ícone no formato PNG ou SVG` ![Criar Aplicações](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/kwmmWXAVNRmxedmYu9pDt_menusaplicacoesform.png) 1. Novamente no menu lateral, acesse **Administração da Hyper Platform > Versão (das Aplicações)** ![Versões da nova Aplicação](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/SpAhDy7nuZ8o9LfYFWdO4_menusversoes.png) 2. Na página, localize sua aplicação pelo **Nome** e, em seguida, na coluna **Ações**, clique no ícone de edição. ![Versões da nova Aplicação](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/XglSEQ7XKTveVRBBjzaN7_menusversoeseditar.png) 3. Clique em **Adicionar**. ![Versões da nova Aplicação](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/HD308GvZsdO99epASbJxG_menusversoeseditaradicionar.png) 4. Preencha o formulário. :::BlockQuote O modelo a seguir apresenta um exemplo de aplicação criada com base na estrutura padrão utilizada pela equipe **Citsmart Aura**. Para personalizações adicionais, entre em contato com um supervisor ou consulte a documentação oficial da plataforma. ::: Modelo base: Os campos **Maior**, **Menor**, **Correção** e **Revisão** compõem, em conjunto, a versão. Por exemplo: ao inserir os valores 1, 2, 4 e 6, a versão resultante será **1.2.4.6**. O campo Nome da Base corresponde ao segmento que aparece após a URL padrão do Citsmart. Assim, em uma URL fictícia, seria representado como: `http://url-exemplo.citsmart/` Após concluir o preenchimento clique em **"Gravar"**, tanto no formulário quanto na tela de Versão (das Aplicações). ![Versões da nova Aplicação](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/iHs8SM6O3LD-LWqhOPcqZ_menusversoesform.png) ![Versões da nova Aplicação Segunda confirmação](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/mXOUl1Yzbr1LPaZf1NH7M_menusversoesform2.png) 5. Mais uma vez no menu lateral, acesse **Administração da Hyper Platform > Licenças de Aplicações/Versões**. ![Licenças da nova Aplicação](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/kOD8_Zuu4xUZNyYN8S7q2_menuslicencas.png) 6. Clique em **Criar**. ![Licenças da nova Aplicação](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/v_jCnaLi3HQqQQwkmSMB8_menuslicencascriar.png) 7. Preencha o formulário de licença seguindo o modelo abaixo: :::BlockQuote O modelo a seguir apresenta um exemplo de aplicação criada com base na estrutura padrão utilizada pela equipe **Citsmart Aura**. Para personalizações adicionais, entre em contato com um supervisor ou consulte a documentação oficial da plataforma. ::: Após concluir o preenchimento clique em **"Gravar"**. ![Licenças da nova Aplicação](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/oeZ0KfMwg-CyEJf3Py869_menuslicencasform.png) *** ## Criar Menus 1. No menu lateral, acesse **Administração da Hyper Platform > Menu Manutenção de Itens** :::BlockQuote Caso esteja utilizando uma versão antiga do Front Manager, siga esta [seção](docId\:cYLfKEuq2Ys_ofV2-yG3R). ::: ![Manutenção de Itens](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/MFsT7IXKAwZbfByGFEb6F_menusitens.png) 2. Clique em **Criar**. ![Manutenção de Itens](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/1Fk46D-E6GZB0VYrjPPpw_menusitenscriar.png) 3. Preencha o formulário. :::BlockQuote Os exemplos a seguir abrangem a criação de todos os menus utilizados pela equipe Citsmart Aura. Caso sejam necessárias alterações, utilize o modelo como referência, ajustando apenas os campos que deseja personalizar. ::: A imagem a seguir apresenta o formulário que deve ser preenchido para adicionar o menu, utilizando parâmetros de exemplo. Substitua esses parâmetros pelos exemplos indicados logo após a imagem. Ao final de cada modelo, clique no botão **Gravar** e, em seguida, em **Criar** para adicionar o próximo item. ![Manutenção de Itens](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/A3HBavMOurPfxDERoYQRz_menusitensform.png) [Base](#) | [Comportamentos](#) | [Atendimento Humano](#) | [Máquina de Estados](#) | [Widgets](#) | [Atendimentos](#) | [Filas](#) | [Atalhos de Texto](#) | [Atalhos Globais](#) | [Atalhos Privados](#) | [Questionários e Ações](#) | [Ajuda](#) | [Sobre](#) 4. No menu lateral, acesse **Administração da Hyper Platform > Menu (Associar Roles)**. ![Associar Roles de App](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/QzyxW-uNTLjMfAZPJjKKR_menusassociarroles.png) 5. Na coluna **Ações**, clique no ícone para editar no cliente desejado. ![Associar Roles de App](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/cDlyo1YQruR-I77Wc0M1w_menusassociarroleseditar.png) 6. Preencha o formulário usando o modelo abaixo Todos os Itens de Menu do Role devem ser selecionados e associados. Para isso, selecione o item desejado e, em seguida, clique em **Associar**. ![Associar Roles de App](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/-RKAFooruj3Yhyzhsu9Xs_menusassociarrolesform.png) ![Associar Roles de App](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/R2ex57N3nNP0TTlFD7Miz_menusassociarrolescomport.png) ![Associar Roles de App](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/MlvUUiP4MBM97YXIRhwPJ_menusassociarrolesatend.png) ![Associar Roles de App](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/Zi3-ULX17lLmoI1xLqmhR_menusassociarroleswand.png) ![Associar Roles de App](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/3hQJ-xgf_BeFlbGpFTofS_menusassociarroleswidgets.png) Após associar todos os itens, clique em **Gravar**. 7. Por fim, no menu lateral, acesse **Administração da Hyper Platform > Menu (Associar Versão de App)**. ![Associar Versão de App](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/9VEO1lodecwIn0tY6BCsT_menusassociar.png) 8. Dentro da página, pesquise por **aura** e na coluna **Ações**, clique no ícone para editar. ![Associar Versão de App](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/gGgvxP2q6rpFn4Gqk9AqE_menusassociareditar.png) 9. Marque a versão e o item de menu desejado e clique em **“Associar”**. Caso seja necessário associar outros itens, repita o procedimento. ![Associar Versão de App](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/abmIlghThh_tEPZHSxM-i_menusassociaritens.png) Após concluir, clique no botão **“Gravar”** para salvar as alterações. *** ## Importar e Exportar pacotes [Exportar](docId\:cYLfKEuq2Ys_ofV2-yG3R) | [Importar](docId\:cYLfKEuq2Ys_ofV2-yG3R) ### Exportar 1. Em um ambiente **Citsmart** já configurado, acesse o menu lateral: **Lowcode > Pacote**. ![Menu de Pacotes](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/q3-kXOM0eLnvHNHVcoL6l_menupacote.png) 1. Localize o pacote que deseja exportar (geralmente o mais recente ou uma versão estável) e clique no botão **“Exportar”**. ![Exportar pacote](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/qmwD1afUcZ7rAD9tGkh45_exportexample.png) :::BlockQuote Um pacote compactado (`.zip`) será baixado e poderá ser utilizado em importações futuras. ::: *** ### Importar 1. No ambiente **Citsmart** em que deseja realizar a importação, acesse o menu lateral: **Lowcode > Pacote**. ![Menu de Pacotes](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/q3-kXOM0eLnvHNHVcoL6l_menupacote.png) 1. Clique no botão **“Importar”**. ![Botão Importar](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/CyeeAuKBIYKSS25vZbDk0_menuimportbutton.png) 1. Selecione o arquivo `.json` e clique em **Importar**. :::BlockQuote Para obter o arquivo `.json` de uma exportação, é necessário extrair o conteúdo do arquivo `.zip`. Em sistemas Windows, clique com o botão direito sobre o arquivo compactado e selecione a opção **“Extrair tudo...”**. Após a extração, localize o arquivo `.json` dentro da pasta descompactada. Este arquivo é o que deve ser utilizado no processo de importação. ::: ![Importar JSON](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/8avdb3Rh0hyIbhT8B96dO_menusimportjsonexample.png) 1. Após selecionar o arquivo, confirme a importação acessando: **menu lateral > menu da sua aplicação**. :::BlockQuote **Atenção:** verifique se todos os menus estão funcionando corretamente e se apontam para os locais desejados. ::: ![Verificar menu](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/cvSR42xhAMsZlxSxvJ7T1_menusok.png) *** ## Menu Antigo :::BlockQuote Em alguns clientes, o Front Manager pode estar com versões desatualizadas. Esta seção abrange esses casos. ::: 1. No menu lateral, acesse **Low Code>Gerenciamento>Formulário** ![Menu de Itens](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/4eg47O5YcfXz0l9Mww9vy_formulariofrontmanagerantigo.png) 1. Na barra de pesquisa, procure pelo item desejado e clique no ícone de editar. :::BlockQuote Normalmente, os itens de versões antigas começam com o prefixo "Hyper". ::: ![Pesquisa por hyper](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/BNfgzAh2hzI10ubDf_uxj_pesquisahyper.png) 1. Dentro da página, selecione Testar Página e escolha a versão que deseja testar. :::BlockQuote Sempre que possível, utilize a opção de formulário padrão. Caso ela não esteja disponível, teste com a página de CRUD. ::: ![Testar pagina](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/LTwj7YCsXWKvauL3XjCLx_testarpagina.png) *** **Link Rápido** **[Criação dos Menus](docId\:cYLfKEuq2Ys_ofV2-yG3R)**