Creating Ticket In JITBIT Helpdesk System With File Attachment From SharePoint

In my previous blogs, I have explained how to authenticate the SharePoint with JITBIT helpdesk system and create helpdesk tickets in JITBIT.

Please follow the below links to authentication and Creating tickets in JITIT helpdesk system

  1. Authentication
  2. Create Ticket in JITBIT System

Now, we are going to implement file upload feature while creating ticket from SharePoint to JITBIT system content, like Images, PDF, Documents, Spreadsheets.

Create a Ticket With File Attachments

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

It helps to create a ticket with attachment.

  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  
  14.     //Upload multiple file attachments into form data  
  15.     $.each($('#file')[0].files, function(i, file) {  
  16.         form.append('file' + i, file);  
  17.     });  
  18.     // Now the ajax request calls  
  19.     $.ajax({  
  20.         "async"true,  
  21.         "crossDomain"true,  
  22.         "url""https://vinodh.jitbit.com/helpdesk/api/ticket",  
  23.         "method""POST",  
  24.         "headers": {  
  25.             "authorization": auth  
  26.         },  
  27.         "processData"false,  
  28.         "contentType"false,  
  29.         "mimeType""multipart/form-data",  
  30.         "data": form, // Form data we appended before  
  31.         success: function(response) {  
  32.             swal({  
  33.                 title: "Awesome!",  
  34.                 text: "Ticket: " + response + " has been created successfully"// Am using SWAL sweet alert for success  
  35.                 type: "success"  
  36.             }); // Clear the elements after successful submission  
  37.             $('#picktech').val("");  
  38.             $('#txtbody').val("");  
  39.             $('#txtsub').val("");  
  40.             $('#picktech2').val("");  
  41.             $('#file').val("");  
  42.         },  
  43.         error: function(error) {  
  44.             //Capture the error of API Call  
  45.             swal({  
  46.                 title: "Oops!",  
  47.                 text: "Something Went wrong",  
  48.                 type: "error"  
  49.             });  
  50.         }  
  51.     });  
  52. }  

HTML

  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.   
  20. <option value="-1">Low</option>  
  21.   
  22. <option value="0">Medium</option>  
  23.   
  24. <option value="1">High</option>  
  25.   
  26. <option value="2">Critical</option>  
  27.   
  28. </select> </div>  
  29.                 </div>  
  30.                 <div class="form-group row"> <label for="exampleSelect1" class="col-2 col-form-label">Category</label>  
  31.                     <div class="col-4"> <select class="form-control" id="picktech">  
  32.   
  33. <option value="select">Select</option>  
  34.   
  35. </select> </div>  
  36.                 </div>  
  37.                 <div class="form-group row"> <label for="exampleSelect1" class="col-2 col-form-label">Upload</label>  
  38.                     <div class="col-4"> <input type="file" id="file" name="img" multiple> </div>  
  39.                 </div> <button type="button" class="btn btn-primary" onclick="createTicket()">Create</button> </div>  
  40.         </div>  
  41.     </div>  
  42. </section>  

Let's create a ticket from SharePoint


After filling the form data, also upload the files. Then, click "Create".

 

So now, the ticket has been created successfully with attachments. Let's navigate to JITBIT helpdesk system.

Finally, you are able to see the ticket with attachment information.

 

So, the NEW Ticket has been submitted from SharePoint with JITBIT API.