Example Apps

Download an example app

Go to this page on Github to download the full source code of one or more sample apps. We built these apps for teaching, demoing, and training purposes. Download them, play with them, tweak them, or even reuse some of the code in your projects.

If you think there's a better way of doing something in one of the apps, please make a branch and submit a pull request to the repository.

Before you build your first Zendesk app, we strongly recommend that you read and understand our best practices for app developers. It not only outlines practices you should adopt, but also some you should definitely avoid.

A look at app.js

Let's look at the Expert sample app. Feel free to follow along by downloading or cloning it.

The functional part of all apps is contained in a file named app.js. Below is part of the code. Click here for the full version. It might look confusing at first. Don't worry; we'll explain each section in some detail.

(function() {

    return {

        // Define your AJAX calls
        requests: {
            search: function(searchUrl) {
                return {
                    url: searchUrl,
                    type: 'GET',
                    dataType: 'json'
                };
            }
        },

        // Define your events, such as a user clicking on something
        events: {
            'app.created'        : 'init',
            'ticket.save'        : 'saveHookHandler',
            'ticket.submit.done' : 'ticketSubmitDoneHandler',
            'hidden .my_modal'   : 'modalIsHiddenHandler',
            'search.done'        : 'renderTicketLinks',
            'click .prev'        : 'previousTicketsPage',
            'click .next'        : 'nextTicketsPage',
            'click .page_number' : 'searchTicketsByPageNumber'
        },

        // Define your own functions

        init: function() {
            this.pageNumber = this.previousPageNumber = this.resources.DEFAULT_PAGE_NUM;
            this.incrementValue = this.incrementValue || Math.floor(this.resources.VAL_MAX / ( this.resources.TIME_OUT / this.resources.TIME_INTERVAL ));
            this.numOfPageBtnEachSide = this.numOfPageBtnEachSide || Math.floor(this.resources.NUM_OF_PAGE_BUTTONS_SHOW / 2);
            this.ticketsPerPage = this.setting('results_per_page');
            this.sendSearchRequest(this.makeSearchUrl(this.pageNumber)); // Get tickets info on the first page
        },

        previousTicketsPage: function(event) {
            event.preventDefault();
            if (this.pageNumber > this.resources.FIRST_PAGE) {
                this.previousPageNumber = this.pageNumber;
                this.pageNumber--;
                this.sendSearchRequest(this.previousPageQueryUrl); // Get tickets info from previous page.
            }
        },
        ...
    };
}());

Understanding the structure of the app.js script

The source code consists of a single JavaScript function that is invoked at once. The app is completely defined by a JavaScript object returned by this function.

Eliminating the contents of the app, the structure looks like this:

(function() {

  return {
    //app goes here
  };

}());

This JavaScript object can contain any property you need: internal data, functions, and so on. Some properties, like events and requests, are meaningful to the framework. These are the basis of how apps work in Zendesk Support. We'll be looking at them in detail later on in this guide.

Important: In some cases, writing functions outside of the return block can cause memory leaks. If your app is found to cause memory leaks in Zendesk Support, it will be rejected during our approval process. To learn more, see Memory leak patterns in JavaScript on the IBM developerWorks website.

Defining the user interface

You're probably wondering where the user interface for our example app is defined. Apps use Handlebar.js templates (more on those later) to define their user interface.

Here's a look at a template for this app:

<div class="tickets_list">
  <div class="tickets_list_header"><h5>{{t "total_ticket_assigned_today"}} {{total}}</h5></div>
  <div class="tickets_list_body">
    <ul>
      {{#ticketsInfo}}
      <li>
        <a href="#/tickets/{{id}}">{{subject}}</a>
      </li>
      {{/ticketsInfo}}
    </ul>
  </div>
  <div class="pagination pgination-centered">
    <ul>
      <li><a class="prev" href="#">«</a></li>
      {{#pages}}
      <li class="pagi pagi{{this}}"><a class="page_number" href="#">{{this}}</a></li>
      {{/pages}}
      <li><a class="next" href="#">»</a></li>
    </ul>
  </div>
</div>

How it looks in Zendesk Support

The location in Zendesk Support of this particular app is the right side of the ticket interface:

image

Download an example of a nav bar app

Instead of accessing your app by opening the Apps panel on the right side of the Zendesk Support ticket interface, you can let users access your app by clicking an icon on the vertical navigation bar on the left side. This is called a nav bar app. If you'd like to build a nav bar app, download and review the code of this sample app.