In this section, we'll take a low-level look at the differences in building a widget versus building an App. We'll use as our example a widget called “project management”. We'll show some code examples to illustrate how this widget was created and then do the same thing for the Zendesk App version. This should give you a pretty good idea of what's involved in developing Apps.
After you get through this section, we recommend that you work through the Zendesk Apps Getting Started Guide and then move on your own custom widgets.
The project management widget provides a basic form of project task tracking using tickets. You create a parent ticket for the primary task and then create child tickets for parallel sub-tasks. This widget sets a ticket's external_id and also adds tags to mark a ticket with a project ID and also if it's a parent or child ticket.
The widget is placed on the tickets view page, so that when viewing a ticket, you can mark it as a parent ticket and do any of the following:
While viewing a child ticket, the widget displays parent and child summaries and a button to unlink the current ticket.
You can find the complete code for this widget here: https://github.com/skipjac/zendesk-widgets/tree/master/project_management
The framework uses a model/view/controller (MVC) architecture. You write the model and view code and the framework is the controller. The model code resides in a file called App.js, which is where you describe the events to watch and define the functions that will run when those events occur. Your view code resides in templates, which displays the data and then updates it via the functions defined in the App.js file.
You can find the complete code for this App here: https://github.com/skipjac/Zendesk-Apps/tree/master/ProjectApp