ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Button control
  • Overview
  • Implementation
  • Create an drop-down Button control
  • Characteristics and operating mode of drop-down buttons
  • Arrow position
  • Drop-down button that opens a popup window
  • Split button that opens a menu and saves the selected option
  • Drop-down button in a Ribbon control
  • Drop-down button appearance
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
Overview
The drop-down button is a Button control used to expand:
  • a context menu.
  • a popup window.
WINDEV includes two types of buttons with arrows;
  • the drop-down button: in this case, the button and the arrow execute the same action.
  • the split button: in this case, the button and the arrow execute two different actions.
Implementation

Create an drop-down Button control

To crate a drop-down Button control:
  1. Create a Button control.
  2. Open the "UI" tab in the control description window and select the type of arrow. The available options are:
    • No arrow (default value): the Button control is a standard button.
    • Drop-down button: the button and the arrow perform the same action.
      You can:
      • run the click code of the Button control.
      • expand the context menu associated with the Button control.
      • open one of the application windows (a popup window with a specific menu, for example).
    • Split button: the Button control and the arrow run two different actions.
      • The button runs its code.
      • The arrow runs:
        - the arrow click code.
        - the specified action:
        You can:
        • run the click code of the Button control.
        • expand the context menu associated with the Button control.
          In this case, it is possible to check the option "The click on the button will automatically run the last menu option selected via the arrow".
        • open one of the application windows (a popup window with a specific menu, for example).
  3. Validate the description window.
Characteristics and operating mode of drop-down buttons

Arrow position

Depending on the size and position of the text, or if the button includes an icon, the arrow can be on the right or below the Button control.

Drop-down button that opens a popup window

If the button opens a window, we recommend using a window with the following characteristics:
  • no titles,
  • no menus,
  • reduced size,
  • simple borders.
Remark: You can create a popup window directly ("Blank for popup" option in the "Standard" tab of the "New window" wizard).

Split button that opens a menu and saves the selected option

When you create a split button and select "The click on the button will automatically run the last menu option selected via the arrow", the behavior of the Button control is as follows:
  • the first time the window that contains the button is opened, the button shows the first option of the context menu (text and image of the option).
  • when the user expands the context menu and selects an option:
    • the text and image of the option automatically appear in the button.
    • the code of the selected option is executed.
Remark: if the menu option contains an image, WINDEV automatically manages the different states of the image.

Drop-down button in a Ribbon control

If there is a Button control in the group of a Ribbon control, the "UI" tab of the Button control allows you to configure how the button will behave when the ribbon is reduced.
You can:
  • avoid reducing the control.
  • reduce it to display the button image and text.
  • reduce it to display the button image.
The last two options are useful for buttons that show a specific icon and label.

Drop-down button appearance

The "Style" tab of the drop-down button description window allows you to define the characteristics of the divider. You can set:
  • the opacity,
  • the type of arrow (triangle or chevron),
  • the divider color.
    The "Transparent" option defines a drop-down button without divider.
These options can be set for a single button state or for all the button states.
Minimum version required
  • Version 17
Comments
Click [Add] to post a comment

Last update: 08/29/2023

Send a report | Local help