For Zoho Services only:


I'm actually part of something bigger at Ascent Business Solutions recognized as the top Zoho Premium Solutions Partner in the United Kingdom.

Ascent Business Solutions offer support for smaller technical fixes and projects for larger developments, such as migrating to a ZohoCRM.  A team rather than a one-man-band is always available to ensure seamless progress and address any concerns. You'll find our competitive support rates with flexible, no-expiration bundles at http://ascentbusiness.co.uk/zoho-support-2.  For larger projects, check our bespoke pricing structure and receive dedicated support from our hands-on project consultants and developers at http://ascentbusiness.co.uk/crm-solutions/zoho-crm-packages-prices.

The team I manage specializes in coding API integrations between Zoho and third-party finance/commerce suites such as Xero, Shopify, WooCommerce, and eBay; to name but a few.  Our passion lies in creating innovative solutions where others have fallen short as well as working with new businesses, new sectors, and new ideas.  Our success is measured by the growth and ROI we deliver for clients, such as transforming a garden shed hobby into a 250k monthly turnover operation or generating a +60% return in just three days after launch through online payments and a streamlined e-commerce solution, replacing a paper-based system.

If you're looking for a partner who can help you drive growth and success, we'd love to work with you.  You can reach out to us on 0121 392 8140 (UK) or info@ascentbusiness.co.uk.  You can also visit our website at http://ascentbusiness.co.uk.

Zoho Creator: Create a Widget which uses JavaScript

What?
This is an article documenting how to create a Zoho Creator Widget which includes the Bootstrap and jQuery frameworks as well as other JavaScript functionality.

Why?
Quite simply that at time of print (2020-10-24), Zoho Creator does not allow you to use JavaScript anywhere in its app. HTML and CSS are mostly allowed but JavaScript automatically gets removed from any of your code.

How?
As someone who's been using Zoho services and programming in Zoho Deluge for a few years now, even I thought of Zoho Widgets as a daunting task. But after doing some, I realize this is actually very quick to do and much easier than first thought. The article below documents how to create your first widget in a MacOS environment. I aim to create a WindowsPC version of this document at some point for my colleagues. The below instructions follow a fresh install as if this is the first time this computer has created a Zoho Creator Widget.

Software used:
  • Zoho Creator v5 (Plan Premium or greater is required - includes Zoho One)
  • macOS Catalina v10.15.7
  • Safari v14.0
  • MS Visual Studio Code v1.48.2

Prerequisites
  1. Download nodejs source code from https://nodejs.org/en/download/. Don't worry about knowing anything about nodejs, as long as you know JavaScript and HTML/CSS you can use this:
    Download NodeJS
  2. Execute the download and go through the installation process with the final step to move it to trash/bin.
  3. Open the terminal app on your Mac and type the following to test the install:
    copyraw
    node –v
    npm –v
    1.  node -v 
    2.  npm -v 
    You should get a version number for each of these as a response. Failing this you should check your security and privacy and ensure that you have permission to install the above, then re-install.
    Check NodeJS Installation

Install the Zoho Extension Toolkit (ZET) via command line interface (CLI)
  1. In the terminal, type:
    copyraw
    npm install –g zoho-extension-toolkit
    1.  npm install -g zoho-extension-toolkit 
    If you get errors like “Missing write access to/usr/local/lib/node_modulesZET Installation Errors then type the following instead:
    copyraw
    sudo npm install –g zoho-extension-toolkit
    1.  sudo npm install -g zoho-extension-toolkit 
    You should get prompted for the Mac/Admin password which you type in the terminal (will not display, just type away and press the Return key). The response will be something like “added 98 packages from 60 contributors in 3.043s”.
    ZET Installed Successfully
  2. Check the CLI installation by typing:
    copyraw
    zet –v
    1.  zet -v 
    This should return the version of the Zoho Extension Toolkit (eg. 0.23.6)

Create a project
  1. In the terminal, type
    copyraw
    zet init
    1.  zet init 
  2. You will be given a list of Zoho services, use the arrow up/down keys to select “Zoho Creator” and press the return/enter key.
  3. Give the project a name: eg. “joels_awesome_app” (without the double-quotes and no funny characters). It will initialize a project in a folder called something like “/Users/<your_username>/joels_awesome_app
  4. It will then initialize some NPM dependencies and it will ask you to type the following commands; to change current directory to the app directory and then to run the toolkit
  5. copyraw
    cd joels_awesome_app 
    zet run
    1.  cd joels_awesome_app 
    2.  zet run 
    The terminal response will advise that it is running zet at https://127.0.0.1:5000 along with the instructions “please enable the host (https://127.0.0.1:5000) in a new tab and authorize the connection by clicking Advanced -> Proceed to 127.0.0.1 (unsafe)”.
    ZET Initialization and Run This message is somewhat out of date but follow the following instructions to preview your app:
  6. Open a browser and Ensure you type the preceding “https” rather than the default “http”
  7. [Optional Step] This is an added note/step if you get the following error when trying to access your app on your localhost:
    “127.0.0.1 normally uses encryption to protect your information. When Google Chrome tried to connect to 127.0.0.1 this time, the website sent back unusual and incorrect credentials. This may happen when an attacker is trying to pretend to be 127.0.0.1, or a Wi-Fi sign-in screen has interrupted the connection. Your information is still secure because Google Chrome stopped the connection before any data was exchanged. You cannot visit 127.0.0.1 at the moment because the website sent scrambled credentials that Google Chrome cannot process. Network errors and attacks are usually temporary, so this page will probably work later.”
    Google Chrome HTTPS Error - ERR_CERT_INVALID
    My workaround was simply not to use Google Chrome but to open the Safari app instead (ensure you type the https://127.0.0.1:5000 as the URL as it may default to use HTTP instead of HTTPS): Open Safari https://127.0.0.1:5000 and click on Show Details Again you may get a warning but simply click on “Show Details” then on “Visit this website” then on “Visit Website” (on yet another popup) and then finally enter your password to make changes to your Certificate Trust Settings: Click on Visit Website... a few times
  8. You should get the following page open in your browser which is the root folder of your app: Safari - App Root Folder
  9. In the browser url, type https://127.0.0.1:5000/app/widget.html, your browser page should now display something similar to the following: Safari - App Preview Page
  10. Note that for every action you are doing in the Safari browser, there will be a log in the terminal: Server Side Logs

Editing the Widget
  1. So let’s modify the widget.html file in this app by opening a finder/file explorer window and browsing to the app folder: Finder - Browse to Home then Browse to app folder
    Finder - widget.html file
  2. Then open the file “widget.html” in your favorite code editor, here I am using MS Visual Studio Code for Mac and I get the following: Visual Studio Code - source of widget.html
  3. If I change the HTML and save the file, I can refresh the browser page and immediately see the changes: Visual Studio Code - Change Html Safari - Preview Changes
  4. Adding custom CSS and JS files: If using MS Visual Studio Code, I’m adding the app folder to my workspace so that I can easily create a stylesheet and javascript file specific to this app: VSC - Workspace add Custom CSS and JS files
  5. Adding third-party frameworks: I’m going to use my favorite third-party extensions (Bootstrap & jQuery) which I’m referring to over the web (Content Delivery Network – CDN)

Recap
So as a recap, this is how it looks so far:
  • The HTML: VSC - the HTML
  • The CSS: VSC - the CSS
  • The JavaScript: VSC - the JS
  • The Preview in Browser: Safari - Preview

Adding some Zoho SDK functionality:
  1. First I’m going to add the Zoho Javascript to the page VSC - the JS with some Zoho SDK

Packaging the Widget
  1. Return to the terminal and hold down the CTRL key and press C to interrupt the logging terminal and return to the prompt. (your safari browser can not display this page anymore)
  2. Type:
    copyraw
    zet validate
    1.  zet validate 
  3. You should get a response saying that Validation Rules passed successfully. Now Type:
    copyraw
    zet pack
    1.  zet pack 
  4. You should get a response saying something like “Extension packed successfully as … in dist folder”: Terminal CLI - Validation and Packaging
  5. Return to your finder/file explorer window and a “dist” folder should have appeared containing a ZIP file: Finder - Dist App File Zip

Adding your Widget in Creator
  1. Now return to your Creator app, go to Settings and then Widgets then click on "Create" or “New Widget” and enter the details of your widget:
    • Name: to whatever you want
    • Hosting: I select “Internal” though the benefits of “External” could be for development updates (untested).
    • Widget File: upload the ZIP file from your dist folder.
    • Index File: put here the root html file along with the path (do not forget the leading slash or your widget will error)
    • Click on "Create" (bottom-right of your screen)
    Zoho Creator - Add New Widget
  2. Now go to a Creator page (new or existing), select "Widgets" and drag your new Widget to the page:
    Zoho Creator - Add Widget to Creator Page
  3. Don't forget to click on the page settings (cog in the top right) and add a parameter, in this case "name":
    Zoho Creator - Add Parameter to Creator Page
  4. Great! Now access this application and preview your masterpiece! The following screenshot shows what happens when I change the parameter:
    Zoho Creator - Preview Widget in Creator Page

Additional Note(s):
I have found that adapting Widgets created for Zoho Creator to work in Zoho CRM is pretty easy to do. The only differences are the step where you select the type of project in the CLI, in particular the widget JS script that is referred to in widget.html and secondly, the way you retrieve records in the Zoho JavaScript. If you do not include Zoho queries, then I have found the app can be ported between either Creator or CRM (as in pure HTML,CSS and JS).
Files referring to Creator specifically:
  • ./app/widget.html: reference to script src at https://js.zohostatic.com/creator/widgets/version/1.0/widgetsdk-min-js
  • ./app/custom.js: my custom javascript file referring to the ZOHO.CREATOR.init() and calling Creator records.
  • ./plugin-manifest.json: JSON specifying service as "CREATOR".
Error(s):
  • When trying npm install -g zoho-extension-toolkit: Error: EACCES: peermission denied Run sudo npm install -g zoho-extension-toolkit
  • When trying zet run: Error: Cannot find module 'portfinder'. Run.a npm cache clean --force. I didn't bother resolving this other than having a terminal with the command zet pack ready every time which returns me the ZIP file to upload by editing the widget in ZohoCreator. I'd preview it in Zoho Creator rather than the site that had embedded it.

Source(s):
Category: Zoho :: Article: 732

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Joes Word Cloud

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Ethereum:
Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2024 Joel Lipman .com. All Rights Reserved.