How to interact with your database using your application

In this video, you will learn how to add or remove table entries in your Centrldesk application.

In this example, we will show you how to provide functions behind buttons and how your application interacts with the database. So let's start building our application:

Steps:

1. We have already created a table with three columns and we have also already createt a database table with sample data.
2. First we go to the page editor by clicking on the Edit Page button in the upper right menu.
3. The Page Editor opens.
4. Drag and drop a button element under general to the middle of the page editor.
5. Select the button.
6. Change the Style to "Raised".
7. Change the Text to "Add entry".
8. Change the icon.
9. In this example we choose a "plus" icon.
10. Change the color to green.
11. Drag and drop a button element under general to the middle of the page editor.
12. Select the button.
13. Change the Style to "Raised".
14. Change the Text to "Remove selected entry".
15. Change the icon.
16. In this example we choose a "cross" icon.
17. Change the color to red.
18. Select the "Add entry" button.
19. On the right side, under Actions, click Add on click.
20. The flow editor opens.
21. Drag and drop the page element under App Components to the middle of the flow editor.
22. The Use page dialog opens.
23. Select New Page.
24. Enter a name.
25. In this example we enter "Add new Employee".
26. At "Bind data to page" we select the Employees table of our database.
27. Confirm with ok.
28. Because we want to show our new page as a dialog later, we add our page as "Show Dialog" and remove the "Navigate" block.
29. In Centrldesk you always have the option of displaying pages as entire pages or as dialogs.
30. Select the "Show Dialog Add new Employee" block.
31. Click on Edit Page.
32. The Page Editor opens.
33. Add a Text Input to the page.
34. Select the text input.
35. Change the Label to "First Name".
36. Change the "Object Property Binding" to the corresponding table entry.
37. Add a Text Input to the page.
38. Select the text input.
39. Change the Label to "Last Name".
40. Change the "Object Property Binding" to the corresponding table entry.
41. Add a Text Input to the page.
42. Select the text input.
43. Change the Label to "Position".
44. Change the "Object Property Binding" to the corresponding table entry.
45. Add a Button to the page.
46. Change the text to "Add entry".
47. Change the icon.
48. In this example we choose a "plus" icon.
49. Change the color to green.
50. On the right side, under Actions, click Add on click.
51. The Flow editor opens.
52. Drag and drop the Database element under App Components to the middle of the flow editor.
53. Select Save row of Employees.
54. Confirm with ok.
55. Drag and drop the Page Control element under Scope to the middle of the flow editor.
56. Select Submit Dialog.
57. Confirm with ok.
58. Connect the output of the save row of employees block to the input of the submit dialog block.
59. Select the save row of employees block.
60. On the right side, select custom under row to save.
61. The Logic editor opens.
62. Drag and drop the first name element under Scope to the middle of the Logic editor.
63. Drag and drop the last name element under Scope to the middle of the Logic editor.
64. Drag and drop the position name element under Scope to the middle of the Logic editor.
65. Drag and drop the Workspace Object element under Libraries to the middle of the Logic editor.
66. The Workspace object dialog opens.
67. Select Create Employee.
68. Confirm with ok.
69. Drag and drop the Data Row element under Libraries to the middle of the Logic editor.
70. The Data Row dialog opens.
71. Select Create Data Row.
72. Confirm with ok.
73. Select Data Row als Data Row Type.
74. Select Employees als table.
75. Confirm with ok.
76. Now the outputs of the blocks must be connected to the corresponding inputs of the blocks.
77. The preview values help the user to connect the database values to the table columns.
78. Close the Logic editor by clicking close in the upper right corner.
79. Close the Flow editor by clicking close in the upper right corner.
80. Close the Page Editor by clicking close in the upper left corner.
81. Drag and drop the Page Control element under Scope to the middle of the flow editor.
82. Select Refresh Table.
83. Confirm with ok.
84. Connect the submit output of the Show Dialog Add new Employee block to the input of the Refresh table block.
85. Select the Refresh Table block.
86. On the right side, select the table to refresh.
87. Close the Flow editor by clicking close in the upper right corner.
88. Close the Page Editor by clicking close in the upper left corner.
89. Now we can start using our application.
90. Click Add Entry.
91. Our dialog with the required inputs is displayed.
92. Enter values for First Name, Last Name, and Position.
93. Click on the Add Entry.
94. Our new entry has been successfully written to the database table and our view in the user interface has updated.
95. Now we are able to store values.
96. Next we need a remove function.
97. Go to the page editor by clicking on the Edit Page button in the upper right menu.
98. The Page Editor opens.
99. Select the "Remove selected entry" button.
100. On the right side, under Actions, click Add on click.
101. The flow editor opens.
102. Drag and drop the Interaction element under Libraries to the middle of the flow editor.
103. The Interaction dialog opens.
104. Select Confirm.
105. Confirm with ok.
106. On the right side under header select "Enter Value".
107. Enter "Confirmation required" as value.
108. On the right side under message select "Enter Value".
109. As value enter "Remove selected row?".
110. Confirm dialogs are very useful, for example to add a short confirmation prompt to delete functions.
111. Drag and drop the Database element under App Components to the middle of the flow editor.
112. The Use Database dialog opens.
113. Select Delete row of Employees.
114. Confirm with ok.
115. Connect the output of the confirm block to the input of the Delete row of employees block.
116. Select the Delete Row of Employees block.
117. On the right side under Row to delete select "Custom".
118. The Logic Editor opens.
119. Drag and drop the table element under scope in the middle of the logic editor.
120. Connect the get selection output of the table block to the input of the row to delete block.
121. Close the Logic editor by clicking close in the upper right corner.
122. Drag and drop the Page control element under Scope to the middle of the flow editor.
123. The Page Control dialog opens.
124. Select Refresh table.
125. Confirm with ok.
126. Connect the output of the delete row of employees block to the input of the Refresh table block.
127. Select the Refresh Table block.
128. On the right side, select the table to refresh.
129. Close the Flow editor by clicking close in the upper right corner.
130. Close the Page Editor by clicking close in the upper left corner.
131. Now we can start using our application.
132. Select a row whose entry you want to delete.
133. Click Remvoe selected Entry.
134. Our confirm dialog is displayed.
135. Confirm the dialog by clicking OK.
136. The entry was successfully deleted from the database. The table of our graphical user interface has updated and shows the correct data.