(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
Add new task screen design

Create a screen called “Add new task”. We will use the screen as a drawer. Click on the handle on the right middle edge of the screen to make it 344px wide.

Add a Row element for the header field of the opened Drawer and convert it to 2 columns. Add the label element for the Drawer name to its left edge. Select the Header style as the style for the Label. Type ToDo as text as well. Select the column it is in and center it vertically. Add an icon element to the right column. Replace the icon with the close icon in the Properties panel. Select the column with the icon element and align it to the right with the styling Layout.

When we consider the data type or content features to be added for ToDo, it consists of the Task name, description, task type, and last application date fields. Add the text input element for the header field. Type add todo in the placeholder section. Add the textarea element for the description field. Type add a description in the Placeholder field. Add a selectbox for the task type. Finally add the DateTime element for the task due date and time. Type Due date in the Placeholder field.

We have added the fields used in the new todo creation and editing process to the screen. Now add a footer element to the screen for recording. Also, add a Row in it. Convert the row to a single column and add the button element to it. Change the text of the button to Save.

We have completed the design process of the new ToDo add screen.

Simplicity Meets High Performance

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