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