Create 2 Datasource tables

1. Navigate to HSYCO Manager

2. Click on "Project Editor"

3. Click "New Project"

4. Give it a name ("todolistdatasource2tables" for example) and click "Create"

5. Go on the home page

6. Click "add"

7. Add a "Table"

8. You can resize it by dragging the left corner around the page

9. Go back to "edit" mode

10. Change the "Edit Mode" of the table to "true"

11. Change the "Data Mode" to "datasource"

12. Change also the "Datasource ID" to "db_todolist1", which is our first database

13. Click "Auto Config Columns". This will auto config the column based on current Datasource

14. Click "Yes"

15. As you can see, we have our four attributes from the database already in the table

16. Change the "Hidden" field of the ID to "true". This field is auto generated so we don't have to add it manually

17. Click on "date"

18. Change the "Field Type" to "date"

19. Change the "Format" to "date"

20. Change the "Label" to "YYYY/MM/DD"

21. Now click on "time"

22. Change the "Field Type" to "time"

23. Change the "Format" to "time"

24. Change the "Label" to "HH:MM:SS"

25. Now click on "info"

26. Change the "Label" to "To Do"

27. Click on "items"

28. Change the "Type" to "button"

29. Check the "Dynamic" checkbox. If this is set to true, the cell value can change the columns attribute dynamically

30. Set the "Widht" to 40 to give the button a better appearance

31. Change its "Action" to "command"

32. Change the "Command Name" to "showtodolist2". If you change this name, remember to change it also in the code, as explained later

33. Click on "Add"

34. Add the "Edit Button"

35. Click "Add"

36. Add the "Delete Button"

37. Click on "ok" to save changes

Tip: Now we will add another page with the second table

38. Click "Add Page"

39. Add a "Page (landscape)"

40. Click "add"

41. Add a "Table"

42. Resize it

43. Go back to "edit" mode

44. Change the "Edit Mode" to "true"

45. Change the "Datamode" to "datasource"

46. Change also the "Datasource ID" to "db_todolist2"

47. Click "Auto Config Columns"

48. Confirm by clicking "Yes"

49. Click "3 Items..." under the "Columns" tab to modify the table's columns

50. Change the "Hidden" field of the "id" to "true". This value is autogenerated like in the other table so we need to hide it

51. Select the field "id_nested"

52. Tick the "DataSource" option. This means that the cell's value is taken from the linked datasource's column specified in the "Label Data Name"

53. Change the "DataSource ID" to "db_todolist1", so that the value is taken from the first database (linked to the first table)

54. Change the "Label Data Name" to "info". "info" is the name of the attribute specified in the database and is, in the other table, the last column where there is the text area

55. Change the "Label" to "To Do (Nested)"

56. Select the "info" field

57. Change the "Label" to "Activity"

58. Click "Add"

59. Click "Edit Button"

60. Click on "Add"

61. Click "Delete Button"

62. Click "Ok"

63. Click "add"

64. Add a "Button"

65. Move the button under the table. You can also use "Align" to align it horizontally or vertically

66. Click "edit"

67. Change the "Label" to "Home Page"

68. Change the "Action" to "link". This button is linked to the home page to navigate between these two pages

69. Change the "Link" to "home"

70. Now go back to "home" page and select it

71. Click "add"

72. Add a "Button"

73. Move this button, like the previous one, under the table and align it.

74. Go back to "edit" mode

75. Change the "Label" to "Page 2"

76. Change the "Action" to "link"

77. Change the "Link" to "page2", which is the standard name of the second page

78. Click "add"

79. Add another "Button"

Tip: This button will be used to clear all the records in the two tables

80. Align the button (like in the lower right corner) and go back to "edit" view

81. Change the "Label" to "Clear DB"

82. Click this icon to change the icon of the button

83. Click the "Filter" field and search for "delete"

84. Select an icon and confirm by clicking "ok"

85. Change the "Action" to "command". When pressed, this button will send a command that we will capture in our code to delete all records in the databases

86. Set the "Name" to "cleardb"

87. Set also the "Parameter" to "cleardb"

88. Click "Save" to save the project