The Cumulocity IoT platform continues to evolve with enhancements to its visualization capabilities. The Enhanced HTML Widget is now available in public preview, delivering a complete architectural overhaul that transforms how you create and manage custom dashboard components. This comprehensive upgrade introduces Angular migration, live preview capabilities, and revolutionary AI-powered widget generation (in private preview), all while maintaining full backward compatibility with your existing widgets.
Whether you’re streamlining existing widget development workflows or exploring the frontier of AI-assisted dashboard creation, this enhancement bridges the gap between technical capability and creative vision, setting the foundation for next-generation IoT visualization development.
What’s New
Public Preview: Enhanced Development Experience
The Enhanced HTML Widget is now available in public preview. The new version brings several key features to elevate the development experience:
Live Preview & Advanced Code Editor
The new widget editor transforms your development experience by providing a full-fledged development environment directly within the Cumulocity platform. This eliminates the traditional develop-deploy-test cycle, enabling rapid iteration with immediate visual feedback.
Key features of the enhanced editor include:
- Real-time updates: Changes appear instantly in the live preview panel
- Syntax highlighting: Professional code editing with comprehensive error detection
- Undo/Redo functionality: Quickly revert or apply changes during development sessions
- Integrated syntax checker: Immediate feedback on code errors and syntax issues
This modernized development environment aligns with industry-standard practices while maintaining seamless integration with Cumulocity’s application configuration capabilities.
Angular Migration: Performance & Modern Architecture
The complete migration from AngularJS to Angular delivers significant performance improvements and strengthens security while expanding development possibilities. This architectural modernization provides:
- Enhanced performance: Faster, more efficient rendering capabilities
- Stronger security: Isolated scopes and comprehensive XSS protection
- Extended API access: Deeper integration with Cumulocity platform APIs
- Future-ready foundation: Support for advanced capabilities including AI-powered widgets
- Comprehensive security framework: Custom widgets remain secure without functionality limitations
Web Component Development
The enhanced widget now supports encapsulated, reusable UI elements through web component development. This modern approach enables:
- Developer mode for advanced component creation and testing
- CSS encapsulation preventing style conflicts with platform CSS
- Component reusability across multiple dashboards and applications
- Modern development patterns using JavaScript template literals and ES6+ features
These capabilities integrate seamlessly with Cumulocity’s existing web libraries
With this migration, the HTML widget has been made extensible and can now include separate configuration tabs tailored to your specific use case. For example, you can introduce your own plugins to hook into templates within the HTML widget.
This extensibility has been leveraged alongside the AI Agent Manager to create a plugin that brings AI capabilities to the enhanced HTML widget.
Private Preview: AI-Enabled Widget Generation
The most revolutionary addition is the AI-driven widget generation capability, currently available in private preview. This feature fundamentally transforms widget creation by enabling natural language interaction with intelligent automation systems.
Natural Language to Working Code
Instead of writing HTML, CSS, and JavaScript, users can describe requirements in natural language. The AI system:
- Interprets natural language prompts to understand functional requirements
- Generates responsive HTML widgets tailored to your specifications
- Integrates seamlessly with existing Cumulocity APIs and data sources
- Creates production-ready code following platform best practices and security guidelines
Iterative Development Through Conversation
The AI system supports a conversational development process:
- Initial creation: Describe your widget concept in simple, natural language
- Refinement: Modify outputs through follow-up conversational prompts
- Direct editing: Switch seamlessly between AI assistance and manual code editing
- Dashboard integration: Add generated widgets directly to existing dashboards
Example Widgets generated using AI
Consider these real-world scenarios where AI-powered generation excels:
Energy Management Dashboard:
Text Prompt: “Create an energy consumption comparison widget showing monthly usage for the last 6 months with a bar chart”
Asset Monitoring Visualization:
Text Prompt: “Build a widget displaying device status with color-coded indicators and real-time temperature readings”
Operational Analytics:
Text Prompt: “Generate a widget showing alarm trends over time with filtering by severity level”
Each prompt results in a fully functional, responsive widget integrated with device data.
AI Agent Manager Framework
The AI-powered widget generation utilizes a comprehensive AI Agent Manager framework, currently in private preview. This framework enables you to:
- Orchestrate AI Agents across different platform functions
- Utilize AI capabilities beyond widget generation throughout the platform
- Customize AI behavior to align with your specific operational requirements
This framework represents a foundational shift toward intelligent automation within the Cumulocity ecosystem.
Live Demo :
Ready to transform your dashboard development experience?
Enabling Public Preview Features
To activate the Enhanced HTML Widget in public preview:
- Navigate to User Settings in right navigation in your Cumulocity interface
- Access the Preview Features panel in the right drawer
- Toggle on “Enhanced HTML Widget”
- Save your settings and refresh the application
Read more about the managing preview feature here in the Cumulocity documentation.
Accessing Private Preview (AI Features)
The AI-enabled widget generation requires private preview access. To explore these cutting-edge capabilities:
- Contact your Customer Success Manager (CSM) for early access evaluation of AI Widget Plugin (which also utilised AI Agent Manager framework)
- Discuss specific use cases to ensure AI capabilities align with your operational needs
- Participate in validation to help shape the final implementation
