Creating ticket in JITBIT Helpdesk system with file attachment from sharepoint

0
66
views
In my previous blog, i have explained how to authenticate the sharepoint with JITBIT helpdesk system and creating helpdesk tickets in JITBIT system from sharepoint,
Please follow the below links to authentication and Creating tickets in JITIT helpdesk system
  1.   Authetication
  2. Create Ticket in JITBIT System

 

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

Create a Ticket  With File Attachments

 

POSThttps://helpdeskurl/helpdesk/api/ticket

 

It helps to create a ticket with attachment

Code

function createTicket() {
// Pass the necessary variables var catID, ticketBody, ticketSubject, pId,
// Get the value from the HTML Elements
catID = $('#picktech').val();
ticketBody = $('#txtbody').val();
ticketSubject = $('#txtsub').val();
pId = $('#picktech2').val(); // Append the form data to POST into JITBIT system
var form = new FormData();
form.append("categoryId", catID); // Pass category ID from the dropdown
form.append("body", ticketBody); // Pass Ticket Body from input element
form.append("subject", ticketSubject); // Pass the subject from input element
form.append("priorityId", pId); // Pass priorityId from input element
form.append("userId", unameid); // Pass the userId of the current user what we already generated and stored globally
//Upload multiple file attachments into form data
$.each($('#file')[0].files, function(i, file) {
form.append('file'+i, file);
});
// Now the ajax request calls
$.ajax({
"async": true,
"crossDomain": true,
"url": "https://vinodh.jitbit.com/helpdesk/api/ticket",
"method": "POST",
"headers": {
"authorization": auth    // Pass authorization token generated from authentication steps
},
"processData": false,
"contentType": false,
"mimeType": "multipart/form-data",
"data": form, // Form data we appended before
success: function(response) {
swal({
title: "Awesome!",
text: "Ticket: " + response + " has been created successfully", // Am using SWAL sweet alert for success
type: "success"
}); 
// Clear the elements after successful submission
$('#picktech').val("");
$('#txtbody').val("");
$('#txtsub').val("");
$('#picktech2').val("");
$('#file').val("");
},
error: function(error) {
//Capture the error of API Call
swal({
title: "Oops!",
text: "Something Went wrong",
type: "error"
});
}
});
}

HTML:

<section class="container-fuild">
<div class="main-area">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12" style="padding-top: 20px;">
<div class="form-group row">
<label for="example-text-input" class="col-2 col-form-label">Name</label>
<div class="col-4">
<input class="form-control" type="text" value="" id="lblname" disabled>
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-2 col-form-label">Email</label>
<div class="col-4">
<input class="form-control" type="text" value="" id="lblemail" disabled >
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-2 col-form-label">Subject</label>
<div class="col-4">
<input class="form-control" type="text" value="" id="txtsub" required >
</div>
</div>
<div class="form-group row">
<label for="exampleTextarea" class="col-2 col-form-label">Message</label>
<div class="col-4">
<textarea class="form-control" id="txtbody" rows="8" ></textarea>
</div>
</div>
<div class="form-group row">
<label for="exampleSelect1" class="col-2 col-form-label">Priority</label>
<div class="col-4">
<select class="form-control" id="picktech2">
<option value="-1">Low</option>
<option value="0">Medium</option>
<option value="1">High</option>
<option value="2">Critical</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="exampleSelect1" class="col-2 col-form-label">Category</label>
<div class="col-4">
<select class="form-control" id="picktech">
<option value="select">Select</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="exampleSelect1" class="col-2 col-form-label">Upload</label>
<div class="col-4">
<input type="file" id="file" name="img" multiple>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="createTicket()">Create</button>
</div>
</div>
</div>
</section>

 Let’s Create a ticket from sharepoint

 After filling the form data, also uploaded the files 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 with attachment from sharepoint API
Happy sharepointing!…..
Please follow and like us:
0

LEAVE A REPLY

Please enter your comment!
Please enter your name here