Component Data Binding

Databinding is the process of displaying the data calculated by various actions through components in the interface. Let's take a personnel registration and update screen as an example.

In this screen, the data of the personnel for the update process is bound to the components on the screen through a SQL action, and the data contained in the SQL is displayed in these components. In this learning content, we will examine Databinding to Simple Components in Form Screens, Databinding to SelectBox elements in Form Screens, and Databinding in List Screens.

To perform this operation, the Value property in the Properties panel of the elements is used. The Symbol Picker in the Value property shows the different variables previously added to the related interface in groups.
These groups include; results of previously executed actions Action Results, variables passed to the interface as parameters Screen Input, fixed data Fixed Value, system variables Default, and so on.

Continuing with the example of adding a new personnel screen, let's assume that we are going to update the information of a personnel or create a new personnel. First, we need to define a Screen Input of Guid type called PersonnelPrm. This Screen Input is the key value of the personnel to be displayed in the interface. We need to run an Initial Action to access all the data of the relevant personnel. Let's create a SQL action named SelectPersonnelById for this Initial Action.

1. Let's open the Custom Action Panel. In this panel, let's create and name a new Select Action.
2. Select the Personnel table by clicking the + icon in the Choose Source field.
3. Click on the link icon next to the Personnel table and select the Department table related to the Personnel table from the screen that opens.
4. In the Field tab, in addition to the fields that come by default, add the ID column in the Personnel table and name it PersonnelID in the Alias field.
5. Then add FullName, PersonnelImage, Status, and Title fields and finally add the Id field in the Department table.
6. Let's name it DepartmentID in the Alias field. On the Filter tab, select the Personnel table and the ID field in the table.
7. Leave the default Is Equal To selection selected.
   In the field on the right, select Symbol Picker SQL Parameter and type Id in the relevant field.
8. Save the action by clicking the Create button.
9. Now click on the Add Action button on the relevant screen and add the SelectPersonnelById action as Initial Action. Let's define the Id parameter as Screen Input via Symbol Picker.
10. Now, in the Value property in the Properties panel of each element on the screen where the personnel information will be listed, bind each value from the SelectPersonnelById action in the Action Result to the relevant fields using Symbol Picker.
11. To select from multiple departments with SelectBox, we need to pull the data of all departments.
12. First, open the Custom Action panel and add a SQL action. In the editor that opens, find the Department table and open it via the detail menu (three dots), select the select action.
13. Save the action. Return to the screen and add the DepartmentAll action as Initial Action.
14. Now select SelectBox, select the related action from the Options field in the Properties panel.
15. Select Department Name in Field to Display field and ID in Field to Use as Key field.
16. In the Value field, bind the department result of the SelectPersonnelById action.
17. Then perform data binding operations for other elements.

Then, let's perform the Data Bind operations of the elements on the user, that is, the personnel list screen, where we created the Page Init event setup in the previous learning content.

18. In-Page Init content, open the screen where we added the Initial action.
19. Select the table on the screen and select the SelectPersonnel action in the Datasources field in the Properties Panel of the table.
20. Then select each element in the table one by one and select the relevant data to be displayed from the Field to Display drop-down menu in the Properties Panel Value field.
21. To show the status of the users in the table with different colored icons, first select the green icon.
22. Select Sometimes Visible in the Visibility field under the Properties panel. Then select Status under the Current category via Symbol Picker.
23. Select is equal to via SelectBox and leave the Switch on.
24. Now select the red icon.
25. Select Sometimes Visible in the Properties panel Visibility field.
26. Then select Status under the Current category via Symbol Picker.
27. After selecting Status, select is not equal to via SelectBox and leave the Switch on.

We will link the total number of ideas suggested by the users in the table in the Builder 2 course.

In this scenario, we linked data to an existing list screen design with a Page Init action added. If your screen design is not ready and you are following a data-first approach, you can quickly get a data-linked table design when you add the action you created first as an Initial Action and drag and drop it from the Action List panel to the screen.

In similar need situations, you can create the relevant action and provide Data Binding operations.