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.
Example Copied Copy
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.
Example 1: Button Copied Copy
1 | <button type="button" class="btn btn-default">Default</button> |
Example 2: Textbox Copied Copy
1 | <input type="text" class="form-control" placeholder="Text input"> |
External Libraries
You can load external libraries using one of the following methods:
-
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 Copy1<script src="{{ 'handlebars.js' | asset_url }}"> </script> -
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 Copy1234jQuery.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.
Example 1: Request Copied Copy
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. }); |
Example 2: First
Returns the first element of an array. Passing n will return the first n elements of the array.
Copied Copy1 2 3 4 | var _ = loadDependency("underscore"); var values = [5, 4, 3, 2, 1]; _.first(values); /* Returns value 5 */ |
Example 3: Uniq
Produces a duplicate-free version of the array. In particular, only the first occurrence of each value is kept.
Copied Copy1 2 3 4 | var _ = loadDependency("underscore"); var values = [1, 2, 1, 4, 1, 3]; _.uniq(values); /* Returns arrray [1, 2, 4, 3] */ |