In this learning content, I Have an Idea! Web application, we will perform the data binding operations of the SQL action we created for the Idea List screen.
As we will remember, we have created the relevant condition structures in the SQL action for the filtering fields on the screen. In line with the fiction we have created, we will need to provide action connections for the Text Inputs and SelectBoxes on the screen that allow filtering.
Let's start if we are ready!
- First, open the Idea List screen that we prepared for I have an idea web application.
- With the screen selected, click Add Action in the Properties panel.
- In the menu that opens, click Initial Action and under the Custom category, first add the action we created to use in the Header.
- Then add the action we previously created to list the data in the Selectbox for Idea Category selection on the add idea screen.
- Finally, add the Initial action that we created with the SQL action, which has a filtering structure.
- Now let's do the data binding operations for which data will be shown in which element.
- Select the Image element in the Header.
- In the Value field in the Properties Panel, select the Personnel Image in the action from which we pulled the Personnel information returned as Action Results via Symbol Picker.
- Now do the same for the other fields, FullName and Title, and bind the related action results.
Let's continue with the other elements on the screen.
- Select the SelectBox element that will list the categories.
- In Properties panel, under Options, select the action you created to list the categories as an action.
- Then select CategoryName in Field to Display field and ID in Field to use as Key field.
Now let's define the parameters of the action that we added to the screen as Initial action and will list the ideas depending on the filtering.
- For the IdeaTitle parameter, select the Textinput representing Title under Components via Symbol Picker.
- For IdeaCategory select Symbol Picker>Components>SelectBox1.
- For the IdeaUser parameter, select the Textinput representing the user search under Components via Symbol Picker.
- In the filtering setup, add this action to the onChange Event of the input elements to update the list depending on the changes in the inputs on the screen and provide parameter definitions.
Let's bind data to the GalleryView where the ideas will be listed.
- Select the GalleryView element via Item Tree.
- In the Datasource field in the Properties panel of Gallery View, select the action that will filter and list the ideas.
- Select each element in Gallery View and provide definitions in the Value field.
Similar to the setup we created on the Dashboard screen, let's create a structure that will increase the number of likes when the Like icon is clicked.
- Select the icon that will provide the like process.
- Add the Save Record action under ManagedDb via Properties Panel.
- Select the IdeaLike table by selecting Insert.
- Select all fields.
- Select New Guid for Id parameter.
- Default>Now for CreatedDate Parameter
- For the IdeaId parameter, select IdeaId under the Current category.
- For the PersonnelId parameter, define the Id value returned as a result of the action that we run as Initial Action on the screen, which pulls the information of the logged in user.
- Next, select the action that will filter and list the ideas after the Save Record action to update the number of likes.
- Perform parameter definitions.
We expect you to build and binding the structure for commenting on the idea in a similar structure to the like setup. We also expect you to carry out data binding operations on the idea list screen in the mobile application by carrying out a similar process.