How to bind tables to a database

In this video, you will learn how to bind tables to a database in Centrldesk.

Tables are important elements in graphical user interfaces to show data clearly in a structure and context. In this example, we connect a table to a database table to display its contents. So let's start building our application:

Steps:

1. We have already created a table with three columns.
2. First we go to the page editor by clicking on the Edit Page buttonin the upper right menu.
3. The Page Editor opens.
4. Before we start we must first create a database and a database table, which we want to bind to our table in the graphical user interface.
5. Select the green icon for Database on the left side.
6. Click on new database.
7. The Create App Component Database dialog opens.
8. Enter a name for the database and confirm by clicking Create.
9. Click on new table.
10. The table configuration dialog opens.
11. Enter a name for the table.
12. For the Type, select Object.
13. Under Object Type select the entry "Create Type".
14. The Edit Object Type  dialog opens.
15. Enter a name.
16. Click on "Add Property" to add a property.
17. Enter "First Name" as the name.
18. Select the value "Text" for Type.
19. Click on "Add Property" to add a property.
20. Enter "Last Name" as the name.
21. Select the value "Text" for Type.
22. Click on "Add Property" to add a property.
23. Enter "Position" as the name.
24. Select the value "Text" for Type.
25. Confirm your entries by clicking Save.
26. Confirm your entries again by clicking Save.
27. Click on New row top right.
28. The Edit new Row dialog opens.
29. Now enter sample data for First Name, Last Name and Position so that we can see an entry in the table in the graphical user interface in our example.
30. Confirm your entries by clicking Save.
31. Now we have created a database with a table.
32. On the left side, click the purple icon for Pages.
33. Click on the "Home" page to return to your graphical user interface.
34. Select the table.
35. On the right side under Data we select the value Flow for Data Source.
36. For Row Data Type we select the value Data Row.
37. At Table we select the table we have created.
38. Now we click on Data Provider.
39. The flow editor opens.
40. Drag and drop the database element under app components in the middle of the flow editor.
41. The Use Database dialog opens.
42. Select the entry Get All rows and confirm with ok.
43. Drag and drop the Logic element under general in the middle of the flow editor.
44. Connect the output of the Get All Rows block to the input of the Logic block.
45. Select the logic block.
46. Click on edit.
47. The Logic Editor opens.
48. Drag and drop the Rows of table element under data from previous blocks in the middle of the logic editor.
49. Drag and drop the Set Data rows element under scope in the middle of the logic editor.
50. Connect the output of the Rows of table block to the input of the Set Data rows block.
51. Close the Logic editor by clicking close in the upper right corner.
52. Close the flow editor by clicking close in the upper right corner.
53. Now we click on Data to Row Mapping.
54. The Logic Editor opens.
55. Drag and drop the data row element under scope in the middle of the logic editor.
56. Drag and drop the Data Row element under Libraries in the middle of the logic editor.
57. The data row dialog opens.
58. Select Split Data Row and confirm with ok.
59. Drag and drop the Workspace Object element under Libraries in the middle of the logic editor.
60. The Workspace Object  dialog opens.
61. Select Split Employee and confirm with ok.
62. Drag and drop the First Name element under scope in the middle of the logic editor.
63. Drag and drop the Last Name element under scope in the middle of the logic editor.
64. Drag and drop the Position element under scope in the middle of the logic editor.
65. Now the outputs of the blocks must be connected to the corresponding inputs of the blocks.
66. The preview values help the user to connect the database values to the table columns.
67. Close the Logic editor by clicking close in the upper right corner.
68. Close the Page Editor by clicking close in the upper left corner.
69. Now we can see our table with the related entries from the database in our application.