动态更改应用程序图标

亚博Zendesk应用在导航栏和顶部栏的位置显示了相关的应用程序图标．在本教程中，您将创建一个顶部栏应用程序，该应用程序根据变化的整数动态更新其图标。该整数表示来自第三方API的未读消息的计数。

要更改图标，应用程序运行一个后台实例。实例访问应用程序的顶部栏实例client.instance ()方法。这使得应用程序即使在顶部栏应用程序关闭时也可以更改图标。

你需要什么

要完成本教程，您需要以下内容:

• 拥有亚博Zendesk Suite增长计划或以上版本，或支持专业人员计划或以上版本的Zendesk帐户。要获取用于测试的免费帐户，请参见获得开发的试用或赞助帐户．

• Zend亚博esk命令行接口。要安装或升级ZCLI，请参见安装和更新ZCLI．

  ZCLI取代了Zendesk App亚博s Tools (ZAT)， ZAT目前处于维护模式。要改为使用ZAT，请参见安装和使用ZAT．

• 熟悉亚博Zendesk应用框架(ZAF)．在开始之前，请完成构建第一个支持应用程序教程。

创建应用程序文件

首先，为一个名为信息对抗．

1. 在你的shell中，导航到你想要存储应用程序的文件夹。

                  
   
                   
   cd项目
                  

2. 在文件夹中运行:

                  
   
                   
   zcli应用:新
                  

3. 在提示符下，输入以下值:

   • 目录名称:msg_counter
   • 作者姓名:您的姓名
   • 作者邮箱:您的邮箱地址
   • 作者网站:留空并按Enter。
   • 应用名称:信息对抗

   中创建应用程序启动器文件信息对抗文件夹中。

设置应用程序位置

接下来，更新应用程序以在顶部栏和背景位置运行。

1. 在msg_counter文件夹,打开manifest.json在文本编辑器中。

2. 取代位置具有以下属性:

                  
   
                   
   .．.“位置”：｛“支持”：｛“top_bar”：｛“url”：“资产/ iframe.html”｝，“背景”：“资产/ iframe.html”｝｝，.．.
                  

3. 保存manifest.json．

添加顶部栏图标

顶部栏应用程序需要一个名为icon_top_bar.svg．要添加应用程序图标，右键单击下面的图像链接，并将其保存到您的计算机为icon_top_bar.svg．将图像放在msg_counter /资产文件夹中。

• ［icon_ticket_editor.svg］

如何更改应用程序图标

上面的icon_top_bar.svg文件包含多个图标为< >符号标签。每一个< >符号标签有一个唯一的id属性。

             

              
<svgxmlns＝＂http://www.w3.org/2000/svg＂><象征id＝＂默认的＂viewBox＝＂0 0 990 990＂.．.>.．.象征><象征id＝＂把1＂viewBox＝＂0 0 990 990＂.．.>.．.象征>.．.svg>
             

当顶部栏应用程序启动时，它使用“默认”id的符号。要更改图标，可以使用顶部栏实例的ZAF客户端来设置iconSymbol财产。

             

              
客户端．集（“iconSymbol”，“把1”）
             

动态设置顶部栏图标

更新你的应用，根据数据动态地改变它的图标。

在本教程中，您将使用JavaScript函数生成0-10(含)之间的随机整数。该整数表示未读消息的计数。在生产应用程序中，您可以更新该函数以从第三方API中使用client.request ()方法。

1. 在应用的资产文件夹,打开iframe.html．取代< >脚本标签包含ZAFClient.init ()与以下:

                  
   
                   
   <脚本类型＝＂text / javascript＂src＝＂main.js＂>脚本>
                  

2. 在资产文件夹，创建一个main.js文件。将以下内容粘贴到文件中:

                  
   
                   
   常量客户端＝ZAFClient．初始化（）；常量POLL_INTERVAL_IN_MILLIS＝2000；异步函数updateIconCount（delayInMillis）｛常量数＝等待getCount（）；如果（数>9）｛setTopBarIcon（“count-9plus”）；｝其他的如果（数= = =0）｛setTopBarIcon（“默认”）；｝其他的｛setTopBarIcon（｀数,$ {数｝｀）；｝等待新承诺（（解决）= >setTimeout（解决，delayInMillis））；等待updateIconCount（delayInMillis）；｝//在prod中，更新此函数以调用//使用ZAF的client.request()方法的第三方API异步函数getCount（）｛//返回0-10之间的随机整数(包括)返回数学．地板上（数学．随机（）＊11）；｝异步函数setTopBarIcon（象征）｛常量topBar＝等待getTopBarInstance（）；topBar．集（“iconSymbol”，象征）；｝异步函数getTopBarInstance（）｛常量instancesData＝等待客户端．得到（“实例”）；常量实例＝对象．值（instancesData．实例）；常量topBar＝实例．找到（（e）= >e．位置= = =“top_bar”）；返回客户端．实例（topBar．instanceGuid）；｝客户端．在（“app.registered”，（appData）= >｛常量位置＝appData．上下文．位置；如果（位置= = =“背景”）｛updateIconCount（POLL_INTERVAL_IN_MILLIS）；｝｝）；
                  

   大多数代码只在应用程序的后台实例中运行。当后台实例加载时，它生成一个消息计数。

   后台实例然后使用client.instance ()方法来访问top bar实例的ZAF客户端。后台实例使用此客户端设置iconSymbol财产。这将图标更改为与消息计数对应的图标。

   每隔两秒，后台实例生成一个新的消息计数并更新图标。

3. 保存iframe.html而且main.js．

本地运行应用程序

在本地运行应用程序，以确保它每两秒更改顶部栏图标。

1. 在shell中，导航到msg_counter文件夹中。例子:

                  
   
                   
   cd / msg_counter项目
                  

2. 启动本地ZCLI web服务器。

                  
   
                   
   zcli应用:服务器
                  

   注意:按“Ctrl+C”停止服务器。

3. 在浏览器的私有或隐身窗口中，登录到Zendesk Support并进入代理工作区。亚博附加? zcli_apps = true到URL。例子:

   https://{子域名}.zendes亚博k.com/agent/dashboard ? zcli_apps = true

4. 顶部栏显示应用程序图标。应用程序会每两秒自动更换一次图标。

   

下一个步骤

恭喜你!您已经创建了一个动态更新图标的应用程序。下一步，考虑以下任务:

• 更改应用程序的getCount ()函数调用第三方APIclient.request ()方法
• 更新顶部栏应用程序以显示来自API的有用信息
• 为应用程序的异步调用添加错误处理
• 在Support实例中上传并安装应用程序作为私有应用程序