Creating Ticket In JITBIT Helpdesk System From SharePoint

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 -

• 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, 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);
        // 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, 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 // 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 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() {
    // 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 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