Client Script support for Canvas Forms
Hello everyone!
Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved using Client Scripts support for Canvas Record Forms.
Welcome back to another interesting Kaizen post! In this post, we can discuss Client Script Support for the new Canvas Record Form.
In this kaizen post,
1. What is a Canvas Record Form?2. Client Script Events for the Canvas record forms3. Supported ZDKs4. Use Case5. Solution6. Summary7. Related Links
1. What is a Canvas Record Form?
Canvas Support for Create, Edit, and Clone Pages is referred to as Canvas Record Forms. With the advent of Canvas Record Forms, you can customize fields and sections of your form and ensure that every interaction with your CRM is efficient. It shifts the paradigm from simple data management to creating a more engaging, intuitive CRM experience. Click here for more details about Canvas Record Forms. Client Script support for these Canvas Record Forms unlocks new customizations like scrolling to a particular section automatically when a product category is selected, display a custom message when an icon or image is clicked, show a flyout or a pop up when a button is clicked in Create/Edit and Clone Pages.
2. Client Script Events available for the record forms
- Mandatory Fields Form
- Canvas button
- Icon
- Text
- Page
- Field
Click here for more details on Client Script Events.
3. Supported ZDKs
In addition to the ZDKs available for the Create/Edit/Clone (Standard) Pages, the following list of additional methods can also be used in Create/Clone and Edit(Canvas) Pages .
- scrollTo() - Make the page scroll to a particular element.
- highlight() - Highlight an element.
- setVisibility() - Hide or show an element.
- addToolTip() - Add tool tip to an element.
- removeToolTip() - Remove tool tip for an element.
- addStyle() - Add styles to an element.
- freeze() - Freeze a particular element.
- setReadOnly() - Make an element read-only
- setContent() - Add content to the text element.
- setImage() - Add an image.
- setActive() - Make an element active.
For more details about these ZDKs, click here.
4. Use Case
Consider Zylker, a manufacturing organization. Their service agents use the Orders module of their CRM to create and manage orders for their customers. They have used the latest Canvas Record Form view for their Create Page as shown below.
Below are their requirements.
A. When the checkbox "Is shipping address same as billing address?" is checked, the Shipping Address section should not be visible.
B. When the user clicks the "Add Dental Products" button, a pop-up should appear showing the Dental Instruments available in the Products module, and the instrument details selected in this pop-up should get inserted as rows in the sub-form.
5. Solution
To accomplish the above requirements on the Create Page(Canvas), you need to create the following two Client Scripts.
A. Client Script with field event on field "Is shipping address same as billing address?"
- Go to Setup > Developer Space > Client Script. Click +New Script.
- Specify the details to create a script and click Next.
- Enter the following script and click Save.
- let elem = ZDK.UI.getElementByID('shipping_address');
- if (value==true)
- {
- elem.setVisibility(false);
- }
- else
- {
- elem.setVisibility(true);
- }
- In the above script, "value" will hold the boolean value which hold the user selection of the check box "is-shipping_same_billing". If it is true, then using setVisibility() you can hide the shipping address section. To fetch the ID of the Shipping Address section, you can use ZDK.UI.getElementByID().
- Here is how the Client Script works.
- When the user marks "Is shipping address same as billing address" true, you can see that the "Shipping Address" section disappears.
B. Client Script with button event on canvas button "Add Dental Products"
- Go to Setup > Developer Space > Client Script. Click +New Script.
- Specify the details to create a script and click Next.
Enter the following script and click Save.
- let products_list = ZDK.Page.getField('Product_List').getValue();
- log(products_list);
- if (products_list.length === 1) { // Clear subform if empty row
- !Object.values(products_list[0]).every(value => !!value) && products_list.pop();
- }
- // Open widget with product category & max. allowed rows based on existing subform data
- let selected_products = ZDK.Client.openPopup({
- api_name: 'Choose_Products', type: 'widget', header: 'Choose Products', animation_type: 1, height: '570px', width: '1359px', left: '280px'
- }, {
- product_category: "Dental Instruments", max_rows: 25 - products_list.length
- });
- log("products selected from widget: ", selected_products);
- // Update Selected Products from the widget Popup
- if (selected_products.length) {
- selected_products.forEach(product => {
- products_list.push({ Product_Name1: { id: product.id, name: product.Product_Name }, Quantity_of_Products: 1, Unit_Price1: product.Unit_Price });
- });
- console.log(products_list);
- ZDK.Page.getField('Product_List').setValue(products_list);
- }
- Whenever the button "Add Dental Products" is clicked, you can open a widget as a pop up using ZDK.Client.openPopup(). The details of user selection in the widget will be fetched in the "selected products" variable. You can iterate and create a list to be populated to the Dental Instruments Section. Then this list of values can be populated with the help of setValue().
- Here is how the Client Script works.
- When the user clicks the "Add Dental Products" button, a widget of button type that shows the list of Instruments appears. This gets displayed by the Canvas Button event of Create Page (Canvas) and the selected records get inserted in the Dental Instruments subform.
- Here, using Client Script, you can instantly add all selected products with a single click, eliminating the need to repeatedly click the "+ Add row" button for each product.
6. Summary
In this post, we have discussed,
- How to hide a section dynamically using Client Script.
- How to open a Widget , fetch the content and populate it to a Canvas page.
7. Related Links
Access your files securely from anywhere
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Maadhari M
Andres
Sticky Posts
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! CommandsKaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using ClientKaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provideExtension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use APIKaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho DataPrep Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho Campaigns Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Transform Numeric Values using st, nd, rd, th or Convert Numerals to Ordinal Form - Deluge
Please Use this sample Code This_Day_Date = zoho.currentdate.toString("dd"); value1 = "th"; if(This_Day_Date.right(1) ="1" && This_Day_Date != "11") { This_Day_Date = This_Day_Date+" "+"st"; } else if ( This_Day_Date.right(1) = "2" && This_Day_Date !=Kaizen #166 - Handling Query Variables in Zoho CRM
Hello, Code Enthusiasts! Welcome to another week of Kaizen! This week, we'll dive into handling variables in Zoho CRM Queries and see how they can be deployed in Kiosk to dynamically retrieve data. This technique is especially useful for integrating dataAutomate User Invitations on Zoho Desk with API
Automate User Invitations on Zoho Desk with API Hello Team, We are excited to announce that you can now automatically invite users to the Zoho Desk portal using the API! ### How It Works For example, when a contact is created in Zoho Desk and you enableIs there a way to add clients who don't have organisation in Zoho Books/Payroll/Expense ?
The Zoho Practice software is only allowing a total of 15 such clients who are not organisations in Zoho Books/Payroll/Expense. i.e. 5 organisation in each of the software by creating a new organization for them and adding the accountant as the adminEmail with attachments saving attachments into Zoho CRM from Zoho Mail
Hi, I get a lot of emails from prospective clients asking if we would bid their project. Those projects usually have many documents associated with them that I link to. I would like to have those documents be saved as an attachment in my Potential or Contact or Account. I don't see a way to do that that isn't multi-step. As of now I do the following: 1.) Open email 2.) If email sender isn't in my Zoho CRM database I enter them creating a Potential 3.) I download the attachment and save it to a differentFixed assets recording
Hello there, I recorded a bill for a vendor contain (Computer) so the PC is a fixed assets, do I need to do a manual journal to include this PC under the fixed assets category (furniture & equipment)? If yes, please take me through the manual journalMulti-Select lookup field has reached its maximum??
Hi there, I want to create a multi-select lookup field in a module but I can't select the model I want the relationship to be with from the list. From the help page on this I see that you can only create a max of 2 relationships per module? Is that true?Zoho Sheet-Pulling in Data
I have a module where we track POs, Bills etc (its easier for us this way). In this PO Module, we have a task related to a Job/Deal and various fields for costs. A Supplier on a Job might have several POs in this module for the job. I want to generateCan't get ZFS file ID of a field via specific module record
I have a `fileupload` field on a custom module that I need to replace the file for but I don't know how to get the ZFS ID from the module record. # Getting the current fileupload GET https://www.zohoapis.eu/crm/v7/<MODULE>/<ID> # Response { data: [{ //Contemplating moving my site from WordPress to Zoho Sites
Hi Everyone, We currently find ourselves in a situation where we ant to review and update our current sites content. We are small business owners, not developers. We currently use a wide range of Zoho products. We sometimes think about the possibility of either moving or just starting from scratch on Zoho Sites. I would like to know if anyone has done this and of course the things that need to be considered. We have spent quite a bit of time getting our current site positioned organically and I guessMultiple Salesperson against an invoice
Hello, Against a particular invoice, we have multiple sales people working. The reason we combine the invoice is becuase we are an exporter and often consolidate cargo for our customer to save them freight costs. How do I capture the contribution of eachAllow a brand to connect multiple facebook pages at the same time
Our company have multiple facebook pages to represent, every branch, right now we can only link one facebook page, so we can only recive messages from one branch. It would be nice to be able to connect all pages.Whatsapp reply not reflected under Tickets for offline agent
Hi, We are encountering a situation where WA response from customer is not reflected under tickets (if the agent handling the case previously is not active due to off day/ MC). The ticket will remain in the offline agent's queue until agent is back toSelect CRM Custom Module in Zoho Creator
I have a custom module added in Zoho CRM that I would like to link in Zoho creator. When I add the Zoho CRM field it does not show the new module. Is this possible? Do i need to change something in CRM to make it accesible in Creator?Send Whatsapp with API including custom placeholders
Is is possible to initiate a session on whatsapp IM channel with a template that includes params (placeholders) that are passed on the API call? This is very usefull to send a Utility message for a transactional notification including an order numberIncrease Round Robin Scheduler Frequency in Zoho Desk
Dear Zoho Desk Team, We hope this message finds you well. We would like to request an enhancement to the Round Robin Scheduler in Zoho Desk to better address ticket assignment efficiency. Current Behavior At present, the Round Robin Scheduler operatesSeparate One-Time Mentions from Ongoing Ticket Following in Zoho Desk
Dear Zoho Desk Support Team, We are writing to request an enhancement to the mention functionality within Zoho Desk. Currently, when an agent is mentioned in a ticket, they receive notifications for all subsequent activity on that ticket, similar to beingMass update Accounts in Zoho Desk
We used the integration feature to bring in all of our accounts from Zoho CRM. While all of the names and links are in place, on the Zoho Desk side the email, phone, website, and address fields are blank. By going into each account I can select "UpdateVivaldi will not open the Zoho Mail app when I click a email link in the browser
I'm running Vivaldi on Arch with the Plasma desktop and have under default applications Zoho Mail set as my default email client. Whenever I click a email link in Vivaldi I get the below when it should be launching Zoho. Any ideas on rectifying this issue?Digital publisher
Kinetic Digital Publisher provides comprehensive digital publishing services, including eBook creation, formatting, cover design, and marketing. We help authors publish and promote their work across online platforms with ease.Time Zone Correction with Daylight Savings Time
Hey, I'm writing a series of reports where the source data is synced from an external source which stores the date/time information in GMT, but I want the reports to be in local time. Now, I understand there is the CONVERT_TZ function which allows meLoad form in iframe without header
I am trying to load a form into an iframe without the header, but I am not having any luck. I am using openUrl() to load the iframe with the form URL and zc_Header set to false, e.g. #Form:Add_Case?zc_Header=false but it is still loading the header. AnyFilter embedded report
How to filter embedded report in a page, below code is not working. dateField => startDate & dateField=< endDate The report should print on page containing records from startDate to endDate. params='zc_Header=true&Service_Date__gte=<%=startDate%>&Service_Date__lte=<%=endDate%>'Creator Simplified #5: Set file upload restrictions in Zoho Creator
Hey Creators, Welcome to the next post in the Creator Simplified series. Today, we’ll explore how to implement file upload restrictions to limit user submissions to specific file types. By implementing an allowed list for file uploads, you can optimizeField Type: Address, Change District/State to Dropdown with picklist??
Using the Address Field type, is there a way to make the District/State field be a dropdown with a picklist so the users can select rather than type the state name every time? I know this can be done if I use a drowdown field for the State (or entire address information), but that isn't as tidy as using the address field type. I apologize if this is a duplicate. I posted this question the other day, or so I though. Can't find that post.cutomized fields are not showing up in zoho creator from zoho crm
We have customized fields in zoho crm under accounts module like "Last production upgrade" --> This field is a date. When created a solution in zoho creator i couldn't find any of the customized fields. Would you please help me on this matter? ThanksHow to Add Bulk Data in Zoho Creator Forms Using Deluge Without Exceeding Execution Time Limit
I have a database form with a column named 'Product Name' containing 8000 values in a Zoho Creator form. In another form named 'Returns Data,' I have a column with the same name, 'Product Name.' How do I add these 8000 values to the 'Returns Data' formOpen New Free Zoho Account
Hi Team, Do you guys offer a free email hosting? I do have a domain already. If yes, what is the process to open the new account? Thanks,554 5.7.1 : Recipient address rejected: user info@intimspace.de does not exist
554 5.7.1 : Адрес получателя отклонен: пользователь info@intimspace.de не существует I can't send an email to Google at info@intimspace.de. An error comes. I entered everything correctly in DNS https://zohomail.tools/#domainDetails/intimspace.de/ALLEmails going back unread
Hi all, When in Zoho mail - when I recieve a new mail it puts back all emails read that day back to unread - I then have to go back through and open all emails I have already read! Gets very annoying... Any idea on the bug fix?Been getting this error, every now and then "Get count limit exceeded, please try again after 3 mins"
it is really annoying.Constraints on Tasks
We have a use case where we have certain fixed date tasks and need to schedule predecessor tasks around these. Predecessor tasks need to be completed with a lag before the fixed date. We should be able to schedule the start and end date for predecessorMoving Project Dependencies Not Moving Precedessors
Most of the time we want to base our start dates around an event that is in the middle of the project template. If I set a bar up at the date we want it, it doesn't move the predecessors up. Is there a way to change this? eg. there is no point startingCan you set task due dates to be "x" days before the milestone?
We have a milestone set as the date of our first event. All of the tasks need to happen in increments prior to the milestone event. Is there a way to configure this without having to set up each task due date? Thanks!Default ticket template in helpcenter
Hello, I have a web form and a ticket template created. How can I make that my default ticket template? If an user clicks New ticket or create a ticket, I want that template to be the default one. Thank you for the time and info.Expanded data-capturing capabilities with enhanced tabular sections
We are thrilled to announce an update to Zoho Recruit that brings even more flexibility and customization to your recruiting process. With the addition of 10 new field types to the tabular sections, you now have the power to enhance your tabular sectionsIntegration of Business Hours in Email Templates
Dear Zoho Desk Team, We would like to propose a feature enhancement to Zoho Desk that would greatly improve the utility of the Business Hours settings and streamline communication with our clients. Feature Request: Integration of Business Hours in EmailAdd Owner to deluge-created module record note
Is it possible to include the "owner" aka "creator", of a Note when creating it via delulge? This sets "superadmin" as the Note creator. I need to override it. notemap = Map(); notemap.put("Parent_Id",program_contact_id); notemap.put("Note_Content",program_contact_data.get('Note'));Blueprint - Field Validation Criteria (During)
When setting validation criteria elsewhere in Zoho, or even workflow criteria etc., there are Is Empty and Isn't Empty options. Within the Field Validation Criteria within Blueprint, those options aren't available. Is there a particular reason for this?Delete Field that is used in a Zoho Flow connection
I'm trying to delete a Field used in a Webhook created by Zoho Flow with CRM Connection and i get the following alert: When going to the alert i get to the following issue, can't edit it since its been deployed by a pluggin But yes i have here the promptedNext Page