The Freshdesk App development framework supports a number of external libraries that enable you to enhance your app's frontend and backend functionalities. The following sections lists the libraries that you can use and different methods to include external libraries within your app.

jQuery

Freshdesk developer framework supports the jQuery v1.12.4 library for building and manipulating UI elements.

1
2
3
jQuery(this.$container).find("#element_id").on("click", function(e) {
  // click event callback
})

Bootstrap

Bootstrap is a powerful front-end framework for faster and easier web development. You can use it to quickly add UI elements such as buttons and textboxes in your app. For more information, refer App UI.

1
<button type="button" class="btn btn-default">Default</button>

1
<input type="text" class="form-control" placeholder="Text input">

External Libraries

You can load external libraries using one of the following methods:

1. Download the desired library and reference it from the assets folder in the app.js file as shown in the sample below: Copied Copy

   1
   {{"handlebars.js" | asset_url}}

   where handlebars.js is the downloaded library file in the assets folder.

   
   Example Copied Copy

   1
   <script src="{{ 'handlebars.js' | asset_url }}"> </script>

2. Navigate to your app project folder, and add the following code in the app.js file: Copied Copy

   1
   jQuery.getScript(url);

   where url is the link to a Content Delivery Network(CDN).

   
   Example Copied Copy

   1
   2
   3
   4
   jQuery.getScript("https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js")
   var source = "Hello {{name}}" 
   var template = Handlebars.compile(source);
   var html = template({ name: "Paul" });

Backend Libraries

You can use node libraries to leverage backend functionalities for your app. These libraries can be used only in the server.js of your app. For example, you can use popular npm packages such as request to easily make HTTP calls or underscore to take advantage of its utility methods.

1
2
3
4
5
6
7
8
9
var request = loadDependency("request");
request("http://www.google.com", function (error, response, body) {
  console.log("error:", error); 
  // Print the error if one occurred 
  console.log("statusCode:", response && response.statusCode); 
  // Print the response status code if a response was received 
  console.log("body:", body); 
  // Print the HTML for the Google homepage. 
});

Returns the first element of an array. Passing n will return the first n elements of the array.

1
2
3
4
var _ = loadDependency("underscore"); 
var values = [5, 4, 3, 2, 1];
_.first(values);
/* Returns value 5 */

Produces a duplicate-free version of the array. In particular, only the first occurrence of each value is kept.

1
2
3
4
var _ = loadDependency("underscore"); 
var values = [1, 2, 1, 4, 1, 3];
_.uniq(values); 
/* Returns arrray [1, 2, 4, 3] */