挑战
Building Zoho CRM widgets was repetitive and fragmented:
- Each widget required its own project structure, manifest, and build setup
- No shared utilities or components between widgets
- Local development required manual HTTPS server setup for CRM SDK compatibility
- Packaging widgets for deployment involved manual ZIP creation
- Adding new widgets meant duplicating boilerplate from existing projects
我们的解决方案
We built a multi-widget workspace framework with shared utilities, automated scaffolding, local HTTPS development server, and one-command build packaging.
Architecture
- Widget Apps: Individual widget source organized in a shared workspace
- Shared Utilities: Common code accessible by all widgets
- Dev Server: HTTPS server with self-signed certificates for local CRM SDK testing
- Build System: Automated scripts for ZIP packaging per widget
- Scaffolding: CLI tool to generate new widget boilerplate from templates
- Manifest: Centralized manifest for all widget declarations
Development Workflow
- Scaffold — Run the scaffolding tool to generate a new widget with all boilerplate
- Develop — Edit widget HTML/JS with the HTTPS dev server for live testing in CRM sandbox
- Test — Widget loads in CRM sandbox via Zoho Embedded App SDK
- Build — Packaging script creates a deployable ZIP artifact
- Deploy — Upload ZIP to Zoho CRM Extension pipeline
Widget Capabilities
The framework was used to build widgets embedded in various CRM modules, including:
- Button widgets for triggering actions (sending templates, launching workflows)
- Data display widgets showing related records in accordion/list UI
- Integration widgets connecting CRM with external microservices
- Widgets with query capabilities for cross-referencing CRM records
Key Features
- Multi-Widget Workspace — All widgets in a single project with shared dependencies
- Automated Scaffolding — Generate new widgets from templates with one command
- HTTPS Dev Server — Local testing with CRM SDK compatibility
- One-Command Build — Automated ZIP packaging per widget
- Shared Code — Common utilities available to all widgets
- i18n Support — Internationalization integration for multi-language widgets
- Centralized Manifest — Single configuration for all widget metadata
