Creating helpdesk ticket in JITBIT Helpdesk system from SharePoint Site

0
151
views

 

Download code here: JITBIT Helpdesk TICKET

In this article, I have explained how to create a ticket in JITBIT helpdesk management system from sharepoint using JITBIT API

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

http://sharepointanchor.com/2017/09/22/jitbit-helpdesk-in-sharepoint/

Open sharepoint designer

Navigate to site assets -> Create an HTML File

Add a Jquery references into it

References:

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

Next let’s authenticate with JITBIT system

Code:

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

Now am going to get the current logged in user email information for validate it into  JITBIT system to get the USERID for create tickets.

Declare the necessary variables

var username,
email,
unameid;

Get the current user email information from sharepoint

$(function(){
var reqUrl =  _spPageContextInfo.webAbsoluteUrl + "/_api/sp.userprofiles.peoplemanager/GetMyProperties";
$.ajax({
  url: reqUrl,
  type: "GET",
  headers: { "accept": "application/json;odata=verbose" },
  success: successHandler,
  error: errorHandler
});
function successHandler(data)
{
username = data.d.DisplayName;
email = data.d.Email;
$('#lblname').val(username);    // Bind it into form
$('#lblemail').val(email);     // Bind it into form
}
function errorHandler(error)
{
alert(JSON.stringify(error));
}
});

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

Parameters Value Type
categoryId Interger
Body String
Subject String
priorityId -1, 0, 1 ,2 Low, Normal, High, Crirical
userId (optional) Int
Tags (optional) String

 

Now let’s generate user ID  based on Email of the sharepoint user

GetUserByEmail:

GET Method:  https://helpdeskurl/helpdesk/api/UserByEmail

Code:

function getUserID()
{
$.ajax({
  "async": true,
  "crossDomain": true,
  "url": "https://vinodh.jitbit.com/helpdesk/api/UserByEmail?email="+ email +"", // Pass the current user email
  "method": "GET",
  "headers": {
    "authorization": auth         // Pass the authorization header value
  },
  success: function(response)
  {
 unameid = response.UserID;  // Get the user Id from the response
 },
 error: function(error)
  {
  console.log("error occured");
  }
});

Now let’s go and generate the category ID

Get all the categories In JITBIT system

// Get Categories

function getCategories()
{
$.ajax({
  "async": true,
  "crossDomain": true,
  "url": "https://vinodh.jitbit.com/helpdesk/api/categories",
  "method": "GET",
  "headers": {
    "authorization": auth    // authorization header
  },
  success: function(data)
  {
  var $prevGroup, prevGroupName;
// Have some workaround to append the department into select box
  $.each(data, function () {
  console.log(data);
  if (prevGroupName != this.Section) {
// Department category has been passed into option group
        $prevGroup = $('<optgroup />').prop('label', this.Section).appendTo('#picktech');
   }
// Get the category Id from the response and pass it to the selection option value
    $("<option />").val(this.CategoryID).text(this.Name).appendTo($prevGroup);
    prevGroupName = this.Section;
}); 
 },
  error: function(error)
  {
  console.log("error occured");
  }
});
}

HTML:

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

Finally, we got 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

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
// Now the ajax request calls
$.ajax({
  "async": true,
  "crossDomain": true,
  "url": "https://vinodh.jitbit.com/helpdesk/api/ticket",
  "method": "POST",
  "headers": {
   "authorization": auth
  },
  "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("");
},
 error: function(error)
  {
//Capture the error of API Call
  swal({
            title: "Oops!",
            text: "Something Went wrong",
            type: "error"
     });
  }
});
 }

HTML Code:

<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>
// Call the create ticket function in the onclick event
<button type="button" class="btn btn-primary" onclick="createTicket()">Create</button>
</div>
</div>
</div>
</section>

Render the HTML file into content editor webpart

to create a ticket in JITBIT helpdesk system

Fetches current user name 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 valid in JITBIT helpdesk system

Some Important thing to remember:

  • Sharepoint user email must be a valid user in JITBIT helpdesk else ticket has been created by authorize account probably admin account
  • Ticket has been created only behalf of user in my scenario

You can also use this file in sample HTML application

Happy Sharepointing!……

Please follow and like us:
0

LEAVE A REPLY

Please enter your comment!
Please enter your name here