构建客户端应用程序
本指南提供可帮助您构建客户端应用程序的详细信息。为便于理解，我们选择了一个简单的“Helloworld”小部件来说明所涉及步骤。在相关列表中嵌入此小部件，它将显示对应 CRM 的“线索”模块中的特定记录的用户和记录信息的 API 响应。
要了解有关连接应用及小部件的更多信息，请访问此处。
创建连接应用
要在扩展中配置小部件，您需要创建连接应用。以下步骤详细指导您完成此过程：
- 登录 developer.zoho.com，即 Zoho CRM 的开发者控制台。
- 导航至现有扩展，或创建您希望在其中配置“Helloworld”小部件的新扩展。
- 点击左窗格中的连接应用。
- 提供连接应用的名称和描述。
- 选择托管
可通过两种方式来放置该应用程序：内部和外部。Zoho cli 是命令行界面，它使用 Zoho 的服务器在内部托管该应用。同样，可使用任何其他 web 托管站点将其放置在外部，并使其可用于生产环境。
内部放置
可使用 Zoho 来托管该应用程序的静态内容。Zoho 的小部件开发 CLI 可帮助您开发、测试和打包小部件。
要在内部托管，请执行以下操作：
- 在连接应用页面中，对选择托管选择“内部托管”选项。
- 通过 Zoho CLI 中提供的命令创建“helloworld”项目（使用命令 $ zet init）。
- 从服务列表中选择“Zoho CRM”，然后提供“helloworld”作为项目名称。这会初始化项目目录，然后下载所有依赖项。
- 呈示小部件时所需的所有文件必须放置在“helloworld”项目的“app”文件夹中。
- 使用相应命令验证并打包该应用程序（如 Zoho CLI 中所示）。这会在项目目录的“dist”文件夹下创建“hellowworld.zip”文件。
- 在端口号 5000 中，使用 $ zet run 命令启动服务器（如 Zoho CLI 中所示）。这会帮助您启动本地 HTTP 服务器，它允许您在本地运行应用并在扩展的沙箱中进行测试。
- 通过点击“上传应用包”来上传“helloworld.zip”压缩文件。
- 点击保存。
外部放置
可使用 Zoho 托管简单客户端应用程序。要集成复杂应用程序和使用小部件的内部工具，请选择外部托管。
要在外部托管，请执行以下操作：
- 在连接应用页面中，对选择托管选择“外部托管”选项。
- 指定包含您的应用程序源文件的沙箱 URL 和生产 URL。
- 点击保存。
- 启动外部服务器，然后检查所有源文件列表。
创建“Helloworld”小部件
本节说明如何在线索模块中创建样本“Helloworld”相关列表小部件。
下面给出用于创建此小部件的步骤：
- 点击左窗格中的组件。
- 选择相关详细信息页签。
- 点击添加小部件按钮。
- 在创建自定义小部件页面中，提供以下详细信息：
- 名称 - helloworldwidget
- 模块 - 线索
- 沙箱 URL - 提供小部件的资源路径。资源路径是小部件的主视图页面的相对路径。在此情况下，它为“/html/main.html”。
- 如果该应用是在内部托管的，那么系统按如下所示创建小部件并将其与连接应用相关联：
- 如果该应用是在外部托管的，那么系统按如下所示将小部件与连接应用相关联：
- 成功创建相关列表小部件时，点击控制台右上角的测试扩展。
注
要允许混合内容，请执行以下操作：
- 点击地址栏最右侧的盾牌图标。
- 在弹出窗口中，点击“直接装入”或“装入非安全脚本”。
- 从线索模块打开现有记录并下滚以查看作为“Helloworld”小部件的一部分创建的相关列表。
为“Helloworld”小部件设置文件结构
此处提供简单“Helloworld”小部件的源代码。
“HelloWorld”应用程序包含以下文件：
文件 | 描述 |
main.html | 小部件的主 UI 层。 |
style.css | html 的样式表。 |
custom.js | 此处定义业务逻辑。它指示 Zoho CRM 中发生活动时此应用如何操作。 |
ZohoEmbededAppSDK.min.js* | Zoho CRM 的 Javascript SDK。 |
下面我们来了解这些文件的详细描述。
main.html
应用的包含 SDK 库、自定义 JS 和样式表的主用户界面。
style.css
此处定义应用的自定义样式表。
custom.js
自定义脚本文件（用于定义应用的业务逻辑），SDK 与活动侦听器一起初始化。
ZohoEmbededAppSDK.min.js*
Javascript SDK，允许您在已登录用户的上下文中控制 Zoho CRM 的 UI 和操作数据。可在此处找到 SDK 的最新版本。
“HelloWorld”应用程序返回 Zoho CRM 中的特定线索记录的用户信息和记录信息作为 API 响应。输出呈示在“相关列表”小部件中。
注册活动侦听器
如果应将上下文数据传递至连接应用，那么您需要注册相应活动。注册活动意味着定义将在您的应用触发特定活动时执行的函数。活动可以是浏览器或用户执行的操作。以下是一些活动的示例：
- DialerActive - 每次启用软件电话窗口时触发。
- Dial - 在 ZohoCRM 中点击“通话”图标时触发。
- PageLoad - 每次装入实体页面（“详细信息”页面）时触发。
可使用下面给出的样本代码在小部件中订阅 PageLoad 活动：
console.log("Page Loaded with data");
console.log(data);
})
以下代码片段用于初始化小部件并开始侦听您的 CRM 应用程序中的活动：
ZOHO.CRM.CONFIG.getCurrentUser() 是一个 API，用于返回名称、ID、职位、配置文件等等的用户信息。用于调用 API 的代码为：
console.log(data);
});