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
- <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, 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
- 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);
-
- $('#lblemail').val(email);
- }
-
- 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, 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
- 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
- },
- success: function(response) {
- unameid = response.UserID;
- },
- error: function(error) {
- console.log("error occured");
- }
- });
Now, let’s go and generate the Category ID.
Get all the categories In JITBIT system
-
- function getCategories() {
- $.ajax({
- "async": true,
- "crossDomain": true,
- "url": "https://vinodh.jitbit.com/helpdesk/api/categories",
- "method": "GET",
- "headers": {
- "authorization": auth
- },
- success: function(data) {
- var $prevGroup,
- prevGroupName;
- $.each(data, function() {
- console.log(data);
- if (prevGroupName != this.Section) {
-
- $prevGroup = $('<optgroup />').prop('label', this.Section).appendTo('#picktech');
- }
-
- $("<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 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.
- function createTicket() {
-
-
- catID = $('#picktech').val();
- ticketBody = $('#txtbody').val();
- ticketSubject = $('#txtsub').val();
- pId = $('#picktech2').val();
- var form = new FormData();
- form.append("categoryId", catID);
- form.append("body", ticketBody);
- form.append("subject", ticketSubject);
- form.append("priorityId", pId);
- form.append("userId", unameid);
- $.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,
- success: function(response) {
- swal({
- title: "Awesome!",
- text: "Ticket: " + response + " has been created successfully",
- type: "success"
- });
- $('#picktech').val("");
- $('#txtbody').val("");
- $('#txtsub').val("");
- $('#picktech2').val("");
- },
- error: function(error) {
-
- 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>
- </div>
- </div>
- </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