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. });
  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. }
  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