SlyteUI

SlyteUI

Hello everyone!

Welcome to another interesting Kaizen post.

Today’s spotlight is on SlyteUI, the new UI builder designed to create powerful, intuitive user interfaces in minutes. Built for speed and simplicity, SlyteUI empowers teams to deliver high-impact experiences with minimal development effort, while still enabling deep customization through advanced coding capabilities. Click here to view the official SlyteUI announcement. SlyteUI can potentially address a wide range of business use cases and to begin, we’ll start with a quick and impactful example.

In this post, we’ll walk through a practical, real-world use case - Creating and reviewing Orders directly from the Detail page of Deals module.

In this Kaizen post,

1. What is SlyteUI

2. Highlights of SlyteUI

3. Use Case

4. Implementation

5. Summary

6. Related links

1. What is SlyteUI

SlyteUI is a Component builder inside Zoho CRM that makes it much easier to create and embed custom user interfaces, from simple widgets to rich interactive screens within your CRM workspace. It blends the speed and simplicity of low-code with the power and flexibility of pro-code, so you can build useful CRM UI elements faster and smarter.

Currently, components built using SlyteUI are reusable and can be associated across related lists, web tabs, custom buttons, Client Script Containers ( popups, flyouts) and kiosks.

SlyteUI Screenshot 1

When you drag and drop a component onto the Art board in Design Lab, SlyteUI automatically generates synchronized HTML, CSS, and JavaScript files. Any configuration you make in the Design Lab is instantly reflected in the Code Editor, ensuring the visual design and code always stay in sync.

Notes

You can choose to:

1. Build using Design Lab’s low-code visual interface

2. Work directly in the Code Editor

3. Combine both approaches, depending on your comfort level and expertise.

2. Highlights of SlyteUI

  • SlyteUI offers a dedicated IDE with drag-and-drop tools and a code editor.
  • The SlyteUI Components automatically inherit the CRM’s theme, styles, and UI guidelines for visual consistency.
  • It supports real-time data integration through Queries, enables deep CRM interaction using the ZDK client library, and allows event-based communication between components.
  • It also supports externalized variables for dynamic field mapping and advanced capabilities such as data binding, lifecycle hooks, observers, expressions, and helpers. Click here to know more about SlyteUI.

If you are new to SlyteUI, it is recommended to explore the Design Lab and Components documentation first.

3. Use Case

Quote
At Zylker Industries, Sam, a Sales Manager, manages high-value deals and Orders. He needs to create or initiate Orders seamlessly at the time of Deal closure. To prevent duplicate Orders, Sam needs visibility into Orders already linked to the Deal. Navigating across multiple modules slows him down at a critical moment. Sam is looking for a way to create and review Orders from the Detail page of Deals Module.

4. Solution

Solution Diagram

Step - 1. Create a SlyteUI component which toggles between Create Page and List Page

  • Navigate to Setup → Developer Hub → SlyteUI.
  • Click New Component.
  • Enter a name for the component and click Save. The SlyteUI IDE opens.
Create Component

The following video showcases a guided, step-by-step implementation using SlyteUI.

  • Drag and drop the Tabs component onto the Artboard and rename the first tab to Create Order.
  • Drag and drop the Create Page component into the first tab and set Module API name to Orders.
  • Switch to the next tab and rename it to List of Orders.
  • Drag and drop the List View component into this tab and configure Module API name as Orders.
  • Remove any additional tabs that are not required.

Step - 2. Add a custom button named “Orders” on the Deal detail page and configure the SlyteUI component to this button.

  • Navigate to Setup → Customization → Modules and Fields.
  • Select the Deals module, open the Buttons tab, and click Create New Button.
  • Enter the button name, add the SlyteUI component name, and configure the required details as illustrated below.
Button Configuration

Here is how the SlyteUI implementation works.

Implementation GIF

Clicking the button opens a SlyteUI component within the Deal. You can create new Orders or review existing ones without leaving the page. Orders become part of the deal flow, ensuring speed, accuracy, and consistency.

5. Summary

How to create a SlyteUI Component?

How to use components - tabs, List View and Create Page?

How to add SlyteUI component on click of a button?

SlyteUI Overview

Creating your first SlyteUI Component

SlyteUI IDE

Work with Logic and Data

Build Interactive Components





        • Recent Topics

        • Delivery Note without services

          Hi all, It there a possibility to create a delivery note from an invoice without the listed services "idem type: service"? Thank you in advance, Michel

        • Automation Series: Auto-assign Task Followers

          As task progresses, several users are required to stay aware of the updates to plan their upcoming work items efficiently. Manually adding users as followers for an active task might create additional overhead. With this automation, followers can be added

        • Send Email Directly to Channel

          Hi, We are coming from Slack. In Slack each channel has a unique Email address that you can send emails too. I currently forward a specific type of email from my Gmail InBox directly do this channel for Verification Codes so my team doesn't have to ask

        • Terms & Conditions

          I have defined Terms & Conditions in the invoice setting and have set %TermsAndCondition% where I want it to appear but nothing shows up in that area. Is this something we have to define per invoice or can we have a global variable?

        • Billing Status Update

          Hello Latha, I’m working on a new automation (deluge) to fulfill one of our requirements. In this automation, there is a step to update the Work Order billing status from “Not Yet Invoiced” to “Non-Billable.” I tried to find the API information relevant

        • Export to pdf. Images not showing

          My report contains a column with images. When I export it as a list, the images do not show in the PDF document. I have published the report but the images are still not visible. What should I do so that the photos appear in the export?

        • Zoho CRM Kiosk question – Passing Screen Fields to a Function

          I am building a Kiosk in Zoho CRM to create new Supplier (Vendors) records. Current setup: Screen 1 contains user input fields: Supplier Name (Vendor_Name) First Name (First_Name) I created a Deluge function: createSupplier(vendor_name, first_name) The

        • Introducing Custom Columns in Forecasts in Zoho CRM

          Hello all, Forecasts in Zoho CRM help sales representatives, managers, and business stakeholders evaluate performance and plan future sales activities. While standard metrics such as Target, Achieved Amount, and Pipeline Amount provide a baseline view,

        • パスワード

          ログインするためのパスワード取得したい。

        • Associate Zoho Project with Deal that is in a specific stage?

          Hi there, When a deal hits a certain stage, I'd like to associate it with an pre-exisiting zoho project? I am using blueprints. Using a custom function and deluge, how could I do this? I was thinking that the easiest option would be the modify the pre-made

        • [Product Update] Locations module migration in Zoho Books integration with Zoho Analytics

          Dear Customers, As Zoho Books are starting to support an advance version of the Branches/Warehouses module called the Locations module, users who choose to migrate to the Locations module in Zoho Books will also be migrated in Zoho Analytics-Zoho Books

        • Canvases Auto-Skewing/Adding Scroll Bars When They Were Not There Prior

          Is anyone else noticing rendering issues in their canvases today? It seems to be mainly icons which now have scroll bars added which makes them all look off, though some fields seemed to revert to squished length as well. Were the icons replaced with

        • New UI for Writer - Disappointed

          I've been enjoying Zoho Writer as a new user for about 6 months, and I really like it. One of my favorite things about it is the menu bar, which you can hide or leave out while still seeing most of your page because it is off to the left. I think this

        • Client Script Button in Related List become invalid

          Hi, I am the admin of our organization. And I setup a client script button in related list to raise payment refund request While this button become non selectable recently. I believe there is something wrong from zoho as this button had run for a year.

        • SMTP outgoing problem

          Hello I have a website where the SMTP email is connected through Zoho Mail SMTP. Today I am no longer receiving emails from the website. Joomla shows that the email was sent successfully, but I do not receive it.

        • Fiscal year setting

          Hi, I am looking into using Zoho Books. I cannot understand the organisation fiscal year setting. Our fiscal year runs from 1 April to 31 March. In the organisation profile, I need to set Fiscal Year to “April to March” and Start Date to “2” for the period

        • Issue with payments on invoices

          Hello, I’m having the following issue. When I create an invoice and try to apply a partial payment in a single transaction, the system does not allow it — it only allows full payment. Is this the expected behavior, or am I missing some configuration?

        • auto add as member the contact owner

          is there a way that i can make a zoho flow that will add the owner of the contact as a member of the chat after the round robin assignment?

        • Welcome to Zoho CommunitySpaces

          Hello everyone, This is your space to ask questions, share ideas, and connect with others building and growing their own communities. For those new here, Zoho CommunitySpaces is a platform for building and managing online communities—from discussion spaces

        • Announcing new features in Trident for Windows (v.1.20.4.0)

          Hello Community, Trident for Windows is here with some new features to elevate your work experience. Let's take a quick look at what's new. Export emails. You can now export emails in the .eml file format as compressed zipped files to create a secure

        • Announcing new features in Trident for Windows (v1.14.5.0)

          Hello Community, Trident for Windows is here with new features to elevate your workplace productivity. Let's take a quick look at what's new. Add and edit contacts Previously, you could view all of your personal and organizational contacts in Trident.

        • Announcing Trident desktop app for Zoho Mail & Zoho Workplace users

          Hello Community, I hope you are doing well and staying safe. As you know, our Mail & workplace teams have been constantly working on adding more value to our offerings to ensure you and your organization continue enjoying your Zoho experience. As part

        • Quick way to add a field in Chat Window

          I want to add Company Field in chat window to lessen the irrelevant users in sending chat and set them in mind that we are dealing with companies. I request that it will be as easy as possible like just ticking it then typing the label then connecting

        • Please Remove the Confirmation Popup

          Currently, every time a recruiter changes the status of a candidate in Zoho Recruit, a popup confirmation appears that requires clicking “OK, Got it” before proceeding. This creates unnecessary friction in the workflow, especially for users handling high

        • Team Module Issues?

          We are testing Team Licenses for use by our Customer Service staff. I created a Teamspace called CSR and only assigned two users to this space: Administrator (me) and “Team License Test.” Team License Test is assigned to the Team User profile, with a

        • Announcing new features in Trident for Windows (v.1.41.5.0)

          Hello Community! Trident for Windows just received an exciting update with new ways to collaborate and stay organized without leaving your workspace. Let’s take a look at what’s new! Integrate Zoho Meeting with Trident. You can now schedule, start, and

        • Zoho ERP | Product updates | June 2026

          Hello users, We launched Zoho ERP on January 23, and since then, our goal has been to help businesses streamline and manage their operations with greater efficiency, flexibility, and control. Since the launch, we've continued to enhance the platform every

        • Zia Agent activation in Zoho Desk forces new Organization creation instead of deploying to existing one

          While attempting to complete the deployment and activation sequence of a new Zia Agent within our existing Zoho Desk environment, the activation process failed on the user interface, throwing a generic error (see print). However, despite the activation

        • Allow native Webhooks to authenticate via Connections

          Allow native Webhooks to authenticate via Connections (Basic Auth) instead of plaintext custom headers Summary Please allow native Webhooks (Workflow Rules > Instant Actions > Webhooks) to authenticate against the destination endpoint using the existing

        • How do page versions work these days?

          I thought that Zoho Wiki had the capability to display previous versions of a page, and optionally reinstate them. But I can't find a current doc on this subject -- is there one? From what I remember, that capability was accessed via the Version number

        • Price Managment

          I have been in discussions with Zoho for some time and not getting what I need. Maybe someone can help explain the logic behind this for me as I fail to understand. When creating an item, you input a sales rate and purchase rate. These rates are just

        • Warehouse -> Locations Transition Causing Errors

          After saying "okay" to the transition from 'warehouses' to 'locations', I've now got shipped Sales Orders that I cannot invoice. How does one proceed?

        • Problem with the blueprint flow.

          Scenario: 3 departments in a single environment: A-B-C agents from department 1 D-E-F agents from department 2 G-H agents from department 3 Since we've been using Zohodesk (2023), agents can assign tickets to the correct department using the blueprint

        • Introducing the new Zoho Announcements Hub

          Hello, Enterprise Support Community! We are excited to announce a new way to keep up to date with recent product releases and announcements for the Zoho apps you use on a regular basis. Introducing our new centralized location to bring together all Zoho

        • Ability to run report over 180 days

          Is there a reason Zoho limits the ability to run reports for records older than 180 days? In my view, the only reason I can think of is that it forces us to pay for Advanced Analytics (which I do).

        • Cloning a View

          When I clone a View, it doesn't make a copy; it only creates a new copy with the same default fields as if I were creating a new view. What is the purpose of cloning if it doesn't bring in the same fields? Thanks Rudy

        • New tickets with empty image contents

          Dear Support. From the end of last week onwards customers send messages for new tickets through microsoft graph (by email to support at procert.ch using the procert portal). We have an issue with the emails because well packed images are no longer visible.

        • Images not showing up in Desk tickets

          Customers are trying to send us screenshots to diagnose their issues. But Desk seems to be stopping the images/breaking the link when the ticket comes in. (We can see them in an email box getting cc'd on all tickets...so it's not our mail system). Help!

        • Introducing Databridge for Zoho Creator

          Hello, Enterprise Support Community! We'd like to highlight a recent utility that was released for Zoho Creator, that will allow you to connect external, private datasources with your Creator apps, Databridge. Databridge is an application that will need

        • Zoho HTML editor is removing MSO (Outlook) specific code.

          The ability to add in custom HTML is great. We are using MJML to generate our wonderfully cross platform and responsive email code that works on Act-On, Salesforce, Hubspot, Active Campaign, and lead liaison. The way it supports MSO (Outlook) is it included

        • Next Page