DEVELOPING PROJECT SCREENS

Binding Data to the Display Screen

Within the scope of this learning content, we will perform data binding operations for the idea detail screen that we have prepared in the Display screen type in Bir Fikrim Var mobile application. By defining a parameter with Screen Input on the idea detail screen, we will perform the necessary data binding operations to list ideas and comments, and we will also update the Navigate actions on the Dashboard and idea listing screens with this parameter.

Within the scope of this learning content, we will perform data binding operations for the idea detail screen that we have prepared in the Display screen type in the I Have an Idea mobile application.

When we examine the screen, there is a table structure that lists the information about the idea as well as the comments made to the idea.

Let's do data binding to this screen together.

Open the idea detail screen.

First, it is necessary to define a Screen Input on the screen.

Define a Screen Input named IdeaDetail and of Guid type.
Now add the actions that will enable the listing of ideas and comments as Initial Action to the screen.
Select Symbol Picker>ScreenInput>IdeaDetail for the ID fields opened in both actions.
Now perform the data binding operations for all the elements on the screen by selecting the elements one by one.
We will examine the likes, comments, and other supporting information that ideas have in detail in the Builder 2 course.
With the Details tab open in the Tab element, select the text representing the Idea title.
In the Properties panel Value field, select the IdeaTitle value returned as a result of the SelectIdeaDetail action.
Select the text representing the idea description. Again from the value field, select the IdeaDescription value returned as a result of the SelectIdeaDetail action.

Now let's provide the data connection for comments.

Open the Comments tab.
Select the Table element via Item Tree.
In the Properties panel of the Table element, select the action that will list the Comments in the Datasource field.
Then select the Label representing the name in the Table.
In the Properties panel of Label, select the FullName value via Field to Display in the Value field.
Do this one by one for the date and comment description in the table.

To access the Idea detail screen, we added Navigate action to the column in GalleryView on the Dashboard screen and Idea list screen in previous content. Now that there is a Screen Input on the Detail screen, a Screen Input Parameter has appeared under the Navigate action. Let's define this parameter.

Open the Dashboard screen. Select the column in GalleryView that we have given the Navigate action.
Expand the Navigate action in the Properties panel.
Select Symbol Picker>Current>Id to define the Screen Input parameter.
After providing your data connections on the idea listing screen, you can do the same on that screen.

Thus, we have performed data binding operations on the idea detail screen. Perform data binding operations on the idea detail screen in the Web application by following these steps.

When we examine the screen, there is a table structure that lists the information about the idea as well as the comments made to the idea.

Let's do data binding to this screen together.

Open the idea detail screen.

First, it is necessary to define a Screen Input on the screen.

Define a Screen Input named IdeaDetail and of Guid type.
Now add the actions that will enable the listing of ideas and comments as Initial Action to the screen.
Select Symbol Picker>ScreenInput>IdeaDetail for the ID fields opened in both actions.
Now perform the data binding operations for all the elements on the screen by selecting the elements one by one.
We will examine the likes, comments, and other supporting information that ideas have in detail in the Builder 2 course.
With the Details tab open in the Tab element, select the text representing the Idea title.
In the Properties panel Value field, select the IdeaTitle value returned as a result of the SelectIdeaDetail action.
Select the text representing the idea description. Again from the value field, select the IdeaDescription value returned as a result of the SelectIdeaDetail action.

Now let's provide the data connection for comments.

Open the Comments tab.
Select the Table element via Item Tree.
In the Properties panel of the Table element, select the action that will list the Comments in the Datasource field.
Then select the Label representing the name in the Table.
In the Properties panel of Label, select the FullName value via Field to Display in the Value field.
Do this one by one for the date and comment description in the table.

Open the Dashboard screen. Select the column in GalleryView that we have given the Navigate action.
Expand the Navigate action in the Properties panel.
Select Symbol Picker>Current>Id to define the Screen Input parameter.
After providing your data connections on the idea listing screen, you can do the same on that screen.

Thus, we have performed data binding operations on the idea detail screen. Perform data binding operations on the idea detail screen in the Web application by following these steps.