创建小部件

创建您的第一个小部件

通过使用小部件功能,您可以直接在 CRM 中嵌入 UI 组件,并根据需求使用第三方应用程序的数据执行操作。

创建小部件

安装 Zoho CLI 后,您可以创建自己的小部件。

第 1 步:

安装 CLI 后,运行以下命令以创建新项目。

$ zet init

第 2 步:

选择 Zoho 服务并对您要创建的小部件指定名称。在此情况下,选择 Zoho CRM 作为服务。

将在相应文件夹目录中创建样本项目。

第 3 步:

要打开样本项目,请运行以下命令:

cd {Project_name}

现在,可以开始为该小部件设计和添加 UI 组件。

备注:

  • 可在 app 文件夹中找到该小部件的 HTML 文件,默认情况下名为“widget.html”。

第 4 步:

此 widget.html 文件包含该小部件的结构、设计和组件。要在小部件中使用 Zoho CRM API,可使用 JS SDK 中提供的 API 助手

备注:

  • 可通过创建必要的 JS 文件和样式表(可选)向小部件添加其他设计和功能。

第 5 步:

创建小部件后,可将小部件放在本地并进行测试。

要将小部件放在本地,请运行:

$ zet run

如果已测试小部件并且未发现任何问题,那么可打包小部件并将它放在内部或外部服务器上进行托管。

注册监听器

如果想要将上下文数据传递至小部件,那么您需要针对相应事件进行注册。注册事件意味着定义在您的应用触发特定事件时执行的函数。事件可以是浏览器或用户执行的操作。以下是一些事件的示例:

  • DialerActive - 每次启用软件电话窗口时触发。
  • Dial - 在 ZohoCRM 中点击“通话”图标时触发。
  • PageLoad - 每次加载实体页面(“明细”页面)时触发。

可使用下面给出的样本代码在您的小部件中订阅 PageLoad 活动:

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

以下代码片段用于初始化小部件并开始监听您的 CRM 应用程序中的事件:

ZOHO.embeddedApp.init()

ZOHO.CRM.CONFIG.getCurrentUser() 是一个 API,用于返回名称、ID、职位、角色等等的用户信息。用于调用 API 的代码为:

ZOHO.CRM.CONFIG.getCurrentUser().then(function(data){
console.log(data);
});

可在 Github 页面中找到 API 助手、JS SDK 和一些样本小部件。

还没有找到您需要的内容?

请发送邮件给我们:support-crm@zohocorp.com.cn