# Zoho CRM Developer Space (dx-hub) > The official developer documentation portal for Zoho CRM's platform tools. Provides interactive API references, code samples, and component documentation for Widgets SDK, Client Script (Event Dictionary, Client API, Web API, ZRC), SlyteUI (UI Components, CRM Components, Build Components), and more. ## Site Info - **URL**: https://www.zohocrm.dev - **Sitemap**: https://www.zohocrm.dev/sitemap.xml - **Content Type**: Developer documentation, API references, code samples, FAQs - **Publisher**: Zoho Corporation (https://www.zoho.com) ## Key Documentation Sections ### Widgets SDK (JS SDK) - URL: /explore/widgets - Versions: v1.5 (latest), v1.4, v1.3, v1.2, v1.1, v1.0.5 - Topics: ZOHO.CRM.API, ZOHO.CRM.UI, ZOHO.CRM.HTTP, ZOHO.CRM.CONFIG, ZOHO.CRM.META, ZOHO.CRM.FUNCTIONS, ZOHO.CRM.EVENTS, ZOHO.CRM.CONNECTOR, ZOHO.CRM.CONNECTION, ZOHO.CRM.WIZARD, ZOHO.CRM.BLUEPRINT, ZDK.Client ### Client Script - URL: /explore/client-script - Sub-sections: - Event Dictionary (/explore/client-script/event-dictionary) — CRM page events for Standard, Canvas, and Wizard views - Client API (/explore/client-script/clientapi) — ZDK.Page, ZDK.Client, ZDK.HTTP, ZDK.UI, and Object references (Field, Form, Button, etc.) - Web API (/explore/client-script/webapi) — ZDK.Apps.CRM (Modules, Records, Users, Org, Functions, Connections, Settings) - ZRC (/explore/client-script/zrc) — REST Client documentation ### SlyteUI - URL: /explore/slyteui - Sub-sections: - Build Components (/explore/slyteui/build-components) — How to build with SlyteUI: data, queries, helpers, lifecycle, observers, interactions - UI Components (/explore/slyteui/ui-components) — 50+ components: Input, Button, Dropdown, Calendar, Modal, Table, Tree, Chart, etc. - CRM Components (/explore/slyteui/crm-components) — CRM-specific: Field, ListView, DetailView, CreateForm, RelatedList, CriteriaEditor ## Tech Stack - **Core Framework**: Lyte (`@zoho/lyte` 3.7.0) — Zoho's proprietary SPA framework with routing, components, mixins, and helpers - **DOM Library**: `@zoho/lyte-dom` (jQuery-like `$L()` API) - **UI Components**: `@zoho/lyte-ui-component` 3.116.x (accordion, dropdown, modal, etc.) - **CRM Components**: `@zohocrm/crux-components` (CRM-specific UI: alerts, modals, hovercards) - **Doc App**: `@zoho/slyte-doc-app` (SlyteUI documentation renderer, v4) - **Editor**: `@zoho/lyte-editor` (code editor widget) - **Markdown Rendering**: `marked` 9.1.6 - **Build CLI**: `@zoho/lyte-cli` 3.6.14 - **Other**: TypeScript 4.9.5, JSDoc 3.6.11, unzipper ## Architecture ### Routing (Lyte Router — HTML5 History) Routes are defined in `router.js` and handlers live under `routes/`: - `/` → `index` route → redirects to `/explore` - `/explore` → `explore.home` → landing page with feature cards - `/explore/:feature_name` → documentation viewer for a specific feature - `/explore/:feature_name/codesamples/:cs` → code samples for a feature - `/explore/:feature_name/faqs/:fs` → FAQs for a feature - `/explore/:feature_name/:sub_feature_name/:feature_heading/:comp_tab` → nested doc navigation - `/*wildcard` → error page (404) ### Component System (Lyte.Component) Components follow the `Lyte.Component.register("name", { ... })` pattern: - **JavaScript**: `components/javascript/dxh-*.js` — component logic (data, init, didConnect, actions, methods) - **Templates**: `components/templates/dxh-*.html` — matching HTML templates - **Helpers**: `components/helpers/dxhhelpers.js` — template helpers (parameter checking, markdown parsing, link resolution, version comparison) - **Styles**: `components/styles/*.css` — component-scoped CSS ### Data Flow 1. Route transitions trigger `model()` hooks that call mixin methods (e.g., `fetchResource()`) 2. The `dxh-mixin` (`mixins/dxh-mixin.js`) is the central data layer — preprocesses JSON data stores, resolves versioned SDK docs, constructs left panels & search metadata 3. JSON data stores in `dxh-data-store/` provide raw documentation content 4. `FileUtils.js` handles fingerprinted asset resolution for production vs. dev 5. `SLOT.js` is the SlyteUI resource loader — manages script/CSS injection and deduplication ## Key Files - `index.html`: Main entry point, loads SlyteUI v4, Lyte framework, and all base resources - `router.js`: Route definitions and transition hooks (Lyte.Router) - `SLOT.js`: SlyteUI resource loader — handles script/CSS injection, deduplication, path resolution - `package.json`: Dependencies and addon configuration - `javascript/DxhubUtils.js`: Global `commonUtils` — loader show/hide utility - `javascript/FileUtils.js`: Fingerprinted asset resolution for production vs. dev environments - `mixins/dxh-mixin.js`: Central data layer mixin (1268 lines) — preprocesses data stores, resolves versions, builds nav/search - `components/helpers/dxhhelpers.js`: Lyte template helpers for the doc UI - `components/helpers/crm-ui-interaction.js`: CRM UI interaction handlers (tab, checkbox, dropdown, modal animations) - `build/build.js`: Build script (979 lines) using `@zoho/lyte-cli` — outputs to `dist/`, supports fingerprinting, LESS compilation, ES6→ES5 ## Components (28 total) - `dxh-landing-page-new`: Homepage — feature cards for Widgets, Client Script, Server Script, etc. - `dxh-landing-nav`: Top navigation bar - `dxh-doctype`: Main documentation viewer — left nav, content area, search, versioning - `dxh-doctype-content`: Right-side content renderer with scrollspy for method navigation - `dxh-left-component`: Left sidebar navigation for doc sections - `dxh-core-component`: Lyte/Crux/CRM component docs via embedded iframes - `dxh-event-dictionary`: Event dictionary browser - `dxh-event-dictionary-content`: Event dictionary content renderer - `dxh-code-samples`: Code sample viewer - `dxh-faq`: FAQ section - `dxh-slyteui` / `dxh-slyteui-content`: SlyteUI component documentation - `dxh-zrc` / `dxh-zrc-content`: ZRC (REST Client) documentation - `dxh-iframe-content`: Iframe-embedded external doc viewer - `dxh-static-component`: Static content renderer - `dxh-crmpack-component`: CRM pack component viewer - `dxh-navtab-component`: Navigation tab component - `dxh-page-header`: Page header - `dxh-error-page`: 404/error display - `dxh-modals`: Modal dialogs - `dxh-image`, `dxh-label`, `dxh-link`, `dxh-span`: Atomic UI elements - `dxh-missing-component`: Fallback for missing components - `dxh-main-home`: Main home wrapper - `dxh-componentsmain-component`: Components main wrapper ## Data Store (`dxh-data-store/`) JSON files providing documentation content: - `explore-features.json`: Master feature list — titles, descriptions, sub-features, availability flags, external links - `components-configuration.json`: UI component registry — component names, search keywords, CSS tab flags, property overrides, source paths - `slyte-components-configuration.json`: SlyteUI component config - `client-api.json`: Client Script API documentation - `web-api.json`: Web API documentation - `jssdk.json`: JavaScript SDK docs - `widget-sdk-*.json`: Widget SDK docs per version (1.0.3.1 → 1.5) - `widget-changelog.json`: Widget SDK changelog - `event-dictionary.json` / `event-dictionary-new.json`: CRM event definitions - `zrc.json` / `zrc-widget.json`: ZRC REST client docs - `faqss.json`: FAQ data - `modified_zdk.json`: Modified ZDK reference - `filtered-widget-sdk.json`: Filtered widget SDK subset ## Build System Defined in `build/build.js` using `@zoho/lyte-cli`: - Output folder: `dist/` - Features: source maps, fingerprint-based cache busting, LESS → CSS theme compilation - Supports ES6→ES5 transpilation, file consolidation, minification - Supporting config: `build/feature-css-list.json`, `build/feature-js-list.json` - Distribution script: `build/create_dist.sh` - Ant properties: `build/ant.properties` ## Directory Structure ``` dx-hub/ ├── index.html # Main entry point ├── router.js # Route definitions (Lyte Router) ├── SLOT.js # SlyteUI resource loader ├── package.json # Dependencies and config ├── build/ # Build scripts and config │ ├── build.js # Main build script │ ├── create_dist.sh # Distribution shell script │ ├── feature-css-list.json # CSS feature manifest │ └── feature-js-list.json # JS feature manifest ├── components/ # Lyte components │ ├── javascript/ # Component JS (Lyte.Component.register) │ ├── templates/ # Component HTML templates │ ├── styles/ # Component CSS │ └── helpers/ # Template helpers and UI interaction handlers ├── css/ # Global styles (LESS, resets, fonts) │ ├── crm-styles/ # CRM-specific styles │ └── less-config/ # LESS configuration ├── dxh-data-store/ # JSON documentation data stores ├── javascript/ # Global utility scripts │ ├── DxhubUtils.js # Loader utilities │ └── FileUtils.js # Fingerprint/asset resolution ├── mixins/ # Lyte mixins │ └── dxh-mixin.js # Central data processing mixin ├── routes/ # Route handlers │ ├── index.js # Index route │ ├── explore.js # Explore route + sub-routes │ ├── error.js # Error route │ └── explore/ # Nested explore route handlers ├── crm_dxhub_resources/ # CRM-specific resources (client scripts, widgets) ├── devex/ # Developer experience resources ├── fonts/ # Font files ├── images/ # Image assets └── utils/ # Utility scripts └── zdk_updater.js # ZDK data updater ``` ## Conventions - Components are registered with `Lyte.Component.register("dxh-component-name", { ... })` - Helpers are registered with `Lyte.Component.registerHelper("helperName", function() { ... })` - Mixins are registered with `Lyte.Mixin.register("mixin-name", { ... })` - Routes are registered with `Lyte.Router.registerRoute("route-name", { ... })` - Template syntax uses Lyte's `