We’re excited to announce the release of version 9.0 of our Visual Scheduling Widget Standard Edition (VSW SE) for HTML5 Gantt charts. This major update brings full support for ESM and TypeScript environments, making it easier than ever to integrate the widget into modern development setups.
Beyond extending core functionalities - such as enhanced tooltips and bars - we’ve focused on boosting usability and developer experience. That’s why version 9.0 comes with a brand-new collection of step-by-step tutorials for smoother implementation, as well as a knowledge base integrated with ChatGPT to help you get answers even faster.
Dive in and discover what’s new in VSW SE 9.0!
The libraries containing VSW are now provided in an ESM flavor additionally.
ESM (ECMAScript Modules) is the modern JavaScript standard for importing and exporting code using the import and export keywords. Additionally, the use of global variables is not possible. ESM works seamlessly with all modern browsers and allows parallel loading for better performance.
ESM applications can now include the libraries for VSW by import statements. This flavor also removes the need for including CSS files. It is also possible to use the ESM flavor within a bundler like Webpack, as it was and is with the UMD variant. An ESM variant of the sample application is provided to show the ESM flavor in action.
Additionally, TypeScript type definitions are provided for VSW from now on. To show its usage, these are used by a new TypeScript ESM variant of the sample application. All three sample applications show the same data and are based on the same code, so you also compare the code differences between the variants.
Date lines can now display tooltips, allowing additional information beyond what is shown in the date line caption. Since tooltips can be formatted with a TooltipTemplate object, there are extensive possibilities for customizing and presenting the data stored in the DateLine object.
The previous version introduced the option to define separate tooltips for the constraint symbols, the baseline symbols, and the baseline bar, as well as for the outside texts of allocation and activity bars when implementing a specific callback handler. These tooltips can now also be defined statically via TooltipTemplate objects referenced by activity and allocation objects.
In a typical web application, the data is stored on a server or in the cloud. The web client retrieves this data and displays it to the user. For interactions, data also must be sent back to the server. To help developers interpret the result when the user drops a bar, a date line, or a table row at a new position, the callback arguments for the callback onDrop now include the property proposedMethodCalls. This is an improvement over using the method processOnDrop, since it helps to process the action also in the back end of the application. The application interprets the proposed update method that contains only a differential object with the properties that need to be changed. This works consistently for all drag-and-drop actions.
When auto-scrolling is active while dragging a bar, row, or date row, the active areas at the edges of the view are now divided into four zones: the closer the user drags the object to the edge, the faster the view scrolls. Now the user can also leave the view with the cursor without stopping auto-scrolling. This allows the desired drop position to be found more quickly than before.
To help developers understand key principles of VSW - such as using the API and supporting user interaction - we have created a collection of tutorial examples. Each tutorial focuses on a specific aspect, making it a more practical reference for implementers than the current sample application, which combines many features into only two datasets. The tutorial collection is still a work in progress and will be extended with each release.
As part of our ongoing efforts to extend and improve the documentation, we are excited to introduce an experimental knowledge base for VSW, powered by ChatGPT. To use it, you need your own ChatGPT account, available free of charge from OpenAI. With a ChatGPT Plus subscription, your results will be even better because you gain access to more powerful models that understand context more deeply. This makes a real difference when working with examples, as ChatGPT can not only illustrate concepts more effectively but also generate simple applications for you using VSW. By following the provided URL, you can ask ChatGPT about anything related to the API or the general use of VSW.
More fluent interactions on the timescale
The arrow buttons in the timescale now adjust the time resolution or time range on the DOM event pointerdown instead of pointerup, allowing continuous changes by holding the pointer down.
Narrowing the time range for PDF documents
With the new start and end options, the saveAsPDF method lets you restrict the time range in the exported PDF.
Extension of color options
The new option calendarGridWeekendColor shows an overlaid rectangle on all weekends. It is recommended to use a color with high transparency here. The option selectionColor now also affects the phantom element used in row drag & drop.
Easier version check
The new static version strings vswVersion and nwafVersion make it possible to read the version number without the instantiation of the widget.
Fixed bugs
As always, several bugs reported by customers and our team have been fixed.