Rich Text Notes in Zoho CRM : Solved via Custom Widget (Workaround)

Rich Text Notes in Zoho CRM : Solved via Custom Widget (Workaround)

Hi All Zoho Users & Developers

I am creating this post as a starting the discussion on the Rich Text notes feature in Zoho CRM. Seems this is been open for more than seven years. We, our team has developed a simple workaround via widgets.

Problem:

Despite being introduced in 2005, Zoho CRM still lacks a Rich Text notes feature. Integrating this functionality could significantly enhance usability and productivity for users. Given the importance of comprehensive and visually appealing notes in managing customer relationships, it's surprising this feature hasn't been implemented yet. Its addition could further strengthen Zoho CRM's position in the market.


Innovatively, despite Zoho CRM lacking a native Rich Text notes feature, our team has devised a workaround by creating a widget that serves this purpose. This widget fills a crucial gap, empowering users to format text, embed images, and enhance their notes within the CRM platform itself. This solution showcases our commitment to enhancing user experience and addressing their needs proactively. By integrating this widget seamlessly into Zoho CRM, we're bridging the functionality gap and offering users a comprehensive solution for managing customer relationships effectively.

Solution:

Our team has tried developing a workaround by creating a widget that serves this purpose. We believe, this widget will fill a crucial gap atleast for now , empowering users to format text, embed images, and enhance their notes within the CRM platform itself.  We still believe there is a lot of improvements to meeting the use case. We call fellow developers to come up with the improvement ideas and suggestions.

Steps to archive this:

1.Node JS Installation LINK

2. Zoho Extension toolkit cli Installation (zet) LINK

3.Creating CRM widget in your local machine (CLI commands)

4. Folder Structure as follows

5. Code for "widget.html"

  2. <!DOCTYPE html>
  3. <html lang="en">

  5. <head>
  6.   <meta charset="UTF-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>To-Do List</title>
  9.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  10.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  11.   <style>
  12.     body {
  13.       font-family: Arial, sans-serif;
  14.       margin: 0;
  15.       padding: 0;
  16.     }

  18.     .container {
  19.       max-width: 90%;
  20.       margin: 0 auto;
  21.       padding: 20px;
  22.     }

  24.     #editor-container {
  25.       margin-bottom: 10px;
  26.     }

  28.     #todo-list {
  29.       list-style-type: none;
  30.       padding: 0;
  31.     }

  33.     #todo-list li {
  34.       position: relative;
  35.       display: flex;
  36.       justify-content: space-between;
  37.       align-items: center;
  38.       margin-bottom: 10px;
  39.       padding: 10px;
  40.       background-color: #f5f5f5;
  41.       border-radius: 4px;
  42.     }

  44.     #todo-list li button {
  45.       background-color: transparent;
  46.       color: #555;
  47.       border: none;
  48.       padding: 5px;
  49.       border-radius: 4px;
  50.       cursor: pointer;
  51.       transition: background-color 0.3s;
  52.     }

  54.     #todo-list li button:hover {
  55.       background-color: #ddd;
  56.     }
  57.   </style>
  58. </head>

  60. <body>
  61.   <div class="container">
  62.     <ul id="todo-list"></ul>
  63.     <div id="editor-container">
  64.       <div id="toolbar"></div>
  65.       <textarea id="editor"></textarea>
  66.       <div class="button-group mt-2 d-flex justify-content-end">
  67.         <button id="add-todo" class="btn btn-primary mr-2">Save</button>
  68.         <button id="cancel-todo" class="btn btn-danger">Cancel</button>
  69.       </div>
  70.     </div>
  71.   </div>

  73.   <script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
  74.   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  75.   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  76.   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  77.   <script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>

  79.   <script>
  80.     let editor;
  81.     ClassicEditor
  82.       .create(document.querySelector('#editor'))
  83.       .then(newEditor => {
  84.         editor = newEditor; // Initialize CKEditor
  85.       })
  86.       .catch(error => {
  87.         console.error(error);
  88.       });

  90.     const addTodoButton = document.getElementById('add-todo');
  91.     const cancelTodoButton = document.getElementById('cancel-todo');
  92.     const todoList = document.getElementById('todo-list');

  94.     let todoData = {};
  95.     let recordId;
  96.     let currentEditId = null;

  98.     // Event handler for page load
  99.     ZOHO.embeddedApp.on("PageLoad", function(data) {
  100.       if (data && data.Entity) {
  101.         recordId = data.EntityId;
  102.         console.log("Current Record ID: " + recordId);

  104.         // Fetch the record data from Zoho CRM
  105.         ZOHO.CRM.API.getRecord({
  106.             Entity: "Leads",
  107.             approved: "both",
  108.             RecordID: recordId
  109.           })
  110.           .then(function(data) {
  111.             const description = data.data[0].Description;
  112.             if (description) {
  113.               todoData = JSON.parse(description); // Parse the stored to-do list
  114.             } else {
  115.               todoData = {};
  116.             }

  118.             // Clear the todoList
  119.             todoList.innerHTML = '';

  121.             // Add each todo item
  122.             for (const [id, item] of Object.entries(todoData)) {
  123.               addTodoItemToList(id, item.data);
  124.             }
  125.           })
  126.           .catch(function(error) {
  127.             console.error('Error fetching description:', error);
  128.           });

  130.         addTodoButton.addEventListener('click', saveTodo);
  131.         cancelTodoButton.addEventListener('click', cancelTodo);
  132.       }
  133.     });

  135.     // Function to add a to-do item to the list
  136.     function addTodoItemToList(id, data) {
  137.       const li = document.createElement('li');
  138.       li.setAttribute('data-id', id);
  139.       const todoContent = document.createElement('div');
  140.       todoContent.innerHTML = data; // Set the content of the to-do item
  141.       li.appendChild(todoContent);
  142.       li.appendChild(createButtonsContainer('fa-pencil-alt', 'fa-trash-alt'));
  143.       todoList.appendChild(li);

  145.       addEventListeners(li, id);
  146.     }

  148.     // Function to edit a to-do item
  149.     function editTodoItem(id, data) {
  150.       editor.setData(data); // Set the editor data to the selected to-do item's data
  151.       currentEditId = id;
  152.       addTodoButton.textContent = 'Update Todo';
  153.     }

  155.     // Function to save a to-do item
  156.     function saveTodo() {
  157.       const todoText = editor.getData();
  158.       if (todoText.trim() !== '') {
  159.         if (currentEditId) {
  160.           // Update existing item
  161.           todoData[currentEditId] = {
  162.             data: todoText
  163.           };
  164.           const li = document.querySelector(`[data-id='${currentEditId}']`);
  165.           li.innerHTML = '';
  166.           const todoContent = document.createElement('div');
  167.           todoContent.innerHTML = todoText;
  168.           li.appendChild(todoContent);
  169.           li.appendChild(createButtonsContainer('fa-pencil-alt', 'fa-trash-alt'));

  171.           addEventListeners(li, currentEditId);

  173.           currentEditId = null;
  174.           addTodoButton.textContent = 'Save';
  175.         } else {
  176.           // Add new item
  177.           const uniqueId = 'id' + new Date().getTime();
  178.           todoData[uniqueId] = {
  179.             data: todoText
  180.           };
  181.           addTodoItemToList(uniqueId, todoText);
  182.         }
  183.         editor.setData(''); // Clear the editor content
  184.         updateRecord(recordId, todoData); // Update the record in Zoho CRM
  185.       }
  186.     }

  188.     // Function to cancel editing or adding a to-do item
  189.     function cancelTodo() {
  190.       editor.setData(''); // Clear the editor content
  191.       currentEditId = null;
  192.       addTodoButton.textContent = 'Save';
  193.     }

  195.     // Function to create buttons for editing and deleting
  196.     function createButtonsContainer(editIcon, deleteIcon) {
  197.       const container = document.createElement('div');
  198.       const editButton = document.createElement('button');
  199.       editButton.classList.add('edit', 'btn', 'btn-secondary', 'mr-1');
  200.       editButton.innerHTML = `<i class="fas ${editIcon}"></i>`;
  201.       editButton.setAttribute('data-toggle', 'tooltip');
  202.       editButton.setAttribute('data-placement', 'top');
  203.       editButton.setAttribute('title', 'Edit');
  204.       const deleteButton = document.createElement('button');
  205.       deleteButton.classList.add('delete', 'btn', 'btn-danger');
  206.       deleteButton.innerHTML = `<i class="fas ${deleteIcon}"></i>`;
  207.       deleteButton.setAttribute('data-toggle', 'tooltip');
  208.       deleteButton.setAttribute('data-placement', 'top');
  209.       deleteButton.setAttribute('title', 'Delete');
  210.       container.appendChild(editButton);
  211.       container.appendChild(deleteButton);
  212.       return container;
  213.     }

  215.     // Function to add event listeners to the edit and delete buttons
  216.     function addEventListeners(li, id) {
  217.       const deleteButton = li.querySelector('.delete');
  218.       deleteButton.addEventListener('click', () => {
  219.         deleteTodoItem(id);
  220.       });

  222.       const editButton = li.querySelector('.edit');
  223.       editButton.addEventListener('click', () => {
  224.         editTodoItem(id, todoData[id].data);
  225.       });
  226.     }

  228.     // Function to delete a to-do item
  229.     function deleteTodoItem(id) {
  230.       delete todoData[id];
  231.       const liElement = document.querySelector(`[data-id='${id}']`);
  232.       if (liElement) {
  233.         liElement.remove();
  234.       }
  235.       updateRecord(recordId, todoData); // Update the record in Zoho CRM
  236.     }

  238.     // Function to update the record in Zoho CRM
  239.     function updateRecord(recordId, data) {
  240.       var config = {
  241.         Entity: "Leads",
  242.         APIData: {
  243.           "id": recordId,
  244.           "Description": JSON.stringify(data),
  245.         },
  246.         Trigger: ["workflow"]
  247.       };

  249.       ZOHO.CRM.API.updateRecord(config)
  250.         .then(function(data) {
  251.           console.log('Description updated:', data);
  252.         })
  253.         .catch(function(error) {
  254.           console.error('Error updating description:', error);
  255.         });
  256.     }

  258.     // Initialize the Zoho Embedded App
  259.     ZOHO.embeddedApp.init();
  260.   </script>
  261. </body>

  263. </html>

6.Pack the widget

Once you execute the commands "zet validate" and "zet pack", a "dist" folder will be created within the folder structure, containing the zipped file.



7.Create Widget in Zoho CRM

• Settings > Developer Hub > Widgets > Create New Widget
• Select the type as related list
• Select the hosting as zoho(we are using internal hosting here)
• Select the zip file from the dict folder.
• Set the index pages as “/widget.html”
• Click save




8. Execution 

Select Add Related List from the left tabs



Select the widget from the pop up


Click install the widget you have added then you will get this interface in Leads Module








Hope this helps upto some level. Looking forward for improvements and suggestions.


Regards

Vigneshwaran Kalaivanan
Certified Zoho CRM & Creator Developer
TraqMetrix Solutions LLP - Zoho Authorized Partner
 WhatsApp Logo +919944486228