External Libraries

You can use external front-end libraries and node packages to enhance your app's functionality. The following section lists the libraries that you can use and methods to include them in your app.

Front-end Libraries

To use an external library, you can include it from the corresponding Content Delivery Network (CDN) in the template.html file as shown in the following examples.

Example 1: jQuery
You can use jQuery libraries to manipulate UI elements as per your requirements. To add a button in your app’s UI, view the following snippet.
template.html

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("This is an alert to quit!") }); }); </script> </head> <body> <button>Send Warning</button> </body> </html>
EXPAND ↓

Example 2: Bootstrap
Bootstrap is a powerful front-end framework for faster and easier web development. You can use it to add UI elements, such as buttons and textboxes, in your app. You can follow the format shown in the example below.

template.html

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ alert("This is an alert to quit!") }); }); </script> </head> <body> <button type="button" class="btn btn-default">Send Warning</button> </body> </html>
EXPAND ↓

Alternately, you can download the desired library in the app directory and reference it from the template.html file as shown in the following code.

template.html

Copied Copy
1
<script src="library/handlebars.js"></script>
Here, handlebars.js is the downloaded library file in the app/library directory.
NPM Packages

You can use npm packages to leverage backend functionalities for your app. These libraries can be used only in the server.js file of your app. A few npm packages, such as request and underscore, are explained below.

Example 1: Request - Helps you make HTTP calls easily.

Copied Copy
1
2
3
4
5
6
7
8
9
var request = require("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:
Underscore - Contains various utility methods.

  1. First - Returns the first element of an array.

  2. Copied Copy
    1
    2
    3
    4
    var _ = require("underscore"); var values = [5, 4, 3, 2, 1]; _.first(values); /* Returns value 5 */
  3. Uniq - Returns all unique values in an array.
  4. Copied Copy
    1
    2
    3
    4
    var _ = require("underscore"); var values = [1, 2, 1, 4, 1, 3]; _.uniq(values); /* Returns arrray [1, 2, 4, 3] */

Log in with your Freshsales account

Enter your helpdesk URL to proceed to login

Proceed

By clicking "Proceed", you agree to our Terms of Use.