Tutorial: Formulário com Responsividade Mobile


Neste tutorial, será criado um Formulário com responsividade Mobile utilizando a tabela de exemplo “orders” e os seguintes recursos adicionais:

  • Blocos.
  • Comandos SQL.

Criando um Formulário com Responsividade Mobile

Nota

Caso tenha alguma dúvida de como criar um Formulário, acesse: Criando um novo Formulário



1. Crie uma nova aplicação do tipo Formulário, selecione a opção “Único Registro” e em seguida selecione a tabela de exemplo “orders”.


2. Feito isso, caso deseje uma melhor exibição do formulário, selecione a aba “Editor de Campos” e edite a Label dos campos, como mostra a imagem abaixo.

Editando os campos do Formulário com Responsividade Mobile


1. Primeiro, no menu da aplicação, acesse a aba “Layout” e selecione a opção “Blocos”.


2. Agora, renomeie o bloco já existente para “Pedidos” e o configure de acordo com a imagem abaixo.


3. Ainda nas configurações dos blocos, clique no botão “Criar Novo Bloco” e crie um novo bloco denominado “Localização”, assim como mostra a imagem.


4. Após criado, configure o bloco de acordo com a imagem abaixo.


5. Feito isso, no menu da aplicação, acesse a aba “Posicionamento dos Campos”.


6. Agora, mova os campos: “orderid” e “requireddate” para a caixa da esquerda, conforme é mostrado abaixo.


7. Em seguida, organize os campos restantes em seus respectivos blocos, assim como mostra a imagem abaixo


8. Feito isso, no menu da aplicação, acesse a aba “Campos” e selecione o campo “customerid”.


9. Na sessão de “Configuração Geral”, desative a opção “Usar Select2”.


10. Em seguida, navegue até a sessão “Lookup de Edição” e substitua o comando presente na caixa de texto pelo Comando SQL abaixo, como mostra a imagem:

SELECT customerid, companyname 
FROM customers 
ORDER BY companyname


11. Agora, selecione o campo “employeeid”.


12. Na sessão de “Configuração Geral”, altere o “Tipo de Dado” para “Número Auto-Complete” e desative a opção “Usar Select2”.


13. Em seguida, navegue até a sessão “Lookup de Edição” e substitua o comando presente na caixa de texto pelo Comando SQL abaixo, como mostra a imagem:

SELECT employeeid, sc_concat(firstname,' ', lastname) 
FROM employees 
ORDER BY firstname, lastname


14. Agora, selecione o campo “priceorder”.


15. Navegue até a sessão “Formatação de Valores” e ative a opção “Uso de símbolo monetário”.


16. Agora, selecione o campo “shipcountry”.


17. Na sessão “Configuração Geral”, altere o “Tipo de Dado” para “Select”, defina o “Valor Inicial (tipo)” para “Valor Definido” e digite “US” na aba “Valor Inicial”.


18. Em seguida, navegue até a sessão “Lookup de Edição” e cole o Comando SQL abaixo na caixa de texto, como mostra a imagem:

SELECT iso, printable_name 
FROM country 
ORDER BY printable_name


19. Agora, selecione o campo “shipregion”.


20. Na sessão de “Configuração Geral”, altere o “Tipo de Dado” para “Select”.


21. Em seguida, navegue até a sessão “Lookup de Edição” e cole o Comando SQL abaixo na caixa de texto, como mostra a imagem:

SELECT regionid, regiondescription 
FROM region 
ORDER BY regiondescription


22. Agora, selecione o campo “shipstate”.


23. Na sessão “Configuração Geral”, altere o “Tipo de Dado” para “Select”.


24. Em seguida, navegue até a sessão “Lookup de Edição” e cole o Comando SQL abaixo na caixa de texto, como mostra a imagem.

SELECT stateid, statename 
FROM states 
ORDER BY statename


25. Agora, selecione o campo “shipcity”.


26. Na sessão “Configuração Geral”, altere o “Tipo de Dado” para “Select”.


27. Em seguida, navegue até a sessão “Lookup de Edição” e cole o Comando SQL abaixo na caixa de texto, como mostra a imagem.

SELECT cityid, cityname 
FROM city 
WHERE stateid = '{shipstate}'
ORDER BY cityname


28. Agora, selecione o campo “shipvia”.


29. Na sessão “Configuração Geral”, altere o “Tipo de Dado” para “Radio”.


30. Em seguida, navegue até a sessão “Lookup de Edição” e cole o Comando SQL abaixo na caixa de texto, como mostra a imagem:

SELECT shipperid, companyname 
FROM shippers 
ORDER BY companyname


31. Feito isso, selecione o campo “freight”.


32. Navegue até a sessão “Formatação de Valores” e ative a opção “Uso de símbolo monetário”.


33. Finalmente, selecione o botão “Executar Aplicação” na barra de ferramentas para gerar o Formulário.


Após seguir os passos acima, o Formulário ficará desta forma:

Nota:

Para acessar o Formulário no formato abaixo, utilize um Dispositivo Mobile.


Para ver mais exemplos criados usando o Scriptcase, acesse: Exemplos: Sistemas Completos e Aplicações com Scriptcase.

Compartilhe este tutorial

Tutoriais na mesma categoria

Nova opção de Marca d’água

Nova opção para exibir a marca d'água do campo de data dentro do input, disponível para Formul...

Gerenciamento de Arquivos na Nuvem

Alguns dos serviços de armazenamento de dados estão prontos para ler e armazenar com segurança ...

Formulário com label fixo

Esta opção pode ser selecionada nas formas do tipo Registro Múltiplo , Grid Editável e Visualiz...

Formulário de Contato

Neste tutorial, veremos uma aplicação do tipo Formulário de Controle customizado, onde teremos e...

Comente este post