Formulário
É através do formulário que o usuário interage com a aplicação. Ele é criado combinando componentes “drag and drop” de interface de usuário, recursos CSS e código JavaScript e AngularJS.
- Cada formulário pode conter uma ou mais páginas e cada uma possui código HTML, um controlador AngularJS e uma coleção de dependências;
- O layout da tela é comum a todas as páginas de formulário e é construído arrastando e soltando componentes da interface do usuário;
- O layout da tela, desenhado na guia Desenho da tela, contém uma coleção de linhas, em que cada linha pode ter um ou mais componentes da interface do usuário;
- Páginas previamente configuradas no sistema:
- Página de CRUD – Página configurada automaticamente pelo sistema, durante a criação do Objeto de Negócios, que fornece a funcionalidade CRUD (criar, ler, atualizar e excluir) ao Objeto de Negócios;
- Página padrão – Página usada para fornecer dados do usuário durante a criação de uma solicitação de serviço do Workflow e ESM;
- Página de processo – Página usada para iniciar um Processo de Negócios do Low Code;
- Página de tarefa – Página que renderiza um formulário do Low Code na tela de ticket de um workflow do Workflow e ESM;
- Página de relatório – Página para integração do formulário com os relatórios gerados pelo sistema, incluindo dependências específicas para a execução de um relatório JASPER.
Antes de começar
É necessário ter criado um projeto Low Code
Passo a passo
Acesse a funcionalidade pelo menu de navegação Low Code > Gerenciamento > Formulário;
Clique em "Criar";
Complete os campos disponíveis na aba "Identificação":
- Nome do Projeto Low Code a qual o formulário pertence
- Nome do formulário
- Descrição do formulário
- Pasta onde as configurações do formulário serão armazenadas
- Regra de negócio de validação, se necessário
- Selecione a caixa Exibe no Centro de Experiência caso deseje que o formulário seja exibido no centro de experiência.
✏️ Nota: No sistema interno da empresa há a página Centro de Experiência. É intranet da empresa, uma página central onde se publicam notícias e informações relevantes. Marcando esta opção, este formulário será exibido dentro do Centro de Experiência.
⚠️ Atenção! A versão é incrementada automaticamente pelo sistema sempre que uma nova versão do formulário é criada.
Adicionar Página ao formulário
Os tipos de páginas que você pode adicionar, vai depender do tipo de projeto que você está desenvolvendo. Se for um cadastro a página de CRUD deve ser adicionada. Se for um formulário customizado as páginas de form padrão e de tarefa devem ser adicionados. Se for um relatório ou filtros, a mesma lógica se aplica.
Guias do formulário
Identificação
Dados gerais do formulário.
Objetos de Negócio
Local onde estão declarados os Objetos de Negócios.
Código Compartilhado
Local onde é inserido as linhas de códigos que são utilizadas por todas as páginas de forma comum e onde é possível incluir dependências que são trechos de códigos customizados (CSS e JavaScript)
Desenho de tela
Local onde são inseridos os componentes e objetos relativos aos desenhos da tela do formulário com inputs, selects, grids, botões, checkbox, options, html customizado, entre outros. para mais informações veja Desenho de Tela.
JS para teste
Local para execução de teste de um trecho de código JavaScript.
Páginas do formulário
Exibição das páginas de CRUD, Padrão, Tarefa e Relatório que fazem parte do projeto e possuem um tipo de utilização específico, dependendo do objetivo do projeto como visto anteriormente.
Neste exemplo temos as guias de configuração dos elementos de uma página de CRUD.
As abas disponibilizadas para as páginas de CRUD, form Padrão, tarefa, relatórios e filtros terão sempre a mesma estrutura: URL, Propriedades, Ações, HTML, Controller e Dependências.
URL do menu: Endereço para chamada do tipo do formulário;
Propriedades: dados gerais do repositório;
Ações: Selecionamos o Objeto de Negócios e ações que queremos no formulário:
- Restore do objeto no carregamento da página;
- Gravar dados antes do submit da página;
- Gravar dados após o submit da página.
HTML: estrutura de página HTML;
Controller: código do controlador referente ao formulário. Os códigos inseridos aqui só serão executados nesta página;
Dependências: Se o formulário precisar de código externo, esse código deverá ser registrado como uma dependência. O nome da dependência, caminho em que está localizada e se deve ser injetada no controlador também deve ser informado.
Desenhando uma tela. Para criar o design da tela, clique em "Editar" ou navegue até a guia do sistema Desenho da Tela, que se abre automaticamente.
Arraste os componentes localizados na paleta do lado esquerdo e solte-os no centro da tela. Os componentes são organizados em linhas e colunas, cada linha tendo uma largura de 12 colunas, seguindo o padrão bootstrap.
Você pode criar Abas (guias) para os formulários. Para fazer isso, vá para o menu da guia e escolha as guias na organização horizontal ou vertical. Arraste e solte componentes nas guias, conforme explicado acima.
