Do More with Custom Widgets: Announcing Key Improvements!
Custom Widget updates are rolling in r332. Read more about the runtimes here
Unlock new possibilities and smoother development with the latest enhancements to Tulip Custom Widgets.
Custom Widgets are a powerful way to extend the Tulip platform, serving as a fantastic testing ground for us at Tulip and for our customers to explore new use cases and integrations. They are a key part of our strategy for platform extensibility, helping us pave new paths and deliver more value.
We've been hard at work enhancing Custom Widgets to make them more powerful, easier to use, and better integrated. We're excited to share a wave of improvements focused on smoother API interactions, new device access capabilities, enhanced usability, and overall stability.
Extending Integration Capabilities: Smoother External & Tulip API Access
A core focus of these improvements has been the Custom Widget iFrame Sandbox, significantly enhancing its ability to connect seamlessly with external systems and Tulip APIs. This opens up a world of possibilities for richer, more deeply integrated experiences.
New Runtime Options: Legacy vs. Updated
Custom Widgets now support two runtime environments: Legacy and Updated.
The updated runtime offers enhanced security and performance, especially when dealing with external API calls and a plethora of new device access (as noted below).
New Device Access through Custom Widgets:
Extend your Custom Widgets with direct access to an array of device functionalities:
-
📸 Cameras: Empower widgets to take images for inspections, defect tracking, or visual documentation.
-
🎤 Microphones: Enable audio recording directly within widgets to simplify documentation, capture voice notes, or enhance instructional content.
-
📍 Geolocation: Allow widgets to retrieve user or device location to track assets, provide location-aware information, or enhance logistics workflows.
-
🔌 WebUSB: Capture data directly from a variety of USB devices, bringing more physical-world data into your Tulip applications.
-
📠 WebSerial: Monitor and control serial devices, enabling communication with a wide range of industrial equipment and sensors.
Enhanced Data Persistence for Custom Widgets:
- 💾 Local Storage: Custom widgets can now access local storage for more efficient caching or retention of information across steps.
Enhanced Usability and Developer Experience
We're committed to making Custom Widgets not just more powerful, but also easier to discover, develop, and manage.
Discovering Runtime Information:
From account settings, navigate to the Custom Widgets page.
Click on the row of any custom widget (not the name) to open the information side panel.
Under the name in the information panel, a field will indicate the runtime of the current widget (initially Legacy for existing widgets).
Enabling Cross-domain Runtime:
In the Custom Widget information side panel, click on the 'Edit' link next to the Permissions settings heading.
This will open the permissions settings side panel. For Cross-domain enabled instances, you will see a toggle to change the runtime of the specific custom widget.
When switching from Legacy to Cross-domain, you will be presented with a warning.
After saving changes to Cross-domain runtime, if you reopen the permissions settings, you should see the new Device Access Permissions section.
Editor Experience with Runtimes:
In the Custom Widget editor, a pill next to the widget name will indicate the current runtime (e.g., Legacy or Cross-domain).
For Legacy widgets, a warning will be displayed at the top of the editor page, indicating that you are running a legacy custom widget. This warning will disappear for Cross-domain widgets.
Switching Back to Legacy:
When changing a Cross-domain widget back to Legacy runtime, you will also see a warning.
Improved Discoverability & Navigation: We're making Custom Widgets more visible within the platform and streamlining the journey to manage and edit them. This includes easier ways to access the widget editor and a clearer presentation of widget information.
Simplified Development: Expect a smoother development experience with enhancements like:
* Better autocompletion for widget functions.
* Improved event tracking capabilities within widgets.
* More robust error handling and debugging aids.
User Interface & Workflow Papercuts Resolved: We've addressed various "papercuts" – those small but frustrating UI and workflow issues – to make building and using widgets a more pleasant experience. This includes updates to how widget lists are displayed and how permissions are managed.
Optimized Loading and Performance: We've introduced improvements to the Custom Widget loading mechanism, ensuring better performance and reliability. This includes retry logic for loading cross-domain widgets and clear error messages if access is blocked.
Strategic Impact and What's Next
These investments in Custom Widgets are a testament to our belief in their potential for extensibility. By providing more robust tools and capabilities, we aim to empower our users – whether they are Tulip developers or external developers and customers – to create innovative solutions and address even more specific use cases on the Tulip platform.
We'll be closely tracking the adoption and impact of these new features to continue refining and expanding Custom Widget functionality. Stay tuned for more resources, documentation, and examples to help you make the most of these exciting new capabilities!
Examples
The following custom widgets from the Tulip Library demonstrate the new and improved capabilities highlighted in this article.
Scheduling Widget
This widget enables users to view, create, and manage scheduled tasks or events within a Tulip app. Its interactive interface makes it easy to organize work, assign resources, and track upcoming activities directly in your workflow.
Image Annotation Widget
This widget allows users to draw, highlight, and add notes directly on images within a Tulip app. It is ideal for marking up visuals, providing feedback, or documenting issues right on the relevant images.
