Create a Drawer

Business Background

Use drawers to create a temporary workspace that lets your customers complete tasks without navigating to a new page. Drawers can provide additional navigation tools or can provide further context or information during a task.

How to Guide

1. Click the + icon to open the list of elements.
2. Under Containers, scroll down and drag the drawer to the canvas.

3. Add any input elements and interactive fields to the drawer.
   • Click the + icon to add an element.
   • You can add any of the Titan Web elements to the drawer.
4. Under Media, click-and-drag the YouTube element to the drawer.
5. Under Input, drag a text field and a checkbox element.

6. Add an element, such as a button, to the canvas to add an on-click action that will activate the drawer.
   • For instance, the drawer will open when the user clicks this button.
7. Click the On Click Action icon.

8. Click the + icon. The Add Node screen opens.

9. Under Layout Actions, click the Drawer/Modal option. The Add Node/Drawer/Modal screen opens.

10. Make sure the Drawer option on the left of the screen is selected.
11. Use the toggle switch to enable the drawer.
12. Select the drawer from the drop-down list.
13. Use the radio buttons to select an action:
    • Show: Use this option to show the drawer.
      • In this example, the Show option is selected.
    • Hide: Use this option to hide the drawer.
    • Toggle: Use this option to toggle the drawer. If it is shown, it will be hidden, or vice versa.
    • Reset State: Use this option to reset the drawer. All input fields will be cleared, and the drawer will return to the default settings.
14. Click the Next button.

15. If necessary, change the tag and click the Insert button. The Drawer/Modal node is added to the On Click Action screen.
16. Click the Apply button.
17. Minimize the drawer by clicking the < icon.

18. Save and Preview the project. When the user clicks the button, the drawer is shown.