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.