User Input from Service portal

[Mahesh Nair]

Hi Team, 

I am looking for some help.

What am i trying to do

In service portal:

Trying to find a way to Create a user input 

What is user input: User will  provide an external ticket number (example JIRA, etc.)

Click submit 

Once submitted 

backend will hit the actual external API >> which will fetch the ticket details 

Example lets say

Summary, and description 

and then it creates an Incident ticket 

and user will get the incident ticket number

I created a simple user input HTML template 

HTML

<form class="form-inline">
  <div class="form-group">
     <input type="text" placeholder = "SI#" class="form-control"> 
    </div>
     <button type="submit" class="btn btn-primary mb-2">Submit</button>
     <p> Please provide the sI ticket number</p>
  </form>

I am not sure how to start with client script and server script

[harun_isakovic]

https://developer.servicenow.com/dev.do#!/learn/learning-plans/quebec/servicenow_application_developer/app_store_learnv2_serviceportal_quebec_widget_global_objects_and_functions

Check this out, if it does not help let me know Ill write it down for you.

[Mahesh Nair]

Hi Harun, this is helpful, but would you please me with the code... 

[harun_isakovic]

This would be your HTML body

<form class="form-inline">
  <div class="form-group">
     <input type="text" placeholder = "SI#" ng-model="c.data.modal" class="form-control" id="referenceId"> 
    </div>
     <button type="submit" class="btn btn-primary mb-2" onclick="c.lookupReference()">Submit</button>
     <p> Please provide the sI ticket number</p>
  </form>

Something like this in your Client side part of the widget

api.controller=function() {
  /* widget controller */
  var c = this;
	
	c.lookupReference = function() {
		var reference = document.getElementById("referenceId").value;
		console.log(reference);
		c.data.extRef = reference;
		//c.data.modal = reference;
		c.server.update();
//This will update the Input variable on the server side aka pass the value there.
	}
};

Something like this in your Server side part of the widget

if(input) {
  if(input.modal) {
		//to access the variable we passed from client from input you would reference it like data.extRef
   //Here you would put your server side logic to hit the external API and then
//set its value back into the data.extRef object which will show it to the HTML part
		
    }
}

This isnt tested but hopefully gives you more idea on how to pass values back and forth. These 2 links really helped me when I was developing my simple weather widget

https://docs.servicenow.com/en-US/bundle/sandiego-servicenow-platform/page/build/service-portal/concept/widget-dev-guide.html

https://developer.servicenow.com/dev.do#!/learn/learning-plans/quebec/servicenow_application_developer/app_store_learnv2_serviceportal_quebec_widget_global_objects_and_functions

[harun_isakovic]

Here is the code from my widget which might help

HTML

<div class="outter-div">
<div class="widget-outline">
  <label for="units">Units:</label>

  <select ng-model="c.data.modal" name="units" id="units" ng-change="c.updateTemperature()">
    <option value="metric">Celsius</option>
    <option value="imperial">Fahrenheit</option>
    <option value="standard">Kelvin</option>
  </select>
  <h1>
    {{c.data.temperature}}
  </h1>
</div>
<pre>{{c.data.modal | json}}</pre>
</div>

CSS

.widget-outline {
  border-style: solid;
}

.outter-div {
  height:50;
  width:50%;
  //padding-bottom:20%;
  background-color:lime;
  text-align: center;
}

Client

api.controller=function() {
  /* widget controller */
  var c = this;
	c.data.modal = "metric";
	
	c.updateTemperature = function() {
		var unit = document.getElementById("units").value;
		console.log(unit);
		c.data.unit = unit;
		c.data.modal = unit;
		c.server.update();
	}
};

Server

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */
	//data.modal = "metric";
	if (!input) {
		
loadWidget(data.modal);
	
}
	
if(input) {
  if(input.modal) {
		
      loadWidget(input.modal);
		
    }
}
	
	
	
	function loadWidget(units) {
	
	if (units == "" || units == undefined) {
		units = "metric";
	}
	//data.unit = unit;
	var request = new sn_ws.RESTMessageV2("Open Weather", "Default POST");
	request.setStringParameter("lon", "19.457216");
	request.setStringParameter("lat", "51.759445");
	request.setStringParameter("API_key", "cant show this for security");
	request.setStringParameter("metric", units);
	request.setRequestHeader("Accept","application/json");
var response = request.execute();

var responseBody = JSON.parse(response.getBody());
var responseCode = response.getStatusCode();
data.temperature = responseBody.main.temp;
	}
})();