Enable custom ticket field columns to be added to the request table in Help Center my activities page

This worked like a charm Autumn. Thanks for sharing!

@Cory 

You are welcome!

Do anyone need to make filter with custom field?

I will try if needed.

I'd love to be able to filter. Just having the data is a huge win for my customers.

@Autumn

I was able to get rid of the error but its still not pulling in the data field. Can you take a look at my code and let me know if you see anything missing?

<nav class="my-activities-nav collapsible-nav">
<ul class="collapsible-nav-list container">
<li aria-selected=true>{{t 'requests'}}</li>
<li>{{link 'contributions'}}</li>
<li>{{link 'subscriptions'}}</li>
</ul>
</nav>

<div class="container">
<header class="my-activities-header">
<h1>{{t 'my_requests'}}</h1>
<nav class="my-activities-sub-nav collapsible-nav">
<ul class="collapsible-nav-list">
{{#each filters}} {{#if selected}}
<li aria-selected=true>{{name}}</li>
{{else}}
<li>
<a href="{{url}}">{{name}}</a>
</li>
{{/if}} {{/each}}
</ul>
</nav>
</header>

{{#form 'requests_filter' class='requests-table-toolbar'}}
<div class="search">
{{input 'query' id='quick-search' type='search' class='requests-search'}}
</div>
{{#if help_center.multiple_organizations_enabled}}
<div class="request-table-filter">
{{label 'organization' for='request-organization-select' class='request-filter request-filter-label'}} {{select 'organization'
id='request-organization-select' class='request-filter'}}
</div>
{{/if}}

<div class="request-table-filter">
{{subscribe}}
</div>

<div class="request-table-filter">
{{label 'status' for='request-status-select' class='request-filter request-filter-label'}} {{select 'status' id='request-status-select'
class='request-filter'}}
</div>
{{/form}} {{#if query}}
<div class="requests-search-info meta-data">
{{t 'requests_search_results_info' count=requests.length query=query}}
</div>
{{else}} {{#unless requests}}
<p class="no-activities">{{t 'no_requests'}}</p>
{{/unless}} {{/if}}

<div class="requests">
{{#if requests}}
<table class="table my-activities-table requests-table {{current_filter.identifier}}-requests">
<thead>
<tr>
<th>{{t 'subject'}}</th>
<th>{{t 'id'}}</th>
<th>
{{#is current_filter.identifier 'my'}} {{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}} {{else}} {{t 'requester'}}
{{/is}}
</th>
<th>{{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}</th>
<th>
{{t 'status'}}
</th>
<th>
Expected Launch Date
</th>
</tr>
</thead>

<tbody>
{{#each requests}}
<tr {{#is status 'closed'}} class="request-closed" {{/is}}>
<td class="request-info requests-table-info">
<a href="{{url}}" class="striped-list-title" title="{{subject}}">
{{#if subject}} {{subject}} {{else}} {{excerpt description characters=50}} {{/if}}
</a>
<!-- Visible on mobile -->
<div class="requests-table-meta meta-group">
<span class="meta-data">#{{id}}</span>
<span class="meta-data">{{date created_at timeago=true}}</span>
<span class="status-label status-label-{{status}}" title="{{status_description}}">
{{status_name}}
</span>
</div>
</td>
<td>#{{id}}</td>
<td>
{{#is ../current_filter.identifier 'my'}} {{date created_at timeago=true}} {{else}} {{requester.name}} {{/is}}
</td>
<td>{{date updated_at timeago=true}}</td>
<td class="requests-table-status">
<span class="status-label status-label-{{status}}" title="{{status_description}}">
{{status_name}}
</span>
</td>
<div id="{{id}}"></div>
<script>
$.ajax({
url: '/api/v2/requests/{{id}}.json',
dataType: 'json',
type: 'GET',
crossDomain: true,
contentType: 'aplication/json',
data: '',
processData: false,
success: function (data) {
var value="none";
var count = Object.keys(data.request.fields).length;
var i;
for (i = 0; <count;i++) {
if (data.request.fields[i].id=="114098173934") {
value = data.request.fields[i].value;
break;
}
}
document.getElementByID("{{id}}").innerHTML = value;
},
Error: function (result) {

}
})
</script>
</td>
</tr>
{{/each}}
</tbody>
</table>
{{/if}}
</div>

{{pagination}}
</div>

hi Jake.

it seems correct.

You can put alert function into script to understand where it not work.

success: function (data) {

alert("api success");

var value="none";

var count = Object.keys(data.request.fields).length;

alert(count);

var i;

for (i = 0; <count;i++) {

if (data.request.fields[i].id=="114098173934") {

value = data.request.fields[i].value;

alert(value)

break;

 I guess the api function has problem. You should check json data for api url(api/v2/tickets.json). If you receive a bid json data like:

{“ticket”:[{“url”:” https://...” ,“id”:”xx”,,"fields":[{"id":114...,"value":null},{}] },{}]}

that you can use data.request.fields.

Hope this help.

@Cory

I did it.

Requests_page Template

Add filter dropdown with name, id, class:

{{#form 'requests_filter' class='requests-table-toolbar'}}
  <div>
       <label class="request-filter-label request-filter"> Filter:</label>   
      <select name='customfield-select' id='customfield-select' class='request-filter customfield-filter>
        <option value="all">All</option>            
      </select>
  </div>

Add id to table row:

<tbody >
{{#each requests}}
<tr {{#is status 'closed'}} class="request-closed" {{/is}} id="{{id}}-row">

Add custom field column with class and id.

<div class="customfield-column" id="{{id}}">
</div>
<script>

Add script to get custom filed from API and show custom field column.

<script>
var a = new Array();
$.ajax({
url: '/api/v2/requests/{{id}}.json',
dataType: 'json',
type: 'GET',
crossDomain: true,
contentType: 'application/json',
data: '',
processData: false,
success: function (data) {
var value="none";
var count = Object.keys(data.request.fields).length;
var i;
for(i=0;i<count;i++){
if(data.request.fields[i].id=="your custom field id")
{
value = data.request.fields[i].value;
break;
}
}

document.getElementById("{{id}}").innerHTML = value;
document.getElementById("{{id}}-row").classList.add(value.replace(/ /g,"_"));
var x = document.getElementById("customfield-select");
if(a.indexOf(value.split(' ')[0])<0) {
x.innerHTML += "<option value=" + value.split(' ')[0] + ">" + value.split(' ')[0] + "</option> ";
a.push(value.split(' ')[0]);
}
},
error: function (result) {
alert("Error");
}
})
</script>

Script.js

Add filter dropdown onchange event

$(document).ready(function() {

$( ".customfield-filter" ).change(function() {
var x=document.getElementsByClassName("customfield-column");
var y=document.getElementsByClassName("customfield-filter");
var str_pro=y[0].value;
//alert(str_pro);
for(i=0;i<x.length;i++) {
if(x[i].innerText.includes(str_pro) == true || str_pro=="all") $("." + x[i].innerText.replace(/ /g,"_")).show();//value.replace(/ /g,"_")
else $("." + x[i].innerText.replace(/ /g,"_")).hide();
}
});

@Autumn : can't see your dumps on your latest post regarding "Add filter" function.

And like @Jake we are not able to pull in the value from custom data fields.

// Frank

@sport

First you should check json data from api url.

https://yourdomain.zendesk.com/api/v2/tickets.json

If you can see json data with ticket and custom data fields, you can use my code to pull them.

In my case, my json data like:{“ticket”:[{“url”:” https://...” ,“id”:”xx”,,"fields":[{"id":114...,"value":null},{}] },{}]}

@Autumn : API data working fine - but we are not able to show in the value from custom data fields.

And we cannot see your image-snaps on your post (April 27, 2018 09:17) regarding "Add filter" function - making the post difficult to understand :-)

@SPORT

Did you check script with alert function? (alert will show alert message if function success)

I just update filter function for custom field in request list page.

Hope this help

Jake, there are a couple of issues with your code. If you make the changes below, it should work.

1. Remove the quotes from the id

Before change:

if (data.request.fields[i].id=="114098173934") {

After change:

if (data.request.fields[i].id==114098173934) {

2. Correct spelling of application

Before change:

contentType: 'aplication/json',

After change:

contentType: 'application/json',

3. Add cell tags before

I added a couple of lines above the code for context. The additional line is italicized for easy reference. 

Before change:

</span>
</td>
<div id="{{id}}"></div>

After change:

</span>
</td>
<td>
<div id="{{id}}">

I hope this helps!

+1

Hi Thomas, 

Please use the voting buttons on the original post to register your vote and use the comment to provide us details on your use-case. "+1" comments do not register a vote for the idea. 

Hi Autumn and all, thank you for this solution.

Out of curiosity and as a none developer, any chance we can add two custom fields?

thank you !

Hi guys, 

Does any one know if and how it is possible to add a (custom) field to the user profile. I would like to show which organization the user is connected to and also which SLA-Plan they have signed up for (custom organisation field). I would like them to be shown where marked with red in screendump:

Looking forward to hearing from you. 

Br. Mie

Hi Mie - 

I answered this question for you over in the other thread where you asked about it. 

Hi Folks,

I wanted to display the exact date for fields "Created" and "Last Activity" fields. Currently, it displays like 2 months ago, 15 days etc. I want it to be the exact date like 12-07-2018. How do I do this ?

Thanks

Lohith S

I would like to contribute with sourcecode for our working solution, with the fixes that has been specified in this thread.

Just change the <your domain> and <field ID value>

Paste the code at the end of the field you want it placed

Addtionally there are some key areas placed debugging to test the solution. Just remove the // to debug

<td class="requests-table-status">
<div id="{{id}}"></div>
<script>
//alert("debugging - do we get here?");
$.ajax({
url: 'https://<CHANGE HERE - Domain>zendesk.com/api/v2/requests/{{id}}.json',
dataType: 'json',
type: 'GET',
crossDomain: true,
contentType: 'application/json',
data: '',
processData: false,
success: function (data)
{
//alert('Debugging - API Success');
var value="none";
var count = Object.keys(data.request.fields).length;
var i;
for (i = 0; i < count ; i++)
{
//alert("DEBUGGING\nID: " + data.request.fields[i].id + "\nValue: "+ data.request.fields[i].value);
if (data.request.fields[i].id==<CHANGE HERE - FIELD ID>)
{
value = data.request.fields[i].value;
break;
}
}
var elm = document.getElementById("{{id}}");
//alert(Debugging - elm);
if (elm != null)
elm.innerHTML = value;
},
Error: function (result) {

}
})
</script>
</td>

Hi guys, this is an amazing workaround!

and thanks @Kenneth for the summary, really helpful!

It worked well when adding one custom field (though it is display the tags and not the field text... any suggestions for that?).

@Nicolas have you managed in the end to add two customs fields in this table?

I managed to add a second column for another custom field by copy/pasting the same bit of code but updating the corresponding field ID and changing these two lines as follows (basically slightly changing the {{id}} for the second custom field):

<div class="customfield-column" id="{{id}}"></div>

to

<div class="customfield-column" id="c+{{id}}"></div>

--

var elm = document.getElementById("{{id}}");

to

var elm = document.getElementById("c+{{id}}");

So that the system differentiates the two calls.

Thanks!

Julien

We're looking to expose in the table the name of the current assignee.. is there something you could recommend @ngo thu ?

Also, I did not manage to apply your code for sorting the custom field columns... :( 

I'm looking to do two things:

- Add Organization Name to the layout (our customers are often member of many organizations)

- Make the date absolute (ie created_at 4/1/2019)

I am using the default code on the requests_page. Can someone help me understand what to customize?

@Kenneth Eberhardt Mølbak When I use your code, it gets to "API Success" but then fails after that. Here is what shows up in the console:

requests:252 Uncaught ReferenceError: Debugging is not defined
at Object.success (requests:252)
at f (jquery-b60ddb79ff2563b75442a6bac88b00b5.js:1)
at Object.fireWith [as resolveWith] (jquery-b60ddb79ff2563b75442a6bac88b00b5.js:1)
at r (jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3)
at XMLHttpRequest.r (jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3)
success @ requests:252
f @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:1
fireWith @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:1
r @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3
r @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3
XMLHttpRequest.send (async)
send @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3
ajax @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3
(anonymous) @ requests:228
requests:322 Uncaught ReferenceError: Debugging is not defined
at Object.success (requests:322)
at f (jquery-b60ddb79ff2563b75442a6bac88b00b5.js:1)
at Object.fireWith [as resolveWith] (jquery-b60ddb79ff2563b75442a6bac88b00b5.js:1)
at r (jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3)
at XMLHttpRequest.r (jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3)
success @ requests:322
f @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:1
fireWith @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:1
r @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3
r @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3
XMLHttpRequest.send (async)
send @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3
ajax @ jquery-b60ddb79ff2563b75442a6bac88b00b5.js:3
(anonymous) @ requests:298
web_widget.7a2db8e406ec544ad950.js:8 Our embeddable contains third-party, open source software and/or libraries. To view them and their license terms, go to http://goto.zendesk.com/embeddable-legal-notices
chat_vendor.3586ceb75a4419f86661.js:219 [Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
(anonymous) @ chat_vendor.3586ceb75a4419f86661.js:219
c.validate @ chat_vendor.3586ceb75a4419f86661.js:219
(anonymous) @ chat_vendor.3586ceb75a4419f86661.js:219
c.validate @ chat_vendor.3586ceb75a4419f86661.js:219
Se @ chat_vendor.3586ceb75a4419f86661.js:195
init @ chat_vendor.3586ceb75a4419f86661.js:195
t @ web_widget.7a2db8e406ec544ad950.js:79
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:79
Promise.then (async)
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:79
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:79
create @ web_widget.7a2db8e406ec544ad950.js:79
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:79
(anonymous) @ common_vendor.071ff9aecc6c12ab74f5.js:10
Zr @ common_vendor.071ff9aecc6c12ab74f5.js:10
(anonymous) @ common_vendor.071ff9aecc6c12ab74f5.js:10
qu @ common_vendor.071ff9aecc6c12ab74f5.js:10
GL @ web_widget.7a2db8e406ec544ad950.js:79
init @ web_widget.7a2db8e406ec544ad950.js:79
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:79
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:79
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:140
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:61
r.onload @ web_widget.7a2db8e406ec544ad950.js:54
load (async)
Na+N.e.exports @ web_widget.7a2db8e406ec544ad950.js:54
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:61
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:61
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:61
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:61
SW6U.e.exports @ web_widget.7a2db8e406ec544ad950.js:61
h.load @ web_widget.7a2db8e406ec544ad950.js:140
setLocale @ web_widget.7a2db8e406ec544ad950.js:79
a @ web_widget.7a2db8e406ec544ad950.js:79
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:79
b.callback @ web_widget.7a2db8e406ec544ad950.js:8
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:8
r.emit @ web_widget.7a2db8e406ec544ad950.js:97
t.onreadystatechange @ web_widget.7a2db8e406ec544ad950.js:8
e._rollbar_wrapped.e._rollbar_wrapped @ web_widget.7a2db8e406ec544ad950.js:8
XMLHttpRequest.send (async)
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:8
b._end @ web_widget.7a2db8e406ec544ad950.js:8
b.end @ web_widget.7a2db8e406ec544ad950.js:8
Zl @ web_widget.7a2db8e406ec544ad950.js:79
getConfig @ web_widget.7a2db8e406ec544ad950.js:79
start @ web_widget.7a2db8e406ec544ad950.js:79
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:79
setTimeout (async)
Vtdi @ web_widget.7a2db8e406ec544ad950.js:79
i @ runtime.72bb1c832afe2f8d08f8.js:1
0 @ web_widget.7a2db8e406ec544ad950.js:1
i @ runtime.72bb1c832afe2f8d08f8.js:1
r @ runtime.72bb1c832afe2f8d08f8.js:1
t @ runtime.72bb1c832afe2f8d08f8.js:1
(anonymous) @ web_widget.7a2db8e406ec544ad950.js:1

And here is my code, any suggestions?

<td class="requests-table-status">
<div id="{{id}}"></div>
<script>

alert("debugging - do we get here?");
$.ajax({
url: 'https://mydomain.zendesk.com/api/v2/requests/{{id}}.json',
dataType: 'json',
type: 'GET',
crossDomain: true,
contentType: 'application/json',
data: '',
processData: false,
success: function (data)
{
alert('Debugging - API Success');
var value="none";
var count = Object.keys(data.request.fields).length;
var i;
for (i = 0; i < count ; i++)
{
alert("DEBUGGING\nID: " + data.request.fields[i].id + "\nValue: "+ data.request.fields[i].value);
if (data.request.fields[i].id==360015527793)
{
value = data.request.fields[i].value;
break;
}
}
var elm = document.getElementById("{{id}}");
alert(Debugging - elm);
if (elm != null)
elm.innerHTML = value;
},
Error: function (result) {

}
})
</script>
</td>

Hi Rachel,

For the "Make the date absolute (ie created_at 4/1/2019)"

You can edit the request_page.hbs and make the timeago=false for all fields.

Edit it for both created_at, udpated_at and publish the code. e.g date created_at timeago=false

You should see an absolute date

Thanks

Lohith S

I'm new to Zendesk, just started on this project. I was looking for a way to show custom fields (four in total) in the Request List page and be able to sort by them as well. I got this solution working, but might there be a more elegant way to pursue this? I'm thinking between the placeholders and liquid code we should be able to stash the <scripts> where they belong and just query the api and loop through the response for each ticket. Has anyone had success using a different method?

My thought is to break up the inline JS as to not be looped by the template and create so many unnecessary calls. If we make the API call and get back the JSON, create a global object, then we can put a smaller request in the foreach loop so we're requesting existing data and not making so many api requests per ticket. Does that make sense?

@Mark Harper 

I looked at your code and I can't see anything egregious. I know it may sound stupid, but did you enter in your actual subdomain instead of "mydomain"? I've made that same mistake many times. Also, I would check to make sure that the Reguest API is the one you need. I know that in my script I had to change the api call to "api/v2/tickets/" instead of "api/v2/requests/"  and change 'data.request.fields' to 'data.ticket.fields' because "request" didn't have access to the custom "ticket" fields we wanted to show. 

I'm going to keep looking for a better way to do this. I don't like how cumbersome it is. And, yes, Zendesk should have this type of functionality baked in. This is a pretty common request it seems and I bet there are even others who need it, but just deal with it because of time. 

Hi all,

I've been reading through this thread today, as it looks to do almost exactly what I wanted (I wanted to put the ticket group on the requests list page, but a custom field seemed like it would be as close as I could get).

I'm using the code below, inserted into the body, but the results are just blank. I've checked the api call using cURL and can see the custom field in there just fine. I've added in the alert texts, but it doesn't seem to do anything within the <script></script> section. Can someone please help point me in the right direction?

<td>
<div id="{{id}}">
<script>
alert("debugging - do we get here?");
$.ajax({
url: '/api/v2/requests/{{id}}.json',
dataType: 'json',
type: 'GET',
crossDomain: true,
contentType: 'application/json',
data: '',
processData: false,
success: function (data) {
alert('Debugging - API Success');
var value="none";
var count = Object.keys(data.request.fields).length;
var i;
for (i=0;i lt count;i++)
{
alert("DEBUGGING\nID: " + data.request.fields[i].id + "\nValue: "+ data.request.fields[i].value);
if(data.request.fields[i].id==360020234533)
{
value = data.request.fields[i].value;
break;
}
}
var elm = document.getElementById("{{id}}");
alert(Debugging - elm);
if (elm != null)
elm.innerHTML = value;
},
error: function (result) {
}
})
</script>
</div>
</td>

I have implemented this to show my Product for my request list

The code that I have used is below

<td>
<div id="{{id}}"></div>
<script>
//alert("debugging - do we get here?");
$.ajax(
{
url: 'https://mydomain.zendesk.com/api/v2/requests/{{id}}.json',
dataType: 'json',
type: 'GET',
crossDomain: true,
contentType: 'application/json',
data: '',
processData: false,
success: function (data)
{
alert('Debugging - API Success');
var value="none";
var count = Object.keys(data.request.fields).length;
//alert(count);
var i;
for (i = 0; i < count ; i++)
{
if (data.request.fields[i].id===114094357471)
{
value = data.request.fields[i].value;
break;
}
}
var elm = document.getElementById('{{id}}');
//alert(Debugging - elm);
if (elm != null)
elm.innerHTML = value;
},
error: function (result)
{
}
})
</script>
</td>

No matter what I do i can't get to the second alert.   Very Frustrating!!!

@Chuck Yocum

How did you get to the first alert (the one just inside <script>)? I can't even get that to work!

In your code, have you changed the text mydomain.zendesk.com to your actual address?

I agree, this is a must-have in my eyes, since we must be able to provide at a glance all these custom fields that are applicable to your industry to provide the customer the detail to narrow down the time spent reviewing each ticket to see which one is the one they want to make a comment on.

Thanks,

Yami

@Simon

First one was easy, I just put the code in there. 

Yes, I did have the domain changed to my actual domain.

I have my Zendesk pretty extended out (Integrated with SalesForce, Moodle, and our own custom Software Mangement) but this is like pulling teeth.   Our customers submit tickets for different products.   For example,  Customer can have product A, B, and C which is three different divisions within our company.   So I just want to show the product on the activities screen.

I did write a really cool Export to Excel button on the activities screen if anyone is interested.