ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Drawer control
  • Overview
  • Creating a "Drawer" control in a window
  • Creating a "Drawer" control in a page
  • Characteristics of a Drawer control
  • Drawer control found in a window
  • Drawer control found in a page
  • Programming a Drawer control
  • Expanding/Collapsing a Drawer control
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
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.
Drawer control
WINDEV

Creating a "Drawer" control in a window

To create a "Drawer" control in a window:
  1. On the "Creation" tab, in the "Containers" group, expand "Tab and associated" and select "Drawer control".
  2. Click at the desired location to create the control. The control appears in the editor.
    The created Drawer control automatically contains a control: this control is the button used to "Expand/Collapse" the Drawer control. This control contains the necessary WLanguage code. You have the ability to customize this control by associating it with a specific image.
  3. 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.
WEBDEV - Server codePHPAjax

Creating a "Drawer" control in a page

To create a "Drawer" control in a page:
  1. On the "Creation" tab, in the "Containers" group, click "Drawer".
  2. 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.
  3. 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
WINDEV

Drawer control found in a window

  • When the Drawer control is in edit in the window editor, it can be handled like when it is in execution. The context menu of the control allows you to expand/collapse it upon request ("Collapse/Expand the Drawer control" option).
  • In the description of the Drawer control, the "General" tab is used to specify:
    • Whether an animation must be performed when handling a Drawer control.
    • Whether the window size must be adapted when using the control. Indeed, when the Drawer control is expanded, the controls found below the Drawer control are automatically moved to the bottom. This option is used to automatically enlarge the window to the bottom in order to see the controls found below the Drawer control.
WEBDEV - Server codeWEBDEV - Browser code

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:
The Drawer control Unit examples (WEBDEV): The Drawer control
[ + ] This example explains how to use the Drawer control of WEBDEV.
The Drawer control (static sidebar) 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.
DHTML sidebar 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
The Drawer control Unit examples (WINDEV): The Drawer control
[ + ] Using the Drawer control.
Minimum version required
  • Version 11
This page is also available for…
Comments
Drawer Control not working properly
Make sure the drawer control is wider than the contents you are moving below the drawer control.
Glenn
30 Apr. 2021

Last update: 06/22/2023

Send a report | Local help