In the 8.2 release, we made significant improvements to our Mashup visualization platform with the new Collection widget and CSS Editor. With these two new features, you can now create compelling and modern new web UIs with ThingWorx.
Collection Widget
The Collection widget is a new powerful tool which allows you to replicate visual content in a Mashup quickly. The widget is flexible enough for innumerable uses including menu systems, dashboards, tables, and other layouts. The Collection is a significant improvement over the existing Repeater widget in terms of its performance, browser memory usage, configurability, style and user experience.
There are over 60 different configuration properties for the Collection, many of which offer input and/or output bindings for dynamic behavior and flexibility. There are many other properties which offer detailed control over spacing, padding, headers, footers, sections, animation, gravity, layout and more. There are also hooks for adding click menus to the collection’s cells. The data for the collections are sourced via InfoTable, can be comprised of both IoT data (e.g. property values, alerts) as well as UI infrastructure (e.g. which mashup to load or how to group them into sections).
Collection widgets in action for a Mashup application (highlighted in green)
CSS Editor
We now also offer incredible styling and UX power within Mashup Builder with our new CSS Editor. You’ll now see a new editor in the Next Gen Composer called CSS Editor which allows you to write classes and CSS for your mashups, masters and widgets. Advanced styling, animations, and responsive behaviors are all now unleashed for the developer.
CSS Editor for Mashups in the Next Generation Composer
The new editor experience is similar to our other service editors in Next Gen Composer. Syntax highlighting, CSS linting and code completion with CTRL-SPACE key commands are available to assist in the editing experience. We also support sharing of styles across mashups or applications in the platform through importing of CSS files via the File Repository. This greatly reduces the copy-paste effort and also allows for a more scalable and maintainable codebase. Many of our OOTB widgets offer the CustomCSS property where you can statically attach CSS classes defined in your Mashup CSS. You can also bind this property to other expression widgets or service outputs to change classes and styles dynamically at runtime, which makes for some very interesting possibilities.
To exhibit the power of these new features in 8.2, we have built a few sample apps. There will be a simple Weather demo app embedded in the 8.2 ThingWorx Samples directory which shows some simple usage patterns and techniques to help understand these new features. In addition, we have a fantastic showcase application which implements many advanced styling techniques and widget uses that our PTC team has collected to share with our developer community. We also have a recorded demo video which runs the showcase app and describes some of our new capability.
Please reach out to me with feedback, and please show us some of the cool apps you are building with our latest functionality!
