第3部分:添加配置UI
本教程是为Slack构建Zendesk集成系列的一部分:亚博
- 第1部分:使用OAuth构建Ze亚博ndesk应用程序
- 第二部分:连接到Slack
- 第3部分:添加配置UI -您在这里
- 第4部分:安装集成
集成监听
在前面的教程中,您创建了一个Zendesk应用程序。到目前为止,该应用程序允许管理亚博员将集成连接到他们的Zendesk和Slack实例。在本教程中,您将向应用程序添加配置用户界面(UI)。管理员可以使用配置UI为集成设置票据优先级和Slack通道。
添加配置UI
你的Zen亚博desk应用程序应该包括以下内容:
- 一个
票优先 下拉字段 - 一个
松弛的通道 文本字段 - 一个
保存 按钮
要配置集成,管理员需要填写字段并单击
在你的Zende亚博sk应用程序的
资产 文件夹,打开iframe.html .将下面的HTML(第5到46行)直接添加到< div > 标记,其中包含连接到Slack 按钮。…
连接到Slack
按钮>
div>
<div类="行">
<div类="col-6">
<div类="c-txt u-mb-small">
<标签类="c-txt__label"为="txt-priority"
>票优先标签
>
<选择
类="c-txt__input c-txt__input——选择"
id="select-priority"
>
<选项价值="低">低选项>
<选项价值="正常的">正常的选项>
<选项价值="高">高选项>
<选项价值="紧急的">紧急的选项>
选择>
div>
div>
<div类="col-6">
<div类="c-txt u-mb-small">
<标签类="c-txt__label"为="txt-channel"
>松弛的通道标签
>
<输入
类="c-txt__input"
id="txt-channel"
占位符="例如#一般"
类型="文本"
/>
div>
div>
div>
<div类="行u-mt">
<div类="col-12">
<按钮
id="提交"
类="c-btn c-btn——主"
风格="浮动:正确的"
>
保存
按钮>
div>
div>
…
在
bootstrap.js ,增加以下内容:…
startSlackOAuth(integrationName,子域名);
});
//绑定按钮提交配置
文档.getElementById(“提交”).addEventListener(“点击”,函数(){
submitConfig(integrationName);
});
//获取配置数据并显示在UI中
fetchConfig(integrationName);
…
代码将
保存 按钮submitConfig 函数。代码也叫fetchConfig 功能时,Zendesk应用程序加载。亚博你将定义submitConfig 和fetchConfig 函数。在
资产 文件夹,创建一个config.js 文件。将以下内容粘贴到文件中:// configScope是一个自定义键,用于引用配置数据
让configScope=“slackNotification”;
//是否存在slackNotification的配置数据
让scopeExists=假;
// fetchConfig定义获取配置数据的函数
函数fetchConfig(integrationName){
//获取配置请求
让请求={
类型:“获得”,
url:
“/ api /服务/子/集成/”+
integrationName+
“/配置?过滤器[范围]="+
configScope,
};
客户端.请求(请求).然后(
函数(响应){
控制台.日志(“配置已获取:”,响应.配置[0].配置);
scopeExists=真正的;
updateComponents(响应.配置[0].配置);
},
函数(响应){
控制台.日志("配置获取失败:",响应);
如果(响应.状态==404){
scopeExists=假;
}
}
);
}
// submitConfig从DOM映射数据并通过ZIS Configs API提交
函数submitConfig(integrationName){
//准备配置有效负载
让数据=JSON.stringify({
范围:configScope,
配置:{
优先级:文档.getElementById(“select-priority”).价值,
通道:文档.getElementById(“txt-channel”).价值,
},
});
//请求创建或更新配置数据
让请求;
如果(scopeExists){
//请求更新配置
请求={
类型:“把”,
url:
“/ api /服务/子/集成/”+
integrationName+
“/配置/”+
configScope,
contentType:“application / json”,
数据:数据,
};
}其他的{
//请求创建配置
请求={
类型:“职位”,
url:“/ api /服务/子/集成/”+integrationName+“/配置”,
contentType:“application / json”,
数据:数据,
};
}
客户端.请求(请求).然后(
函数(响应){
控制台.日志(“配置已保存:”,响应);
客户端.调用(“通知”,“保存配置”);
scopeExists=真正的;
},
函数(响应){
控制台.日志("配置提交失败:",响应);
}
);
}
// updateComponents用新获取的配置数据更新UI组件
函数updateComponents(配置){
控制台.日志("使用config更新组件:",配置);
文档.getElementById(“select-priority”).价值=配置.优先级;
文档.getElementById(“txt-channel”).价值=配置.通道;
}
代码定义了
submitConfig 函数。当它被调用时,submitConfig 使用配置API 创建或更新配置对象。配置存储票优先 和松弛的通道 设置为键值对。配置对象有一个
范围 属性“slackNotification”。稍后,您将使用此作用域在集成的ZIS流中加载配置数据。代码还定义了
fetchConfig 函数。fetchConfig 使一个显示配置 请求获取“slackNotification”作用域的当前配置。如果存在,则显示配置数据票优先 和松弛的通道 字段。在
iframe.html ,增加以下内容:…
< !--Establish OAuth connections -->
<脚本类型="text / javascript"src="connect.js">脚本>
< !--Manage configuration settings -->
<脚本类型="text / javascript"src="config.js">脚本>
…
保存
iframe.html ,bootstrap.js ,config.js .然后刷新应用程序。您的应用程序现在显示配置UI。
保存配置
接下来,使用UI为您的集成设置票证优先级和Slack通道。
在您的应用程序中,选择a
票优先 的紧急的 .在
松弛的通道 ,在您的工作区中输入Slack频道的名称。点击
保存 .系统弹出操作成功提示。
验证配置对象
使用一个
在命令行界面中,运行以下curl请求。取代
旋度-X得到https://{子域名}.亚博.com/api/服务/子/集成/{子域名}_亚博zendesk_to_slack/配置?过滤器[范围]=slackNotification \
-g-H"授权:Bearer {access_token}"
响应包含关于“slackNotification”配置的详细信息,包括它的
{
“元”:{
“has_more”:假
},
“下一个”:零,
“配置”:[
{
“id”:123456,
“范围”:“slackNotification”,
“亚博zendesk_account_id”:12345678,
“集成”:“sample_亚博zendesk_to_slack”,
“配置”:{
“优先”:“紧急”,
“通道”:“#亚博 zendesk-tickets”
},
“created_at”:“2099 - 04 - 19 - t20:44:51z”,
“updated_at”:“2099 - 04 - 19 - t20:44:51z”
}
],
“链接”:{
“下一个”:""
}
}
将Slack应用程序添加到频道中
接下来,邀请您的Slack应用程序到您选择的频道。这可以让你的Slack应用程序向频道发布消息。
在Slack中,打开你的工作区。
转到您之前选择的Slack频道。在通道中,在消息字段中输入以下内容:
/邀请@Zende亚博sk票务机器人
按回车。
根据您的Slack设置,该通道可能会显示成功消息。该消息表明应用程序加入了该频道。
在下一个教程中,您将安装集成。指