(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
Preparing the list screen

Let's continue by adding a list to the screen where we prepared the header. When we examine the example screen, we see a search and the datepicker element to filter the date status information under the header.

Drag and drop the row element to the screen and convert it to 2 columns. Add the textinput element to the left column. Add Search text with Placeholder from Properties panel. Add the datepicker element to the right edge. Set the max width to 320px for both elements. While this row will look good on desktop and tablet screens, it will not adapt to phone screens. Here we have to do a little responsive adjustment. For this, select the Row element and on the properties panel, make sure that each column is sorted as a single line on the phones. Turn on the phone view feature and choose the first option, the single column view. In addition to the Layout section, you can add spaces to the top and bottom edges of the columns coming under the bottom.

We will use the Table element from the elements panel for the list. The table element is of type data repeater. It applies the visual and data edits you make in the first line by repeating them in the other lines.

Drag and drop the table element from the Elements panel to the screen. Since we drag the element to an empty area on the screen, it automatically comes with a row and column. Select Row and give 20px padding in 4 directions from the Styling Layout section. Save this edit with a style name, assuming it will be used on other screens. Then select the Column element and apply the style you just created to it. In addition, give the Column element the color white with the ffffff value from the Fill section.

With the table element, 4 columns come by default. By selecting Table Row, you can increase these column numbers and change the column headings. In the application, we will use a single column and create a complex content with the added Row element. As we can see on the sample screen, we see the task name, type and deadline sections. We will proceed by using a single table column so that the screens in the application can be seen well on different devices. Thus, it will be able to be viewed and used in a responsive interface that can be adapted to the screen resolution on desktops, tablets and phones. While the Table element is selected for each column, hide the table header from the properties section.

Add row element from element panel. First, convert the row to 2 columns. Add the label element to the left column. Add a task text to describe the element's function. In the right column, add the spacer element to set the ranges of the elements that show the task type and deadline. Then add a label element for the task type. We can change the date background color to see the status information of the task deadline. Add the panel element. Then add a label element to show the date. Select the panel element and pad the Layout in 4 directions at 4-16-4-16 px. Temporarily change the background color to 15% transparent yellow with Fill. We will set this background color to be yellow when the date is approaching and red when the date is passed. As a final visual edit, enter 24px in the corner bevels of the panel element with the border section. Select the Spacer element and set the spaces between the two elements to 40px. Select the parent Column element and justify the content elements to the right. Finally, if you want to remove the border lines on the lines in the table, choose TableRow. You can remove it by selecting None from the border.

Since Table is a data repeater type element, the elements we added to the first row were automatically added to the other rows.

Finally, let's add a pagination element to the bottom of this list. Drag and drop the pagination element from the Elements panel. 

You can set the properties on the pagination element with the properties panel.

Simplicity Meets High Performance

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