Post
Ask Question

Creating Ticket In JITBIT Helpdesk System From SharePoint

In my previous blog, I have explained how to create an access token for authenticating the JITBIT API from your SharePoint site. Please follow the below link -

Open SharePoint Designer.

Navigate to Site Assets -> Create an HTML File.

Add a jQuery references into it.

References

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  

Next, let’s authenticate with JITBIT system.

Code

  1. var makeBasicAuthHeader = function(username, password) {  
  2.     return "Basic " + btoa(username + ":" + password);  
  3. }  
  4. var auth = makeBasicAuthHeader('admin, ' ** ** ** ');   
  5.         console.log(auth);  

Now, I am going to get the current logged in user email information for validating it into JITBIT system so as to get the USERIDfor create tickets.

Declare the necessary variables

  1. var username,  
  2.     email,  
  3.     unameid;  

Get the current user email information from SharePoint

  1. $(function() {  
  2.     var reqUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/sp.userprofiles.peoplemanager/GetMyProperties";  
  3.     $.ajax({  
  4.         url: reqUrl,  
  5.         type: "GET",  
  6.         headers: {  
  7.             "accept": "application/json;odata=verbose"  
  8.         },  
  9.         success: successHandler,  
  10.         error: errorHandler  
  11.     });  
  12.   
  13.     function successHandler(data) {  
  14.         username = data.d.DisplayName;  
  15.         email = data.d.Email;  
  16.         $('#lblname').val(username);  
  17.         // Bind it into form   
  18.         $('#lblemail').val(email); // Bind it into form   
  19.     }  
  20.   
  21.     function errorHandler(error) {  
  22.         alert(JSON.stringify(error));  
  23.     }  
  24. });  

So now, the email has been captured into the variable email.

When you are going to create a ticket in JITBIT helpdesk system, some of the parameters are important.

ParametersValue Type
categoryIdInterger
BodyString
SubjectString
priorityId-1, 0, 1 ,2 Low, Normal, High, Critical
userId (optional)Int
Tags (optional)String

Now, let’s generate a User ID based on Email of the SharePoint user

GetUserByEmail

GET Method

https://helpdeskurl/helpdesk/api/UserByEmail

Code

  1. function getUserID() {  
  2.     $.ajax({  
  3.         "async": true,  
  4.         "crossDomain": true,  
  5.         "url": "https://vinodh.jitbit.com/helpdesk/api/UserByEmail?email=" + email + "", // Pass the current user email   
  6.         "method": "GET",  
  7.         "headers": {  
  8.             "authorization": auth // Pass the authorization header value   
  9.         },  
  10.         success: function(response) {  
  11.             unameid = response.UserID; // Get the user Id from the response   
  12.         },  
  13.         error: function(error) {  
  14.             console.log("error occured");  
  15.         }  
  16.     });  

Now, let’s go and generate the Category ID.

Get all the categories In JITBIT system

  1. // Get Categories  
  2. function getCategories() {  
  3.     $.ajax({  
  4.         "async": true,  
  5.         "crossDomain": true,  
  6.         "url": "https://vinodh.jitbit.com/helpdesk/api/categories",  
  7.         "method": "GET",  
  8.         "headers": {  
  9.             "authorization": auth // authorization header   
  10.         },  
  11.         success: function(data) {  
  12.             var $prevGroup,  
  13.                 prevGroupName; // Have some workaround to append the department into select box   
  14.             $.each(data, function() {  
  15.                 console.log(data);  
  16.                 if (prevGroupName != this.Section) {  
  17.                     // Department category has been passed into option group   
  18.                     $prevGroup = $('<optgroup />').prop('label', this.Section).appendTo('#picktech');  
  19.                 }  
  20.                 // Get the category Id from the response and pass it to the selection option value   
  21.                 $("<option />").val(this.CategoryID).text(this.Name).appendTo($prevGroup);  
  22.                 prevGroupName = this.Section;  
  23.             });  
  24.         },  
  25.         error: function(error) {  
  26.             console.log("error occured");  
  27.         }  
  28.     });  
  29. } 

HTML

  1. <select class="form-control" id="picktech">   
  2.  <option value="select">Select</option> </select>  

Finally, we got the category like this.

Now, we got all the important parameters like -

  • UserId
  • CategoryId
  • Priority (hardcoded in select dropdown value)
  • Body (captured form the input text element)
  • Subject (captured form the input text element)

Create a Ticket

POST: https://helpdeskurl/helpdesk/api/ticket

It helps to create a ticket.

  1. function createTicket() {  
  2.     // Pass the necessary variables var catID, ticketBody, ticketSubject, pId,   
  3.     // Get the value from the HTML Elements   
  4.     catID = $('#picktech').val();  
  5.     ticketBody = $('#txtbody').val();  
  6.     ticketSubject = $('#txtsub').val();  
  7.     pId = $('#picktech2').val(); // Append the form data to POST into JITBIT system   
  8.     var form = new FormData();  
  9.     form.append("categoryId", catID); // Pass category ID from the dropdown   
  10.     form.append("body", ticketBody); // Pass Ticket Body from input element   
  11.     form.append("subject", ticketSubject); // Pass the subject from input element   
  12.     form.append("priorityId", pId); // Pass priorityId from input element   
  13.     form.append("userId", unameid); // Pass the userId of the current user what we already generated and stored globally // Now the ajax request calls   
  14.     $.ajax({  
  15.         "async": true,  
  16.         "crossDomain": true,  
  17.         "url": "https://vinodh.jitbit.com/helpdesk/api/ticket",  
  18.         "method": "POST",  
  19.         "headers": {  
  20.             "authorization": auth  
  21.         },  
  22.         "processData": false,  
  23.         "contentType": false,  
  24.         "mimeType": "multipart/form-data",  
  25.         "data": form, // Form data we appended before   
  26.         success: function(response) {  
  27.             swal({  
  28.                 title: "Awesome!",  
  29.                 text: "Ticket: " + response + " has been created successfully", // Am using SWAL sweet alert for success   
  30.                 type: "success"  
  31.             }); // Clear the elements after successful submission   
  32.             $('#picktech').val("");  
  33.             $('#txtbody').val("");  
  34.             $('#txtsub').val("");  
  35.             $('#picktech2').val("");  
  36.         },  
  37.         error: function(error) {  
  38.             //Capture the error of API Call   
  39.             swal({  
  40.                 title: "Oops!",  
  41.                 text: "Something Went wrong",  
  42.                 type: "error"  
  43.             });  
  44.         }  
  45.     });  
  46. }  

HTML Code

  1. <section class="container-fuild">  
  2.     <div class="main-area">  
  3.         <div class="row">  
  4.             <div class="col-lg-4 col-md-12 col-sm-12" style="padding-top: 20px;">  
  5.                 <div class="form-group row"> <label for="example-text-input" class="col-2 col-form-label">Name</label>  
  6.                     <div class="col-4"> <input class="form-control" type="text" value="" id="lblname" disabled> </div>  
  7.                 </div>  
  8.                 <div class="form-group row"> <label for="example-text-input" class="col-2 col-form-label">Email</label>  
  9.                     <div class="col-4"> <input class="form-control" type="text" value="" id="lblemail" disabled> </div>  
  10.                 </div>  
  11.                 <div class="form-group row"> <label for="example-text-input" class="col-2 col-form-label">Subject</label>  
  12.                     <div class="col-4"> <input class="form-control" type="text" value="" id="txtsub" required> </div>  
  13.                 </div>  
  14.                 <div class="form-group row"> <label for="exampleTextarea" class="col-2 col-form-label">Message</label>  
  15.                     <div class="col-4"> <textarea class="form-control" id="txtbody" rows="8"></textarea> </div>  
  16.                 </div>  
  17.                 <div class="form-group row"> <label for="exampleSelect1" class="col-2 col-form-label">Priority</label>  
  18.                     <div class="col-4"> <select class="form-control" id="picktech2">   
  19. <option value="-1">Low</option>   
  20. <option value="0">Medium</option>   
  21. <option value="1">High</option>   
  22. <option value="2">Critical</option>   
  23. </select> </div>  
  24.                 </div>  
  25.                 <div class="form-group row"> <label for="exampleSelect1" class="col-2 col-form-label">Category</label>  
  26.                     <div class="col-4"> <select class="form-control" id="picktech">   
  27. <option value="select">Select</option>   
  28. </select> </div>  
  29.                 </div> // Call the create ticket function in the onclick event <button type="button" class="btn btn-primary" onclick="createTicket()">Create</button> </div>  
  30.         </div>  
  31.     </div>  
  32. </section>  

Render the HTML file into content editor webpart

To create a ticket in JITBIT helpdesk system

Fetches current username and email.

Click on the "Create" button.

So now, the ticket has been created successfully.

Now, open my JITBIT helpdesk system and check.

Click to open the ticket.

See now the ticket has been created by the SharePoint user who is validated in JITBIT helpdesk system.

Some Important things to remember,

  • SharePoint user email must be a valid user in JITBIT helpdesk otherwise the ticket has been created by authorized account, probably an admin account.
  • Ticket has been created only on the behalf of user in my scenario.

You can also use this file in sample HTML application