Create a Table with Columns and Buttons

1. Navigate to HSYCO Manager

2. Click on "Project Editor"

3. Click on "New Project"

4. Name it (tabletimelights for example)

5. Click here to access the home page

6. Click on "add"

7. Click on "Table" to add a table to the current page of the project

8. Go back to "edit" mode

9. Click on "not set..." under the "Columns" tab to add some columns to the table

10. Here we can add a column, an edit button, a delete button and other useful objects

11. We will create a 5-column table containing: a Name that can easily distinguish a light, a Status (On/Off), a Light Up Time representing the number of Hours a light has been On, a hidden datapoint field that stores the datapoint of the light and a button to turn On and Off that light

12. Click "add"

13. We'll start by adding a "Column"

14. Click on the "Label" input field under the "Column Header" to give it a name. This will be the Header of the Column

15. Type "Name"

16. Now we'll make this text required by changing the "Required" field from "auto" to "true". In this way the user has to obligatory input this value

18. Click on "add"

19. Select "Column"

20. Change the "Label" by tiping "Status"

21. Make this field not required by changing the "Required" field to "false" as we will set a default value later on

23. Click on "Default value" and type "Off". This will automatically set this value to "Off" every time we insert a new row in our table

25. Now we'll set the "Disable Field" to "both" as we don't want the user to be able to modify this value neither in view nor edit mode.

27. Click on "add" and then "Column"

28. Change the "Label" to "Light Up Time (Hours)"

29. As we did before, make this value not required by changing the "Required" field to "false"

31. Now set the "Default Value" to "0:00"

32. Again, disable this field in "both" view and edit modes

34. Now we'll create a column that will be invisible in viewmode but will contain the link to the datapoint of the light so that we can use it to turn it on and off later

35. Click on "add" and add a "Column"

36. Change the "Label" to "Datapoint"

37. Make this filed required setting it to "true"

39. Now go deep in the setting to find the "Hidden" field and set this to "viewmode". By doing so, the column will be invisible in viewmode but visible in editmode

41. Click "add" and add a "Column"

42. Change the "Label" to "On/Off"

43. Now change the "Type" of the column from "text" to "button"

44. Click the "Width" field and type 200 to give the button a bigger appareance

45. Now we'll set the command that the button will send when pressed. Change the "Action" to command

46. Type a "Command name" like "tabletimelights.light"

47. Now we'll set the icon that will be on the button to give it a better appareance. Click on the little button on the left of the "Button Icon" field

48. Click the "Filter" field and type light

49. Select an image

50. Click "ok"

51. Click "add"

52. Click on "add" and add an "Edit Button"

53. Do the same with the "Delete Button"

54. Click "ok" to save the actual configuration

55. Now we'll set some options to our table

56. Change the ID to "tabletimelightsdata"

57. As you can see, the "Command Name" field, if empty, is the same as the ID. This is the command that the table will launch when we add a row

58. Click the "Edit Mode" field and change that to "toggle". By doing this the add button and the confirm button show up on the right hand-side of the table

59. Click "Save"