How To Show Custom Objects In Zendesk Guide

This article will be more of a tutorial, so we are going to keep it short and sweet. We will be showcasing how you can show custom objects assigned to a user through the Sunshine Asset Management for Support app. Let’s get into it!

Prerequisites

1. Create your custom object

Define the object that you would like to use, what attributes should it have? Which attribute would you like to identify it with? For our purpose, we are creating a "device" object to store all our users' assigned devices. We will take note of the object key "device". We want each instance (a.k.a record) to have a "name" and a "serial number". These will be the object's properties. Our users will see a list of their devices when they log in. To simplify things, it is sufficient to only display the device's "name". Right? Right!

Now, end users need permission to read their own records as well. You will be able to do so after creating the object.

2. Create a relationship

We need to link users to devices, and for that, a relationship needs to be defined.
For our purpose, we define a one to many relationship between Zendesk users and the newly created "device" object. We take not of the relationship key "user_has_devices".

Another permission is needed to allow end users to read relationship records. This is to identify the objects relating to their account.

3. Create some records

Zendesk does not provide a UI to create object records and relationship records. So, the only way is to use the API, or our asset management app. We have a video for how this works here.

So you need to change the 3 things we noted: relationship type, object type, and attribute.

Solution

4. Upload this JS file in the Assets of Zendesk Guide in “Customise code”

In file “ZDCustomObjects.js” (download here) . You need to change the 3 things we noted: relationship type, object type, and attribute.

Like in the screenshot below:

5. Add this JavaScript code in the last line of “document_head.hbs”

<script src="https://code.jquery.com/jquery-3.6.1.js"></script>

6. Add this JavaScript code in the last line of “user_profile_page.hbs”

<div class="container" hidden="true" id="user_name_obj">{{user.id}}</div>

<script src="{{asset 'ZDCustomObjects.js'}}"></script>

<script src="https://code.jquery.com/jquery-3.6.1.js"></script>

7. Add this HTML code into the last list user information around line 103

<ul>

<span class="stat-label"><b>Your devices</b></span>

<li class="stat" id="customObjectList">

<span class="stat-value"></span>

</li>

</ul>

It should look like this:

And that should do it! We hope that you’ve found this article useful!

If you can’t get it to work, we’d be happy to help you out. Book a meeting below!