(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
Design of ToDo detail screen

Create a screen called Todo Detail so you can view the added tasks. Like the TodoNew screen, the TodoDetail screen will open as a drawer. Therefore, we can use it by copying the header on the TodoNew screen. Open the new ToDo screen. Select the Row element in the header and click the Copy button from the Context menu. Switch to the ToDo Detail screen and select the default row on the screen and paste it with the context menu. Since we don't need the default row at this stage, you can delete the Row.

Add a row to a Display and convert it to a single column so you can add the task and its description. Add a label inside the row. The first label will be the task itself. Add a sample task text to it. Next, duplicate the label element we used for the task text. Add some longer text to it as well. Select one of the two label elements and choose Block from the Layout section. Select Title from typography for the Description field.

Add another row element for the date and task type. Convert to a single column. We can directly add the Task type and task deadline field for the field here on the List screen with copy-paste.

Record the screen you are working on and open the ToDoList screen. Select the Spacer element and click the Copy button from the context menu. Return to the ToDoDetail screen and paste it on the screen. We will use this Spacer content directly. 

Finally, let's add an edit link button to the bottom of the screen for editing. Add the footer element to the screen. Add a label element in it. Type Edit as the label text. Define typographic style in link type. And save the screen.

We have completed the design of the screens needed so far. In the next video we will tell you how you can prototype the application.

Simplicity Meets High Performance

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