Create a DataSource Table

1. Navigate to HSYCO Manager

2. Click on "Project Editor"

3. Click "New Project"

4. Give it a name ("todolistdatasource" for example)

5. Click on "Create"

6. Navigate to the homepage

7. Click "add"

8. Add a "Table"

9. You can scale back the table if you want by dragging one of the corners

10. Go back to "edit" mode

11. Now change the "Data Mode" from "uiset" to "datasource". This changes the way the table's data is populated.

12. Change also the "DataSource ID" to "db_todolist". This name is specified in the file under the /events folder inside the plugin folder

13. Click "Auto Config Columns" This, like the name suggests, populates the table's column with the data inside of the database

14. Click "Yes"

15. As you can see, the table columns are automatically populated

16. Select the "id" column and change the "hidden" field to "true". The "id" field is auto generated by the database so we don't need to insert it or to see it in viewmode

17. Now select the "date" column

18. Change the "Format" to "date"

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

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

21. Select "time"

22. Change the "Format" to "time"

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

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

25. Click the "Info" field.

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

27. Click "ok" to save changes

28. Now go into the attributes of the table and change the "edit mode" to "true"

29. Click "4 Items..." to add the "edit" and "delete" button to the table

30. Click "Add"

31. Click "Edit Button"

32. Click "Add"

33. Click "Delete Button"

34. Confirm by clicking "ok"

35. The table object should look like this

Tip: Now we will add a button under the table to clear all the content in the table within a click!

36. Click "add"

37. Click "Button"

38. Move the button in the lower-side of the page, under the table

39. You can also align by clicking "Align"

40. "Center Horizontally" to align horizontally

41. Go to "edit" mode

42. Change the "Label" to "Clear Table"

43. Click this icon to change the icon

44. Click the "Filter" field and search for "cancel"

45. Select an icon and press "ok"

46. Change the "Action" to "command"

47. Change the "Name" to "cleardb"

48. Lastly, change the "parameter" to "clear"

Tip: By changing the name and the parameter of the command, we can intercept it in our code and execute some action, like a query to the database to clear all the records

49. The page should now look like this

50. Save the project by clicking "Save"