The Drawer control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Drawer control

Overview
Creating a "Drawer" control in a page
Characteristics of a Drawer control
Drawer control found in a page
Programming a Drawer control
Expanding/Collapsing a Drawer control

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Drawer control properties

The Drawer control

Warning
From version 24, the hideshow control is now named the "Drawer control".

Overview

The Drawer control can contain other controls and it is intended to make UI design easier. It can be expanded in order to display (or not) the integrated controls. The collapse/expand operation of control can be done:

by clicking the control title,
through programming.

Creating a "Drawer" control in a page

To create a "Drawer" control in a page:

On the "Creation" tab, in the "Containers" group, click "Drawer".
Click where you want to create the control in the page. The control appears in the editor.
The created Drawer control is empty: the upper section (whose size can be adapted via the sizing handle) receives the clicks and triggers the collapse/expand operation of lower section.
Drop on the Drawer control the different controls that must appear/disappear when it is used.

To view the characteristics of the control, select "Description" in the context menu.

Characteristics of a Drawer control

Drawer control found in a page

When the Drawer control is in edit mode in the page editor, it always appears in its maximum size.
The operations for collapsing/expanding the control always come with an animation if they are performed:
- in browser code.
- in server code in an AJAX event (or process).
When the Drawer control is collapsed, the controls located below it do not automatically move up except if they are positioned (as well as the Drawer control) in a cell that uses the relative positioning of controls. For more details, see Cell control.

Programming a Drawer control

Expanding/Collapsing a Drawer control

To collapse a Drawer control, use the following syntax:

<Name of Drawer control> = False

To expand a Drawer control, use the following syntax:

<Name of Drawer control> = True

Related Examples:

Unit examples (WEBDEV): The Drawer control

[ + ] This example explains how to use the Drawer control of WEBDEV.

Unit examples (WEBDEV): The Drawer control (static sidebar)

[ + ] This training example explains how to use the Drawer control of WEBDEV. This Drawer control is associated with a cell for relative positioning in order to have a more interactive behavior.

Unit examples (WEBDEV): DHTML sidebar

[ + ] This example explains how to create a DHTML menu with WEBDEV.
This example allows you to:
- Create a DHML menu
- Add a menu entry
- Add a menu option

Unit examples (WINDEV): The Drawer control

[ + ] Using the Drawer control.