Binding Data to the Dashboard Screen

In this learning content, we will perform data binding operations on the Dashboard screen of I Have an Idea Web application using the actions we created in previous learning contents.

When we examine the screen to perform data binding operations, we can interpret that we need to add the action that pulls the logged-in personnel information as Initial Action and provide a data connection to the relevant fields in order to display the information of the logged-in user every time the screen is opened.

Then, for the card structure that shows the total number of ideas in the application and the total number of ideas of the logged-in user every time the screen is opened, it is necessary to add two different actions as Initial actions that pull the number of ideas and provide a data connection to the number fields that we have previously given a fixed value.

Finally, in the area where the last ideas are listed, we need to add the action we have created to show the last added idea list every time the screen is opened as an Initial Action to the screen and then we need to perform data binding operations for the relevant fields on the screen.

1. First, open the Dashboard screen we prepared for the I Have an Idea web application.
2. With the screen selected, click Add Action in the Properties panel.
3. In the menu that opens, click Initial Action, and under the Custom category, first add the action we created to use in the Header.
4. Then follow the same steps and add the Total number of ideas, user number of ideas, and idea listing actions to the screen as Initial actions.

With these actions, we have managed to pull the data we want to use every time the screen is opened from the data source. Now let's do the data binding operations for which data will be displayed in which element.

5. Select the Image element in the Header that shows the image of the logged-in personnel.
6. Click Symbol Picker in the Value field in the Properties Panel.
7. In Action Results, select the Personnel Image in the action from which we pulled Personnel information.
8. Now do the same for the other fields, FullName and Title, and link the related action results. If you want, you can add placeholder text for the related fields.

Let's do the data binding for the number of ideas in the cards.

9. Select the Label where the total number of all ideas is written, in the Properties panel, in the Value field, and bind the number returned as a result of the total idea action via Symbol Picker.
10. Performing similar steps, select the Label with the total number of ideas of the logged in user and bind the number returned as a result of the User number of ideas action via Symbol Picker in the Value field.

With these operations, we have performed the data binding operations in the Header and card structure.

Now let's continue with the Gallery View structure where the recently added ideas are listed.

11. Select the GalleryView element from the Item Tree.
12. In the Datasource field in the Properties panel of Gallery View, select the action you created for listing the recently added ideas and added to the screen as Initial Action.
13. Then select the Staff image in the GalleryView to bind data to the staff image that created the idea.
14. In the Properties panel, select PersonnelImage under Field to Display in Value field.
15. Do the same for all other elements in the GalleryView one by one.
16. We will examine the likes, comments, and other supporting information that ideas have in detail in the Builder 2 course.

After performing data binding operations for all elements, your Dashboard screen is ready to use.

By performing similar operations, you can prepare the idea list screen in the Web application and the Dashboard screen in the Mobile application.