Este exemplo mostra um formulário de avaliação utilizando os campos de Assinatura Digital, Classificação e Slider


Criando um Formulário de Controle.
Nota:Caso tenha alguma dúvida de como criar um Formulário de Controle, acesse: Criando uma nova Aplicação de Controle.
1. Crie uma nova Aplicação do tipo Controle.

2. Feito isso, no menu da aplicação, acessa a aba de Campos selecione a opção Novo Campo , para criar os campos que farão parte do Formulário de Controle.


3. Ao acessar a opção, digite “5” na quantidade de Campos e clique em “Prosseguir”.


4. Agora, crie os Campos da Aplicação de controle de acordo com a imagem abaixo:


Campo Assinatura Digital
Este tipo de campo permite que o usuário escreva usando uma caneta ou mouse digital.

5. Acesse as configurações do campo “signature” e altere os parâmetros de Largura e Altura de acordo com a imagem .


Campo Rating
Este tipo de campo permite que o usuário realize avaliações/ranqueamentos utilizando ícones, geralmente de estrelas, em linha.

6. Acesse as configurações do campo “rating” e em seguida, devemos informar a “Quantidade de ícones“, e quais imagens serão utilizadas para representar o “Ícone habilitado” e “Ícone desabilitado“. Vamos definir, também, um valor inicial.


Campo Slider
Este tipo de campo é uma funcionalidade para os campos Numéricos

7. Acesse as configurações do campo “slider” e habilite a funcionalidade “Usar Slider“. Aplique uma “Largura” e “Incremento do slider” .


8. Ainda na edição do campo, vá em Formatação dos Valores e defina um
“Valor Mínimo” e “Valor Máximo” para o campo.


Campo Texto
9. No campo fullname altere a Quantidade de Caracteres para 50. E em Formatação de Valores, aumente o Tamanho Máximo para 100.



Campo Label
10. O campo blank do tipo Label, serpa utilizado apenas para ocupar um espaço no formulário.


Configurando o Layout
11. Acesse as configurações de Blocos


12. Vamos criar um novo bloco chamado signature, e configurar os dois blocos de acordo com a imagem.


13. Acesse o menu Posicionamento dos campos.


14. Coloque o campo Signature dentro do bloco com mesmo nome.


15. Voltando nas configurações iniciais do formulário, altere a largura para 500 pixels.


16. Em seguida, devemos salvar e executar a aplicação.
Comente este post