SlyteUI in Zoho CRM: build your own screens inside the CRM
Before a quote goes out, a sales manager usually wants to know one thing: how much profit is in it? The quote page in Zoho CRM only shows selling prices, and products have no cost field by default. To see the profit, someone has to look up costs elsewhere and work it out again in Excel.
SlyteUI is made for this kind of job. In this post, Optimus explains what SlyteUI is, walks through its main features, and builds a screen that shows the profit on each quote, right inside the CRM.
I. INTRODUCTION
SlyteUI is a tool for building your own screens (Zoho calls them components) inside Zoho CRM. A component is added to CRM pages; it does not replace the standard layout. Simple components are built by drag and drop; calculations or writing CRM data need JavaScript.
Available in every Zoho data center since May 2026.
Included in the Enterprise and Ultimate editions, and in Zoho CRM Plus.
Whoever builds components needs the "Manage Extensibility" developer permission.
Location: Setup › Developer Hub › SlyteUI.
II. THE PROBLEM
Standard Zoho CRM layouts and formula fields struggle with needs like these:
Calculations across modules, such as using the cost in Products to work out the profit on a Quote.
A summary screen tailored to one role.
A data entry form that follows your own process and brings several modules together.
Before SlyteUI, a custom screen meant a Widget: a small app a developer builds outside the CRM, then packages and uploads, and must upload again after every change.
III. HOW SLYTEUI SOLVES IT
Building, reviewing, publishing and placing a component are done in Setup, with no outside tools.
Build: drag and drop in Design Lab, or write HTML, CSS and JavaScript in the code editor. The two views stay in sync.
Review and publish: compare changes and add a change note. The CRM keeps the last 30 versions.
Place it in the CRM: a custom button, related list or web tab; a popup or flyout opened by a Client Script; or a kiosk, a guided step-by-step screen.
Users open it: the component appears right inside the CRM page.
IV. BASIC FEATURES
1. Create a component from a blank page or a template
Enter a name, an API name and a description, then start blank or from a template: a campaign details form, a product catalogue, or customer ticket management.
2. Design Lab
Drag and drop from more than 60 interface elements (tables, inputs, date and time, sliders, checkboxes and more). Click an element to edit its properties in the right-hand panel.
3. Queries
Fetch data from CRM modules, from COQL queries, or from third-party applications through REST APIs, then bind the results to elements.
4. Code editor
Write HTML, CSS and JavaScript directly, with code suggestions. Built-in libraries let you call CRM APIs and show messages to the user.
5. Review, publish and version history
Before publishing, SlyteUI shows what changed compared with the live version. Each release carries a change note.
Version history lets you compare any two versions.
V. EXAMPLE: PROFIT ON A QUOTE, RIGHT IN THE CRM
The request: a salesperson opens a quote, clicks one button, and sees revenue, cost, gross profit and profit margin for every line. Lines below a 35% margin are highlighted so the manager can review them.
In this example, revenue is the line amount after discount, before VAT. Profit margin is calculated on revenue: gross profit divided by revenue.
Step 1. Add the fields you need. Create a "Cost Price" field (currency) in Products, and two fields in Quotes: "Gross Profit" (currency) and "Profit Margin" (percent).
Step 2. Build the "Quote Profit" component. It does four things:
Reads the product lines of the open quote.
Looks up each product's cost price.
Calculates gross profit and margin for each line and for the whole quote.
Writes the results to the two fields from Step 1 when you click Save to quote.
The code is not covered in detail here. Contact Optimus if you need a similar screen built.
Step 3. Attach it to a button on the quote page. Go to Setup › Customization › Modules and Fields › Quotes › Buttons, create a new button, choose the action Open a SlyteUI Component and pick the component.
Step 4. Use it. The "Quote Profit" button appears at the top of the quote page.
One click shows it all: revenue 112,500,000 VND, cost 74,500,000 VND, gross profit 38,000,000 VND, margin 33.8%, below the 35% target. The two lines below 35% are highlighted.
Save to quote writes the gross profit and margin to the quote, so you can filter or report by margin.
Things to keep in mind:
Cost and profit are sensitive. Keep Cost Price, Gross Profit and Profit Margin out of quote and email templates, and hide them from portal users. Set field permissions by profile, give the button only to the profiles that need it, and test with an account for each role before going live.
Saved numbers can go stale. They change only when someone clicks Save. Don't base quote approvals on them unless a workflow calls a function to recalculate them.
VI. OTHER USE CASES
Screens Optimus has built with SlyteUI in a demo CRM:
Pinned notes: show important notes at the top of a record so the whole team sees them.
Related list filters: filter a related list by status, owner or date range.
Long subforms: view them in a wide table with sorting and search.
Account emails: bring the emails of every contact in an account together in one place.
VII. CONCLUSION
SlyteUI lets you build screens around your own process right in Setup, with no packaging as with a Widget. Calculations still need someone who knows JavaScript, and you should check who can see and change data before staff start using it.
FREQUENTLY ASKED QUESTIONS
We already use Widgets. Should we move to SlyteUI?
No need to switch if your Widgets work well. For new needs, SlyteUI saves the package-and-upload step because you build and change it in Setup. Widgets still make sense when you already have a web app to embed, or when your edition does not include SlyteUI.
Does it work in the Standard or Professional edition?
No. SlyteUI is only in the Enterprise and Ultimate editions, and in Zoho CRM Plus.
Can portal users see components?
Not by default. Portal users see a component only when you place it where portals are supported and give them access. The saved cost and profit fields still need hiding from portal users, as in section V.
Optimus is a Zoho Authorized Partner in Vietnam. Contact contact@optimus.vn for help choosing and implementing Zoho CRM and SlyteUI.
Comments