(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
List Screen Data Binding

Let's start with the table element. Select the element and select the SelectTodoItem action from the datasources section in Properties. With this selection, we have determined the data table to be displayed in the table. Now, let's select the relevant field (field) to the elements according to the queries added in the custom actions. Select the label element we added for the task name. Select TodoName from the drop-down list with Properties panel Value > Field to display. For the label element added for the tax type, select Type from the drop-down list with Value > Field to display. There are two elements for DateTime. First, the label element will be for the deadline of the task, and secondly, the label element's parent will be for the panel element. Select the panel element. Select “colors” from Properties > dynamicBackgroundColor > Field to display. Select the Label element and select DateDue from the Value field. We have taken the necessary actions for the content to be listed. Now, let's add the relevant action to the Display, Edit and Delete operation icons at the end of the lines. Before these operations, we must define a screenInput for both display and edit screens. Open the TodoNew screen. Add new screen input with properties panel. Select prmID in the Input name field, GUID in the Type field, and One in the Cardinality field and save. Do the same on the TodoDetail screen.

Let's continue from the TodoList screen. Select the display icon and add a navigate action. Select the TodoDetail screen from the To Screen/URL field. The ScreenInput option that we just added will appear on this screen. Select the ID under Current from the SymbolPicker list. Select the screen opening type drawer and set it to be 400px wide. With this navigation, we send the ID of the data in the relevant row on the table to the screen opened. Thus, we have determined that it calls the data connected to the ID in the defined areas at the screen opening. Let's do the same with the Edit icon. Select the edit icon and add a navigate action. Select the TodoNew screen, select ID under Current in ScreenInput. Set the screen type to drawer and the opening width to 400px. Finally, there is the Delete button in the table. We need to add 2 actions for the delete operation. First run the Delete action. The second is the refresh of the screen and the list after the delete operation.

Select DeleteTodoItem from the Custom Actions list. Select ID under Current with SymbolPicker. Add SelectTodoItem as a second action to update the list. Select the relevant fields with Symbol Picker.

We have completed the data binding process for the listing on the TodoList screen. Now let's move on to other operations on this screen.

First, let's add the data table that will be called when the screen is opened. Select the screen and select SelectTodoItem from the Custom Actions list. Here, for the search box, Date filter and pagination, select the relevant fields with SymbolPicker.

Now, let's complete the TodoList screen operations by making a data connection to other elements in the screen. First, add the Navigate action to the New Task button in the upper right. Select New GUID from the Default list for the prmID we added to the TodoNew screen as Screen Input.

We must also add SelectTodoItem custom actions for SearchBox, DateFilter and Pagination on the top of the list. We used this a while ago with the Delete button and PageInit. Copy it with the custom actions detail menu in PageInit. Then select the added text input for Search box. Select SelectTodoItem from the Custom Actions list. Paste the information using the action's detail menu. Do the same for the date filter and pagination elements. So far, we have added all the data connections needed for the TodoList screen.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try