SlyteUI in Zoho CRM
Create flexible, custom components and pages in Zoho CRM with ease - adhering to global web design standards,along with real-time data integration offering a rapid development model.

Table of Contents

  1.   What is SlyteUI?

  2.   Associating SlyteUI components

    1.   Custom Button

    2.   Related List

    3.   Web tab

    4.   Client Script containers - Popup, Flyout and Callout

       

1. What is SlyteUI?

SlyteUI is a robust development platform for Zoho CRM, featuring a set of reusable front-end elements that streamline customization, reduce complexity, and enhance your CRM’s functionality. Built on Zoho’s Slyte Framework, it enables users to build and deploy powerful, custom components and pages with ease. Easily tailor your CRM, unlock advanced features beyond its default capabilities, and maintain a cohesive user experience - all while streamlining development. Whether using low-code for quick implementation or pro-code for deeper customization, SlyteUI empowers you to build faster, smarter, and more efficiently.
 

2. Associating SlyteUI components

Once created, SlyteUI components can be associated and reused across various association areas within Zoho CRM, such as:

  • Related List
  • Web Tabs
  • Custom Buttons
  • Client Script containers like Popup, Flyout, Callout
  • Kiosk

3. Pre-requisites

  • SlyteUI is available in the Enterprise and Ultimate editions of Zoho CRM.
  • Enable Developer Permissions - Manage Extensibility for the profile to access SlyteUI. To enable the Developer Permissions, go to Setup > Security Control > Profiles > select the Profile and enable Developer Permissions and Manage Extensibility 

4. Low code + Pro code platform with an exclusive IDE

SlyteUI Components can be built using this hybrid platform, which supports both low-code (for rapid prototyping and development) and pro-code (for advanced capabilities and traditional programming) development approaches. An IDE with Design Lab and Editor support is provided to facilitate effortless component creation.


 At the core of this experience is the exclusive SlyteUI IDE, designed to support both low-code and pro-code workflows. Its key features include:

  • Design Lab: A drag-and-drop interface with ready-to-use Slyte Web Components and CRM Web Components, with customizable properties, CSS styling, auto layout options, event handling, and integrated queries.
     
  • Pro code editor: Write advanced logic with support for syntax highlighting and IntelliSense.
     
  • Code review: Review and validate changes before publishing.
     
  • Version and file History: Version History maintains up to 30 published component versions, helping you track and compare changes across versions.
    File History lets you compare individual file changes between versions for easier tracking.
     

5. Style, theme, and guidelines Inheritance

The CRM theme and UI styles are automatically inherited by the components, ensuring a consistent look and feel without requiring manual adjustments. This eliminates the need for maintenance, as the components seamlessly adapt to the CRM’s design.
 

6. Real-Time data integration with Queries

Users can query and utilize CRM data or any third-party data directly within their SlyteUI Components as needed. This enhances the functionality of these components, enabling advanced data fetching to be accomplished with minimal or no coding.

7. ZDK Library support for enhanced CRM control

You can utilize the ZDK Client Library, which is the same library used in Client Script, to achieve your desired functionality within Components. This library provides a set of Client APIs that enable seamless interactions with various elements in CRM. Click here for more details.

8. Component-to-Component event communication using Pub/Sub

You can easily enable event-driven communication between components on the same page using the Publish/Subscribe (Pub/Sub) support. Simply add an event listener to one component and trigger events from another, allowing seamless interaction and real-time updates across components.

9. Externalizing variables for field mapping during association

When you associate a SlyteUI component with a related list or custom button, you can dynamically pass external data (module-related or custom) during the association process, enabling greater flexibility and customization.
 

Note: Variable support is currently unavailable for Components when associated with Web Tabs.   

10. Slyte framework offerings

Slyte is a powerful front-end framework that enables extensive customization within Zoho CRM. Here's what the framework offers:

  • Data Binding: Keep your UI and data in perfect harmony with dynamic two-way data binding.
  • Conditionals and Repeatables - Design Control: Render components dynamically and optimize performance using Conditionals and Repeatables—ensuring clean, efficient design control.
  • Component-to-component control: Easily control one component from another for smoother, more dynamic interactions. Click here for more details.
  • Component Life Cycle: Define dynamic behaviors at each stage of a component’s lifecycle - on render, connect, or removal - for smarter and more responsive interactions.
  • Observers: Monitor data changes and trigger actions automatically on component load or when data is updated.
  • CRM Accessibility Inheritance: SlyteUI components seamlessly inherit CRM accessibility features, ensuring an inclusive user experience.
  • Expression Evaluation: Add dynamic logic to your components by writing and evaluating expressions directly within mustache syntax {{ }}.
  • Helpers: Perform calculations and manage simple logic within templates using Helpers.