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

We have completed the designs of the screens, which are essential for the application, in the previous videos. In this tutorial, we will create a prototype by adding screen transition navigation. 

Open the list screen. Click the new button in the upper right corner. Add Navigation actions from the Properties panel. Select the TodoNew screen from the Screen field. In the Open As field, select Drawer. Set the value 360 for Width and create the action with Create. Select the Row element that we added to the Table. Let's add a navigation action to this element again. Here, when the relevant todo content is clicked, let the ToDo details screen open in the Drawer and save the screen.

Open the TodoNew screen. Select the Close icon button in the upper right corner. Select Go Back from the navigation actions and create the action with Create. 

Select the Save button and we will give it the actions to save the data after creating the data table. You can watch Databinding video for transactions.

Copy this action from the detail menu of the action we gave to the Close icon button. Record the screen and open the ToDoDetail screen. The Close icon button on this screen and the element on the previous screen have the same function. Select the close icon button from the top right corner. Paste it from the action section in the Properties panel.

Select the Column element, which is the parent of the Edit label element that we added to the bottom of the screen. You can also define the corresponding actions on the parent of the relevant element to enlarge the click area. Make the TodoNew screen open as a Drawer with a width of 380px with the navigation action. 

Before we start testing the prototype, let's do 2 more minor tweaks. Open the list screen and set it as StartingScreen in the Screen Role field. Since user registration screens have not been prepared yet, activate Anonymous Access from the Authorization section to access the application screens. Thus, it can be used by anyone who has the link to the generated application. However, this authorization process was only done for the open screen, do the same authorization for adding new content and viewing screens.

After these processes, ensure that the code of the application is created with the preview button. After the application code is generated, the browser you use opens with a new tab. If there is a pop-up blocker, complete the permission processes during the first boot. It will be enough to do this for the browser once. With the Add New icon button on the List screen opened with Preview, the new task screen will open as a drawer on the right side. Similarly, you can test transitions to other screens.

Simplicity Meets High Performance

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