ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / New features / New features in version 28
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
WEBDEV 28: Benefit from the 196 common new features in version 28
WEBDEV 28 includes most of the 196 common new features in version 28.
The main new features in WEBDEV 28 include: new controls, new Polar Area chart, new Smart controls, improved Monitoring Robot, custom keyboard shortcuts, runtime logs for web services, new WLanguage elements, etc.
And in addition to all these new features, WEBDEV 28 benefits from amazing new features specific to the Web. See the following pages to learn more.
7 new Smart controls for WEBDEV
7 new Smart controls are available in WEBDEV 28:
  • Looper with image and filter.
  • Advanced tables: 3 different Smart controls.
  • Multi-selection with tokens.
  • Badge.
  • Address autocomplete.
New Smart control: Looper with image and filter
Standard UI
Standard UI
The "Looper with image and filter" Smart control allows you to easily create Looper controls with:
  • images
  • titles and subtitles
  • ability to filter elements
  • search capabilities
  • sorting options
  • ...
Like all the other Smart controls, this Looper is provided with its source code and can be edited.
It gives you a great starting point to develop sophisticated Looper controls for the web.
New Smart control: Advanced tables
3 new Table-specific Smart controls are introduced in version 28.
These Smart controls allow you to easily create modern-looking, feature-rich tables in WEBDEV.
Each Smart control is fully customizable, and can therefore be used to create tables for any professional field.
Template: Orders
This Smart control contains:
  • Container column with order IDs presented as links.
  • Text, date and currency columns.
  • Container column with colored badges indicating the order status.
  • Container column with links to a Details page.
Template: Deliveries
This Smart control contains:
  • Container column with a circular image, a title and a description.
  • Container column with colored badges indicating the order status, for example
  • Popup button with menu options.
Template: Sales
This Smart control contains:
  • Check box column to select multiple rows.
  • Text column with the product name.
  • Container column with an image.
  • Container column with a progress bar.
  • Container column with a Switch control to enable or disable an option.
  • Container column with 2 Button controls for specific actions: Edit and Delete.
New Smart control: Badge
The "Badge" Smart control is also available in WEBDEV.
See New feature 201.
New Smart control: Multi-selection with tokens
The "Multi-selection with tokens" Smart control is also available in WEBDEV.
See New feature 200.
New Smart control: Address autocomplete
The "Address autocomplete" Smart control is also available in WEBDEV and has been adapted for the web.
See New feature 202.
New Kanban control: also for websites
The new Kanban control is also available for your websites in WEBDEV 28.
With this control, you can implement powerful features of the Kanban methodology in your websites.
Both developers and end users have the ability to create and manage Kanban controls in websites.
Kanban control for managing meetings, used in a browser
Kanban control for managing meetings, used in a browser
New Kanban control: powerful functionalities without leaving the browser
The features of the new Kanban control respond to the needs of web users.
Additional programming events are available in Browser code.
The Kanban control supports both touch and mouse interactions.
New Kanban control: features and programming
The features and programming possibilities of the Kanban control are the same as in WINDEV (see new features 001 to 014).
All the WLanguage functions and types are available for you web development projects.
Writing cross-platform code is easier than ever!
Menu: new Context Menu control
Context menus are widely used in the web.
WEBDEV 28 allows you to easily create context menus for sites.
A context menu can be associated with a control, a control template or an entire page.
To create a context menu, simply: select the option in the ribbon, or open the 7-tab window of the control or window.
Edit the options without effort in the WYSIWYG editor.
You can apply styles to context menus.
A context menu can contain submenus.
The new OpenContextMenu function in WLanguage allows you to open a menu programmatically.
Context menu in WEBDEV 28
Context menu in WEBDEV 28
Scheduler control: customize appointments
In WEBDEV 28, you can customize the thumbnails of appointments in the Scheduler control: title, image, button, background, color, borders, etc.
Combo Box: label above the drop-down list
The label of a Combo Box control can now be positioned above the drop-down list.
This allows you to create narrower controls.
Label above the drop-down list
Label above the drop-down list
Edit control: label directly on the border
In addition to the other modes (label on the left, hint text in the control, etc.), the Edit control now allows you to display the label above or directly on the border of the control.
This reduces the width of the control.
Edit control with a label directly on the border
Edit control with a label directly on the border
Add custom HTML attributes
In the 7-tab window in WEBDEV 28 you can now specify the additional HTML attributes that will be generated with the control.
A major advantage of this feature is the ability to improve accessibility (see new feature 756).
These attributes also allow you to manage other features available in HTML:
  • autocomplete
  • itemprop
  • aria-xxx (accessibility)
  • ...
For more details, see the help on the HTMLAttribute property.
5,000 new clipart images to use with text
A common technique to include an image in a text in web pages is to use an icon font.
As its name suggests, this type of font only contains icons.
In version 28, the icon font provided with WEBDEV includes 5,000 new clipart images.
Enhanced features
The HTML Edit control in WEBDEV is intended to be used in a page, and to allow users to enter text with HTML formatting: comment, description of an article in a CMS, etc.
In version 28, this Edit control includes new useful features:
  • support for all HTML tags
  • ability to display and edit HTML source code
  • syntax highlighting
  • visual table creation
  • visual table editing
  • ability to specify the font size and name
  • "email" mode (see next section)
  • ability to dissociate elements from the CSS styles of the page
  • ...
HTML Edit control: new event
In version 28, the HTML Edit control includes a new and very useful WLanguage event.
The "Key pushed" WLanguage event is available in Browser code. This event allows you to create a set of autocomplete suggestions, or set shortcuts on function keys, for example.
User-friendly toolbar
In version 28, the toolbar of the WEBDEV HTML control includes new options to:
  • specify the font name
  • specify the font size
  • insert tables
  • select the style of a table with a preview
  • ...
HTML email input mode
The HTML Edit control features an "email" input mode that limits the HTML functionalities to those recognized by most email clients.
Use Chart, Progress Bar and Combo Box controls within Looper controls
The Looper control is one of the most widely used controls in WEBDEV.
This control allows you to define an area with data and controls, and use it as many times as necessary.
In version 28, you can include new types of controls: the Looper control now supports Internal Pages, which allows for endless possibilities.
You can easily include Chart, Progress Bar and Combo Box controls within Loopers. These controls can be automatically updated.
Horizontal Looper within a vertical Looper: it's possible!
In version 28, you can insert a vertical Looper in a horizontal Looper, and vice versa: let your creativity fly!
Use a looper to display what you want, the way you want
You can include Internal Pages (the same or different) in each iteration.
And each one of these Internal Pages can itself contain a Looper.
This new feature makes it easy to display different data in each iteration of the Looper control.
Programming
Programming is easier than ever, thanks to the new LooperAddIP, LooperInsertIP and LooperModifyIP functions.
These functions expect the Internal Pages and the parameters to be passed to these pages.
The same Looper can use different Internal Pages.
Minimap
A new automatic minimap mode has been added to the WEBDEV 28 editor.
When the page is higher than the viewing area, you can now see a small preview and scroll through the page: a thumbnail of the entire page appears on the left (or right) and allows you to navigate with ease in edit mode.
The minimap allows you to easily scroll through the page in edit mode
The minimap allows you to easily scroll through the page in edit mode
New table styles: great-looking tables
In version 28, the Table control is enriched with new styles.
These modern styles provide a cleaner, easier-to-use interface.
New style of the Table control in version 28
New style of the Table control in version 28
Style sheet editor
In previous versions of WEBDEV, styles had to be edited one by one.
In version 28, all the styles of the project are presented in one editor.
This gives you an overview of all the styles used in the project.
All the styles used in the project
All the styles used in the project
Now you can make changes to a group of styles, or to multiple styles in a row.
The CSS styles used are listed.
Rich Text Area (RTA): preservation of HTML layout
A Rich Text Area allows you to enter your own HTML code.
The HTML code is preserved after using the formatting options of the ribbon.
CSS style selection: better, clearer
You can apply a CSS style to the elements of a control.
In version 28, the style selection has been simplified and is now more efficient.
Margins and snap-to behavior of parent control
When a control is selected in the editor, the margins of the parent control (if any) are highlighted and the snap-to behavior is automatically enabled.
This makes it easier to align controls.
Miscellaneous
  • Page mode: Zoning, Layouts, Responsive, ... These modes support inheritance but also support overrides. The diff viewer shows any changes in these modes.
  • Style editing: The "Border/Background" and "Background image" options are kept for compatibility.
2 New skins
2 new skins are provided in version 28: Maki and Velvet.
Use these skins for your sites as you like!
Insert your own accessibility tags (ARIA, etc.): define attributes in the HTML code of WEBDEV controls
There are accessibility standards that have been defined to help users with disabilities (visual or cognitive impairment, color blindness, physical disabilities, dyslexia, etc.).
These standards are implemented, among other methods, by using tags in the HTML code of the page.
These tags will be interpreted by the browser, browser plugins or even assistive devices.
In WEBDEV 28, you can easily insert your own attributes programmatically, or via the 7-tab window:
  • text that will be read aloud to provide additional information about the button, control that has the focus.
  • text that will be read aloud when a progress bar is displayed.
  • text alternative to a sound or audio file.
  • ...
Accessibility attributes: 7-tab window or programmatically
These accessibility attributes can be defined and edited:
  • in the 7-tab window.
  • programmatically.
To do so, the new ..HTMLAttribute property has been introduced.
Code sample:
Accessibility: "Label for" attribute for Edit controls
The "Label for" attribute tells the browser that a label is associated with an Edit control.
In version 28, this attributed is generated by default for all Edit controls.
The browser, plug-in or device will use the label, if necessary.
Accessibility: "Fieldset" attribute for controls in a cell
The Fieldset attribute tells the browser that a control is part of a logical group of controls: address, ...
In version 28, this attribute is generated by default for all controls present in a Cell control.
Use layouts to edit, hide and do more with... areas of a page in zoning mode
WEBDEV 28 allows you to do more with the layouts defined on pages in Zoning mode.
In version 28, you can change the behavior of the zones for each layout:
  • delete (hide) a zone
  • change the size
  • enable inheritance and overriding by layout
  • ...
In the Mobile layout, the left menu and the footer have been removed to improve readability
In the Mobile layout, the left menu and the footer have been removed to improve readability
Control template: layout support
In version 28, you can define layouts directly in a control template.
When this control template is used in a page, you must simply select the desired layout.
RTA: content per layout
A Rich Text Area (RTA) can have different content in each layout.
For example, you can show the detailed version of a text in the Desktop layout, and a shorter version in the Mobile layout.
Automatically transform a responsive page in legacy mode into a page with layouts
The legacy Responsive Web Design mode is based on resolution ranges. On the other hand, the layout-based responsive mode works by editing the page for each display mode: Desktop, Smartphone, etc.
The layout-based responsive mode allows for greater flexibility.
In version 28, you can automatically transform a page from the legacy responsive mode to the layout-based responsive mode.
Each resolution range will be automatically transformed into a layout.
A standard method to position controls: Flexbox
The Flexbox layout mode works by repositioning controls within "boxes", setting a vertical or horizontal alignment, setting relative sizes and nesting boxes. Each box corresponds to a Flexbox control.
The advantage of this mode is the automatic repositioning of boxes and the controls they contain, in order to fit the browser and/or the content.
A page in Zoning mode (with or without layouts) or in legacy Responsive mode can contain one or more Flexbox controls.
Flexbox: how it works
Controls are positioned one after another, within a box (Flexbox control).
Key point: one or more of these controls can themselves be Flexbox controls.
First, indicate how controls should be positioned within each box: in rows or columns.
Then, indicate how the controls should react when the box or the other controls are resized: wrap, enlarge, reduce...
Apply this method to as many controls as necessary to define their positioning and resizing behavior.
These are some of the properties you can define
Direction in which items will be laid out: in rows or columns.
Justification: Left, right, justified with or without margins, centered, etc, ...
Enlargement of items in a given area
Alignment: Top, bottom, vertically justified, centered, etc, ...
Wrapping: If no wrapping is specified, either the flexbox container grows, or the content is truncated
You can easily define these parameters in the UI tab of the 7-tab window (see next features).
You will also find options for the cross axis in the 7-tab window.
In Flexbox mode, items can be laid out in any order.
For example:
Flexbox: Define the desired behavior
The most common flexbox properties are clearly represented in the 7-tab window.
More specific properties can be defined by writing or copying/pasting the corresponding CSS code: there will always be a solution.
Behavior of a control: flex anchors
To change the default behavior, you can configure each control individually.
For example:
  • fixed-width control
  • control that fits to content horizontally
  • control that fills the remaining space
  • control that grows or shrinks relative to other controls according to a given factor
  • ...
As with the flexbox container, you can also define the behavior of each control by writing the CSS code directly.
Preset modes available
Several preset modes that correspond to standard properties are available by default: no need to configure every single option.
These preset modes can be customized.
Add Flexbox controls in all types of pages
Flexbox controls can be used in all types of pages: Zoning, Zoning with layouts, legacy Responsive, etc. A Flexbox control can be placed among other controls, but also in a Looper, cell, etc.
Popup: layout
You can use a page layout to define a layout for a popup.
For example, you can define a small layout for smartphones, and a large layout for desktop.
New Polar Area chart
The new Polar Area chart is available in WEBDEV.
See new feature 022.
Polar Area chart
Polar Area chart
SaaS: Miscellaneous
  • The SaaS administrator uses charts to show statistics. You can now right-click to see the data that was used to build the chart.
  • The SaaSAdminListService WLanguage function accepts a new parameter to avoid listing duplicate services.
Spa: new WLanguage functions and features in browser code
Single Page Applications require a significant amount of code on the browser side.
WEBDEV 28 includes new features for creating Single Page Applications.
  • New WLanguage functions in Browser code (see new features 865 to 878).
  • Context menus.
  • Flexbox mode.
  • ...
WhatsApp: send messages or images
In version 28, a ready-to-use button allows you to send messages and/or images to a phone number through WhatsApp.
Thus, you can easily share information using this widely-used messaging service.
All the new WLanguage functions in version 28 are available in WEBDEV
WEBDEV Server code benefits from all the new WLanguage functions and features in version 28.
See new features 114 to 147.
Enter a site through a specific page: which page triggered the project initialization?
A project can contain SEO-ready pages.
When a user accesses the site for the first time, the project initialization event is executed, whether the user went through the home page or a specific page address.
The new "SessionRequestedPage" function can be used to get the name of the page used to access the site.
This allows you to adapt the initialization processes accordingly: do not ask the user to log in, set the position directly on a record, etc.
New functions for scheduled tasks
In version 28, the new Scheduler functions allow you to:
  • create
  • modify
  • add
  • delete
scheduled tasks programmatically on the Application Server.
Send values of controls in AJAX calls
In version 28, you can easily send the values of all the controls in the page in the AJAX call.
See new feature 865.
AWP
New event: "after updating controls"
In AWP mode, a new page event is available in the code editor.
The new "After updating controls" event allows you to make sure that the value of the controls on the server is the same as the value of these controls in the browser when the AJAX call is made.
miscellaneous
  • In AWP mode, you can use enumerations and combinations in the DeclareAWPContext function.
Send values of controls in AJAX calls
In version 28, the value of controls can be sent automatically when the AJAX call is made.
The new ajaxPostValueOfControls constant tells the AjaxExecute function that the values of all the controls in the page must be sent to the server.
The Server procedure called will use the value of the controls that contain data entered by the user.
Combo Box control: the value stored in server code is accessible in browser code
In version 28, the stored value of a Combo Box control can be accessed directly in Browser code.
For security reasons, this feature is only available if the corresponding option has been checked in the 7-tab window of the Combo Box control.
Glocals and procedures of controls
Glocals (variables global to a control) and procedures of controls are now available in Browser code.
The "class" attribute of HTML tags generated by WEBDEV can be modified programmatically
The HTML code of WEBDEV controls contains "class" attributes that are used to implement the desired functionalities.
In version 28, these "class" attributes of the controls in a page can be modified or deleted programmatically.
Please note that you can add your own classes.
Procedure automations
Procedures support automated actions: call at regular intervals, etc.
In version 28, these automations are also available for Browser procedures.
9 new browser WLanguage functions
HTMLToRGBConverts the HTML color into RGB color.
KanbanAddCardAdds a card to a list in a Kanban control.
KanbanDeleteAllCardDeletes all cards from a Kanban control or Kanban List control.
KanbanDeleteCardDeletes a card from a Kanban control or from a Kanban List control.
KanbanMoveCardMoves a card in a Kanban control.
LooperPositionMoves the scrollbar to display a specific row or returns the index of the first row displayed in a Looper control populated programmatically.
OpenContextMenuAutomatically opens a context menu for the current control, window or page.
TablePositionDisplays a Table or TreeView Table control from a specified row or returns the index of the first row displayed in a Table or TreeView Table control.
Jsonvalid
The new JSONValid function in WLanguage allows you to check that a string respects the JSON format: missing braces, key without a value, etc.
PHP
Additional Date functions
Several functions to convert dates to different formats are now available in PHP: EpochToDateTime, DateTimeTimeZoneToLocal, DateTimeLocalToTimeZone, DateTimeToString, DateTimeToEpoch, DateTimeToReal...
7 new WLanguage functions for PHP
7 new functions are available in PHP:
DateTimeLocalToTimeZoneConverts a local date and time to the date and time in a particular time zone.
DateTimeTimeZoneToLocalConverts a date and time from a particular time zone to a local date and time.
DateTimeToEpochConverts a local datetime to Epoch format (number of time units since 01/01/1970 at 00h00 UTC).
DateTimeToRealConverts a date and time to an 8-byte real.
DateTimeToStringConverts a DateTime to string in the specified format.
EpochToDateTimeConverts a date and a time in Epoch format (number of time units since 01/01/1970 at 00h00 UTC) to a local datetime.
RealToDateTimeConverts an 8-byte real to a date and time.
Test WEBDEV pages on a mobile device without deploying the site
A new option in the editor allows you to run a test directly on a mobile device.
Simply scan the QR code that appears on the screen.
Simply make sure the mobile device is connected to the same network as the PC (generally, the Wi-Fi network of your organization).
Debugging on mobile devices
In version 28, breakpoints (server code) are active on the mobile device.
You can set breakpoints after starting the test.
The standard debug mode is still available: step-by-step execution, ability to view and modify the content of variables, etc.
Nothing beats an actual test on the device
When you want to test a website intended for mobile devices, the best method is to use an actual device
The browser's built-in emulator is useful, but it does not allow you to test touch features and actual font sizes.
WEBDEV 28 now includes this essential test/debug mode.
Activate or deactivate administration sites at any time
In version 28, you can activate and deactivate the administration sites that are integrated into the Application Server at any time:
  • SaaS administrator
  • Web HFSQL administrator
  • Telemetry server
  • User Groupware administrator
  • Private Store website
  • Web service to access third-party databases from a mobile device.
Before, administration sites remained activated by default. Now, you don't need to think which sites must be activated when installing the Application Server.
64-bit test mode
REST web services can be tested in 32 or 64-bit mode on demand.
This allows you to test a web service according to a given version of the Application Server.
Automation: Remotely control the WEBDEV Application Server
The ability to remotely control a WEBDEV Application Server is a highly anticipated feature.
This new feature makes it possible to automate actions, make these actions available using a custom UI, and create custom monitoring and statistics tools.
You can control the server from a WINDEV or WINDEV Mobile application, or from a WEBDEV site.
These are some of the actions that can be automated:
  • Manage WEBDEV accounts: create, delete, list accounts...
  • Manage connections: list connections, disconnect users, get the number of connected users...
  • Manage the nodes of a WEBDEV cluster: start a synchronization, view the status of nodes, etc.
  • Get the errors encountered by the WEBDEV Application Server.
  • ...
Scheduled tasks: restart automatically after a reboot
In version 28, it is no longer necessary to log in each time the server is rebooted or the site is redeployed in order to execute scheduled tasks.
The restart is automatically completed.
Synchronization upon installation of a new site
The WEBDEV cluster automatically synchronizes nodes at regular intervals.
Now, a synchronization is automatically and immediately started when a new site or update is deployed.
This allows for instant availability, regardless of which cluster node is being accessed.
No need to wait for the regular synchronization.
Debian 11
The process for creating Docker images is now based on Debian 11.
This version of Debian includes additional security features.
Reactivate a previous version of a site
In WEBDEV 28, you can reactivate a previously archived version of a site.
You can access a list with the archived versions.
And numerous other features
Version 28 offers many other new features that you will discover once you order and receive your software...
Minimum version required
  • Version 28
Comments
Click [Add] to post a comment

Last update: 06/12/2023

Send a report | Local help