ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Edit control
  • Text token Edit control
  • Overview
  • Behavior of the text token Edit control at runtime
  • Characteristics of Text token Edit controls
  • Creating a Text token Edit control
  • Options specific to Text token Edit controls
  • Manipulating a Text token Edit control programmatically
  • Associated events
  • Associated WLanguage functions and properties
  • Adding tokens to a list of input suggestions
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
Text token Edit control

Overview

Interfaces that use token controls are common. A Token control contains variable amounts of information in a limited area.
When numerous multiple choice options (e.g. selecting several colours among dozens) are available to the end user, a Token control is an easy way to present these choices in a clear way.
When the user chooses a new criterion, it is added into the control.
If the user decides to delete a criterion, they can simply click the "X" next to it.
To manage a token control in WINDEV, WEBDEV, and WINDEV Mobile, simply create a "Text token" Edit control. The different tokens can be entered:
  • directly by the end user,
  • programmatically.
Caution: "Text token" Edit controls cannot be used in a Table or Looper control.

Behavior of the text token Edit control at runtime

  • A token is automatically added into the control when the user presses the Enter key or uses one of the specified separator characters.
  • If the input area has focus:
    • Clicking on a token removes the input cursor.
    • You can use the arrows to select tokens and remove the input cursor.
  • If a token is selected:
    • you can use the keyboard arrows and the Home and End keys to select and move among the tokens.
    • the Del key deletes the selected token.
    • the Backspace key deletes the previous token.
  • Using the "X" allows you to delete the desired token.
  • If the user has not set the focus on the input area yet:
    • The Tab key sets the focus on the input area if the Edit control is active.
    • The Tab key sets the focus on the first token if the Edit control is not active.
  • If the focus is set on another control, the selected input area and/or token lose focus.
  • WINDEV If multiple selection is enabled, the user can select multiple tokens by holding down the Ctrl key.
WINDEV Automatic Application Features (AAF)
Several AAFs are available in the token context menu:
  • Edit: Allows you to edit the token text.
  • Cut: Copies the token text and removes the token.
    If multiple selection is enabled, this option cuts all selected tokens.
  • Copy: Copies the token text.
    If multiple selection is enabled, this option copies all selected tokens.
  • Copy all: Copies the text from all tokens.
  • Paste: Pastes tokens or text from the clipboard.
Characteristics of Text token Edit controls

Creating a Text token Edit control

To create a Text token Edit control:
  1. On the "Creation" tab, in the "Usual controls" group, click .
  2. Click where the control will be created in the window or page. The control appears in the editor.
  3. In the Edit control description window, select "Text tokens" and validate.
Remark: It is also possible to create a Text token Edit control from a list of predefined controls delivered by default in the "Edit" menu ( icon). The list of available controls is displayed with the project skin template. Simply select "Token edit" or "Token eMail edit".

Options specific to Text token Edit controls

The description window of the Text token Edit control allows you to define:
  • the management options of the control and the tokens ( "General" tab).
  • the token drag-and-drop options ("Details" tab).
  • the style of the tokens ( "Style" tab).
The "General" tab of the control description window includes the following options:
  • Input mask: When direct input is enabled in a Token control, it is possible to choose an input mask, just like in every Edit control. The end user is guided: email, uppercase characters, numeric values, postal code, etc.
  • Input separators (in addition to <CR>): List of characters considered as token separators. When the user enters one of these characters, a token will be created with the content of the input area and the user will proceed to enter the next token. This list can be manipulated in the code via the TokenListSeparator property.
  • Unicode: Allows the input of Unicode characters.
  • Allow duplicates: Allows the input of duplicate tokens. If this option is selected, the user will be able to tokenize the same text several times. This option can be set programmatically using the TokenAllowDuplicate property.
  • Automatic line wrap: Sets the behavior of the control when numerous tokens are entered: tokens can be displayed on several lines (default option) or on a single line with a horizontal scrollbar.
  • Deletable tokens: Allows the user to delete tokens from the Edit control. In that case, an X will appear in the token. This option can be set programmatically using the TokenDeletable property.
  • Multi-selectable tokens: Allows selecting multiple tokens (holding down the Ctrl key, for example). This option can be set programmatically using the Multiselection property.
The "Details" tab allows you to define all the input options of the text token Edit control. The "Source" and "Target" options enable the drag-and-drop behavior of tokens. For more details on automatic Drag and Drop, see Automatic Drag and Drop.
Remark: When a token is dragged and dropped, the "Whenever modifying" event is executed.
The "Style" tab in the control description window allows you to define:
  • the style of the token caption (element "Tokens: Caption").
  • the style of the token (element "Tokens: Border"). In this case, it is possible to select:
    • the X icon for the token. The image must have the following dimensions: 12 x 12 pixels (in each state).
    • the background and border color of the token.
    • the type of token borders.
  • the style of the selected token ("Tokens: Selection"). You can then choose the color of the selected token. The "Automatic" color automatically sets the color of the selected token depending on the color of the text. Thus, the text of the token is always readable.
Manipulating a Text token Edit control programmatically

Associated events

At runtime, the user can add, delete or select tokens in an Edit control.
You can use different events to manage these actions:
  • Add a token.
  • Delete a token.
  • Click a token.
These events have a procedure that retrieves the current token in a variable of type Token.
For more details about these events, see Events associated with Edit controls.

Associated WLanguage functions and properties

The following WLanguage elements allow you to manage Text token Edit controls:
  • the Token variable type, which is used to get and set all the characteristics of a token.
  • token functions:
  • properties for managing tokens and their characteristics:
    DndSourceThe DndSource property is used to determine and change a control's drag-and-drop behavior.
    DndTargetThe DndTarget property determines and changes how a control behaves in a drag-and-drop operation.
    StoredValueThe StoredValue property is used to get the value currently stored by:
    • a row in a List Box, ListView or Combo Box control.
    • a "Text token" Edit control.
    • a row of a Table control.
    • an input suggestion in an Edit control (if the suggestion is selected).
    TokenThe Token property is used to manage the different tokens associated with a "Text token" Edit control.
    TokenAllowDuplicateThe TokenAllowDuplicate property is used to:
    • Allow or prevent the user from entering duplicates in a "Text token" Edit control.
    • Determine if duplicates are allowed in a "Text token" Edit control.
    TokenCurrentInputThe TokenCurrentInput property is used to read or change the value being entered in a "Text token" edit control.
    TokenDeletableThe TokenDeletable property is used to:
    • Determine if the end user is allowed to delete tokens in a "Text token" Edit control.
    • Allow or prevent the end user from deleting tokens in a "Text token" Edit control.
    TokenEnabledThe TokenEnabled property determines if an Edit control is a "Text token" Edit control.
    TokenListSeparatorThe TokenListSeparator property retrieves or modifies the separators that trigger the creation of new tokens when entering information in a "Text token" Edit control.

Adding tokens to a list of input suggestions

You can add tokens to a list of input suggestions using AssistedInputAdd.
Example:
MyToken is Token
MyToken.Caption = "abc"
MyToken.Value = "abc"
MyToken.ToolTip = "tooltip"
MyToken.Color = DarkRed
MyToken.BackgroundColor = PastelRed
MyToken2 is Token
MyToken2.Caption = "def"
MyToken2.Value = "def"
MyToken2.ToolTip = "tooltip"
MyToken2.Color = DarkRed
MyToken2.BackgroundColor = PastelRed
AssistedInputAdd(EDT_ControlWithTokens, MyToken)
AssistedInputAdd(EDT_ControlWithTokens, MyToken2)
Related Examples:
The Text token edit control Unit examples (WINDEV): The Text token edit control
[ + ] Using a "Text token" edit control.
The text token edit control Unit examples (WEBDEV): The text token edit control
[ + ] Using a "Text token" edit control.
The Text token edit control Unit examples (WINDEV Mobile): The Text token edit control
[ + ] Using a "Text token" edit control.
Minimum version required
  • Version 24
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 07/05/2024

Send a report | Local help