构建第一个支持应用程序——第4部分:获取数据

1. 在你的showInfo ()函数定义(不是showInfo ()函数调用)，添加一个名为数据接收用户数据:

                  
   
                   
   函数showInfo（数据）｛.．.
                  

2. 在showInfo ()函数中的硬编码值requester_data对象中的值数据论点:

                  
   
                   
   varrequester_data＝｛“名字”：数据．用户．的名字，“标签”：数据．用户．标签，“created_at”：数据．用户．created_at，“last_login_at”：数据．用户．last_login_at｝；
                  

3. 保存文件，单击重新加载所有应用程序在Ze亚博ndesk Support中测试您的工作。如果ZCLI服务器尚未启动，请参见<一个href＝＂https://developer.zendesk.com/documentation/apps/build-an-app/build-your-first-support-app/part-2-designing-the-user-interface/">测试应用程序的指令。

   

   注意，如果用户在他们的Zendesk配置文件中没有任何标签，Tags行就不会出现。亚博

这些日期对用户来说不是很友好。你决定花几分钟来解决这个问题。

日期格式

您可以使用标准的JavaScript Date方法来格式化日期。

1. 将以下帮助函数添加到您的main.js文件:

                  
   
                   
   函数formatDate（日期）｛varcdate＝新日期（日期）；var选项＝｛一年：“数字”，月：“短”，一天：“数字”｝；日期＝cdate．toLocaleDateString（“en - us”，选项）；返回日期；｝
                  

   该函数根据传递给函数的日期字符串创建一个JavaScript Date对象。它使用Date格式化方法对数据进行格式化，并返回修改后的日期。

2. 回到你的showInfo ()函数，将这两个日期传递给helper函数:

                  
   
                   
   “created_at”：formatDate（数据．用户．created_at），“last_login_at”：formatDate（数据．用户．last_login_at）
                  

3. 保存main.js文件并单击重新加载所有应用程序在Ze亚博ndesk Support中测试您的工作。

   

   约会应该比以前更友好。

显示错误消息

在<一个href＝＂＃calling-the-rest-api">调用REST API方法传递了一个响应对象showError ()函数从Zendesk API得到错误响应后:亚博

             

              
showError（响应）；
             

在本节中，您将获取信息并将其显示在错误模板中。

1. 添加一个参数到你的showError ()接收错误数据的函数定义:

                  
   
                   
   函数showError（响应）｛.．.
                  

2. 在showError ()函数中的硬编码值error_data对象中的值响应对象:

                  
   
                   
   varerror_data＝｛“状态”：响应．状态，“statusText”：响应．statusText｝；
                  

3. 中的请求设置中的一个输入错误，从而测试错误页面requestUserInfo ()．保存文件并重新加载应用程序。应该会显示错误模板。

   记住，在您满意错误模板按预期工作之后，要修复请求设置中的错字。

代码完成!

恭喜你!你开发了你的第一个ZAF应用程序。你的最终版本main.js文件应该是这样的:

             

              
（函数（）｛var客户端＝ZAFClient．初始化（）；客户端．调用（“调整”，｛宽度：“100%”，高度：“120 px”｝）；客户端．得到（“ticket.requester.id”）．然后（函数（数据）｛varuser_id＝数据［“ticket.requester.id”］；requestUserInfo（客户端，user_id）；｝）；｝）（）；函数requestUserInfo（客户端，id）｛var设置＝｛url：' / api / v2 /用户/ '+id+. json的，类型：“得到”，数据类型：json的，｝；客户端．请求（设置）．然后（函数（数据）｛showInfo（数据）；｝，函数（响应）｛showError（响应）；｝）；｝函数showInfo（数据）｛varrequester_data＝｛“名字”：数据．用户．的名字，“标签”：数据．用户．标签，“created_at”：formatDate（数据．用户．created_at），“last_login_at”：formatDate（数据．用户．last_login_at）｝；var源＝文档．getElementById（“requester-template”）．innerHTML；var模板＝车把．编译（源）；var超文本标记语言＝模板（requester_data）；文档．getElementById（“内容”）．innerHTML＝超文本标记语言；｝函数showError（响应）｛varerror_data＝｛“状态”：响应．状态，“statusText”：响应．statusText｝；var源＝文档．getElementById（“错误模板”）．innerHTML；var模板＝车把．编译（源）；var超文本标记语言＝模板（error_data）；文档．getElementById（“内容”）．innerHTML＝超文本标记语言；｝函数formatDate（日期）｛varcdate＝新日期（日期）；var选项＝｛一年：“数字”，月：“短”，一天：“数字”｝；日期＝cdate．toLocaleDateString（“en - us”，选项）；返回日期；｝
             

你的iframe.html文件应该是这样的:

             

              
<！文档类型超文本标记语言><超文本标记语言><头><元字符集＝＂utf - 8＂><链接rel＝＂样式表＂href＝＂https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css＂crossorigin＝＂匿名＂><链接href＝＂main.css＂rel＝＂样式表＂>头><身体><divid＝＂内容＂>div><页脚><一个href＝＂https://mysite.github.io/support＂目标＝＂平等自愿＂>报告错误一个>页脚><脚本id＝＂requester-template＂类型＝＂文本/ x-handlebars-template＂><表格><tr><道明>客户：</道明><道明类＝“数据”>｛｛的名字｝｝</道明></tr>｛｛＃如果标签｝｝<tr><道明>标签：</道明><道明类＝“数据”>｛｛#每一个标签｝｝｛｛这｝｝｛｛/每一个｝｝</道明></tr>｛｛/如果｝｝<tr><道明>添加：</道明><道明类＝“数据”>｛｛created_at｝｝</道明></tr><tr><道明>最后的签署在：</道明><道明类＝“数据”>｛｛last_login_at｝｝</道明></tr></表格>脚本><脚本id＝＂错误模板＂类型＝＂文本/ x-handlebars-template＂><p>｛｛状态｝｝-｛｛statusText｝｝错误．请在下面的链接报告一个错误．</p>脚本><脚本src＝＂https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js＂>脚本><脚本src＝＂https://cdn.jsdelivr.net/npm/<一个href＝＂https://developer.zendesk.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="167e7778727a7374776465562238253825">(电子邮件保护)/dist / handlebars.min.js＂>脚本><脚本src＝＂main.js＂>脚本>身体>超文本标记语言>
             

如果你喜欢，继续调整应用程序。你可以通过点击下载完整的应用程序源代码<一个href＝＂https://zen-marketing-documentation.s3.amazonaws.com/docs/en/xr_app.zip">xr_app.zip．