ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WINDEV and WINDEV Mobile 2024 feature!
Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Edit control
  • Overview
  • Including clickable icons on the left and/or right of the input area
  • Defining clickable icons in the editor
  • Defining clickable icons programmatically
  • Delete button
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
You can include different buttons in the input area of an Edit control:
  • Clickable icon on the right,
  • Clickable icon on the left,
  • Delete button.
These buttons and the corresponding events can be defined:
  • directly in the interface.
  • programmatically.
Including clickable icons on the left and/or right of the input area
The "UI" tab of the Edit control description window contains different options to manipulate buttons in the input area.
The buttons on the left and right of the input area are clickable icons: simply select an image and specify the code to be executed on click.

Defining clickable icons in the editor

To include clickable icons on the right and left of the input area:
  1. Open the Edit control description window.
  2. In the "UI" tab, under "Buttons integrated into the input area", click "No buttons" (left or right, depending on the icon you want to include).
  3. In the window that appears, specify:
    • the name of the image to be used. This image can be a file on disk or an image from the image catalog. In the latter case, the suggestions will automatically be icons that can be displayed in this area.
    • the number of states of the image.
    • whether or not the icon should be in monochrome mode. The image will be automatically transformed to adapt to this mode.
    • the icon size (width and height). If not specified, the current icon size will be used.
  4. If necessary, specify the margins between the input area and the icon using the "Margins" button:
  5. Confirm the changes made in the icon options window. The name of the selected image appears as a link in the "UI" tab of the control description window.
  6. Validate the control description. The selected icon appears in the control.
To define the WLanguage code associated with the clickable icon:
  1. Open the WLanguage code associated with the Edit control (press F2).
  2. Write the corresponding WLanguage code in the "Click on the left button click" or "Click on the right button" event.

Defining clickable icons programmatically

To programmatically include clickable icons on the right and left of the input area:
  1. Use the RightButton and/or LeftButton properties to define the characteristics of the icon.
    For example:
    EDT_Edit.RightButton.Image = IMG_Plus
    EDT_Edit.RightButton.NbState = 5
    EDT_Edit.RightButton.Monochrome = False
  2. Use the Process property with the trtClickButtonEditControlRight and trtClickButtonEditControlLeft constants to define the process to be executed. For example:
    EDT_Edit.Process[trtClickButtonEditControlRight] = MyProcedure
Delete button
The delete button is used to clear the input area. This button is a standard icon displayed by the system. You can choose among different display options (position and image).
To configure this delete button:
  1. Open the Edit control description window.
  2. In the "UI" tab, under "Buttons integrated into the input area", expand "Delete button" and select the desired option:
    • None: The delete button will not be displayed (default option).
    • Editable: The delete button only appears when the user is entering data.
    • Off edit: The delete button only appears when the user leaves the Edit control.
    • Always visible: The delete button is always visible.
  3. If you choose one of the delete button display options, the "No buttons" link next to "Right" changes to "No customization".
    • If there are no customizations, the delete icon ("X") defined by the system will be used.
    • You can customize the delete icon by clicking the "No customization" link next to "Right".
  4. Validate the control description window.
Remarks:
  • The delete icon does not appear in the editor. It will appear when you run the window test.
  • To define the position and the display options of the delete button programmatically, use the WLanguage DeleteButton property.
Minimum version required
  • Version 2024
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 02/19/2024

Send a report | Local help