Button Submit Action

1. Navigate to HSYCO Manager

2. Create a new project or open an existing one

3. Go to Home page

4. Click "add"

5. Add a "Button"

6. Click "edit"

7. Because this will be the submit button, we can align it to the bottom and also centering it horizontally

8. Change the "Label" to "Submit Values"

9. Change the "Action" to "submit"

Tip: Now we'll add the two text fields and the date field to be submitted

10. Click "add"

11. Add a "Field" under the "Form" tab

12. Click "edit"

13. Align it to the top and also centered horizontally

14. Change the "Name" attribute to "name". This will be the name of the attribute that will be passed when we press the submit button

15. Change the "Placeholder" to "Name"

16. Click "add"

17. Add another "Field"

18. Go back to "edit" mode

19. Align it under the other text field

20. Change the "Name" to "surname"

21. Change the "Placeholder" to "Surname"

22. Click "add"

23. Add a "Date" object

24. Click "edit"

25. Align it under the two fields

26. Change the "Name" to "date"

27. Click "add"

28. Add a "Text" area

29. Click "edit"

30. Change the "ID" to "textarea"

31. Move the text area to the right of the form and resize it

32. Leave the "Text" attribute blank as it will be modified dynamically

33. the page should look like this:

34. Click "Save" to save the project

Tip: Now we'll download from GitHub a small piece of code that captures the command launched from the submit button and shows the different fields in the text area

35. Navigate to https://github.com/hsyco/hsyco4-examples

36. Click "Code"

37. Click "Download ZIP"

38. Now extract the .zip file and navigate into the /button/submitAction folder to find the submit.txt file

39. Go into the "File Manager"

40. Navigate into the "events" folder

41. Click "Upload Files"

42. Select the submit.txt file previously extracted and press "Upload"

43. The file has been uploaded

44. The function userSubmit is called when a submit button is pressed. Here, we retrieve all the values from the different form objects and, for every one of them, we add the name of the attribute and its value to a string. This string is then displayed through a uiSet() in the "text" attribute of the object with ID "textarea"

Tip: Done! Now we can try to submit some values and see them in the text area

45. Click "Run" and then "Default" to launch the application

46. Fill the "Name" field

47. Fill also the "Surname" field

48. Select a date

49. Press "Submit Values"

50. As you can see, the values has been sent and captured by the code that displayed them in the text area

51. We can also check in the "Log Viewer" if the command has been sent

52. As you can see, the command has been sent. All the fields are separated by a '@' and the structure is : AttributeName@Value. The "_8" near the Web User Commands indicated the object that launched the command. In our case, because we didn't defined an ID for the submit button, it automatically selected "_8". If we had given the button an ID, we would see that instead of the "_8"