Connected Apps for Zoho CRM

Getting Started with Connected Apps

A Connected App is an application that is integrated with Zoho CRM via API's. Zoho provides standard SAML and OAuth protocols to support Single Sign-on, a controlled data and meta access permissions to Connected Apps.

In addition to these standard protocols, we provide a Javascript SDK that allows widgets embedded inside CRM to control the UI, and access / manipulate data via Javascript API's on behalf of the current user.

Zoho's Javascript SDK allows you to build and embed an application contextually inside Zoho CRM, where standard OAuth2 protocol provides support for Server-side Integrations.

Building your own connected app

We are introducing the process of developing and embedding your own connected app as simple as it could get. Initially ,let’s see what Connected Apps are ,and how they work, then we'll dive into how to code them.

Connected App Overview

Connected App allows you to extend the functionalities of Zoho CRM and provide contextual information along with your CRM data. The key features of the connected App include,

  • View a pending support ticket of a contact in a Related List.
  • Gain insight on your prospect's personal and business connections,right besides your record view.
  • Enrich your contact information using any third party market intelligence service.
  • Link your own in house file hosting service and replace the default attachment support provided in Zoho CRM completely.

HelloWorld Sample Widget

The source code for a simple “helloworld” widget is available here.

The “HelloWorld” application consist of the following files,

File

Description

main.html

Main UI Layer of the widget.

style.css

Style sheet for the html.

custom.js

Business logic is defined inside the custom.js that tells how the app behaves to events happening inside zoho CRM.

ZohoEmbededAppSDK.min.js*

Zoho CRM’s Javascript sdk.

Let’s dive in and take a look at the detailed description of these files.

main.html

Main user interface of the app where SDK library, custom js and style sheets are included.

style.css

Custom style sheet for the app is defined here.

custom.js

This is the user-defined script file where the app's business logic is defined and the SDK is initialized along with event listeners.

ZohoEmbededAppSDK.min.js*

It's the java script SDK that allows you to control zoho CRM’s UI and manipulate data on the current user’s context. You can find the latest version of our SDK here.

"HelloWorld" application returns the User information and Record information of a particular lead record in Zoho CRM as the API response.The output is rendered in a Related List widget.

Register the Event Listeners

And in some cases where contextual data should be passed to the connected app, you need to register for the appropriate events. Registering an event means defining a function that will be executed when certain event is triggered by your application.

The code for event listeners for the "HelloWorld" application is,

ZOHO.embeddedApp.on("PageLoad",function(data){
        console.log("Page Loaded with data");
        console.log(data);
})

The code to initialize SDK is,

ZOHO.embeddedApp.init()

The code to invoke an API is

ZOHO.CRM.CONFIG.getCurrentUser().then(function(data){
console.log(data);
});
The complete documentation of all the available API wrappers are given here.
Some of the fully functioning widgets are also available in our github page.

Configure your first widget

As discussed in the beginning, custom built applications can be integrated with ZohoCRM through connected apps. Widget is a type of Connected App that is integrated with CRM’s UI contextually.

To configure a widget in your extension, you need to create a connected app. The following steps will guide you through the process in detail.

  1. Log in to developer.zoho.com which is the Zoho CRM’s developer console.
  2. Navigate to an existing extension or create a new one,inside which you wish to configure your first widget.
  3. Click Connected Apps tab from the left pane, that will open up a new form.
  4. Provide a name and description of the Connected App.
  5. In the development phase, make use of our zoho cli to start a local HTTP Server that allows to run your app locally and test it in our extension's sandbox.
  6. These static contents can either be hosted internally within zoho or with any external hosting provider for Production.Choose the appropriate hosting type accordingly.
  7. To package the app for production, make use of the package command provided in the cli, which will create a zip of all the files inside the apps folder.
  8. Incase of internal hosting, this package is required to be uploaded under the connected app configuration page before publishing your extension.

Internal Hosting

          Select the "Choose Hosting" to be Internal and upload the "helloword.zip" as discussed in step 8 of the previous secion.

External Hosting

Widgets are supported across a wide range of ZohoCRM components such as RelatedList, WebTab, Custom Button, Telephony dialer, and Extension Settings page etc,. Detailed explanation of all types widgets and their configuration procedures are provided in  Widgets support in Zoho CRM.

A Sample Widget

This part explains the creation of a Sample Related List Widget in the Lead's Module.

The steps to create a demo widget are,

  1. Click Customize in your Zoho Developer Console.
  2. Select Related Details and click Add Widget.
  3. Provide a resource path for the widget. Resource path is the relative path to the main view page of your widget. In this case,it is “html/main.html”.
  4. If the App is hosted internally, the Widget is created and associated with the Connected App as shown below,
  5. Upon creating the related list widget successfully, click Test your Extension in the top right corner of your console.
  6. Open an existing record under the Leads module and scroll down to view the  Related List that is created recently.

Learn More

 

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: support@zohodeveloper.com