Just started working with Widget Builder, and I was wondering how can I print an object that is being returned in a Data Broker Server Script into a html template widget? Should I use the client script or server script?
Are server scripts the same as Data Broker Server Scripts ?
Hey Chris,
Thank you for the documentation and example provided. They have been very helpful to get an overall picture on Service Portal. The issue I'm currently facing is regarding a Transform function which is doing an external request and returning an object. I'm attaching a picture for further reference.
Therefore, back to my prompt question, I'm looking to print the returning object in a dropdown field html. I was able to built such logic in UIB however UIB is very limited when doing designs and creating order guide with multiple steps.
Hi @Teo Gamarra ,
My apologies. I haven't worked with the Data Broker Script before but everything that I see it being used for is with the Now Experience framework. I do not think that it can be accessed via a portal widget.
However, the same logic from Data Broker can be constructed in the Server Script of the portal widget. Then the response can be used to create the drop down in any of the manners I presented in my first post.
Here is an example of pulling data from an external source and displaying a simple select element with options
HTML
<div>
<form name="programFileForm">
<div class="form-group">
<label for="program_profile">Program Profile</label>
<select id="program_profile" name="program_profile" class="form-control" ng-model="c.programProfile" ng-change="doStuff()">
<option value="">-- None --</option>
<option ng-value="profile.id" ng-repeat="profile in data.profiles">{{ profile.label }}</option>
</select>
</div>
</form>
</div>
Client Controller
api.controller=function($scope) {
var c = this;
c.programFile = null;
$scope.doStuff = function(){
console.log("Program Profile",c.programProfile)
}
};
Server Script
(function() {
try {
var sm = new sn_ws.RESTMessageV2();
sm.setEndpoint('https://fakerapi.it/api/v1/custom?_quantity=5&profile_id=vat&profile_name=name');
sm.setHeader("Accept", "*/*");
sm.setHttpMethod("GET");
var response = sm.execute();
var httpStatus = response.getStatusCode();
var respBody = JSON.parse(response.getBody());
data.profiles = respBody.data.map(function(obj){
return {
"id": obj.profile_id,
"label": obj.profile_name
}
});
} catch (err) {
data.error = err;
}
})();
Hi @Teo Gamarra ,
I'm not familiar with the "Data Broker Server Script" term but if you're asking if how to access data from the server side script of a service portal widget then see the following.
ServiceNow Service Portal Widgets provide a "data" object that can be accessible both client side and data side.
From client side:
HTML markup - The data object can be accessed by calling the data object directly. If as a value within elements use the double mustache (double curly braces).
Server Script example:
(function() {
var userSysId = gs.getUserID();
var accountGr = new GlideRecord('sys_user');
if(accountGr.get(userSysId)){
data.account = {};
$sp.getRecordValues(data.account, accountGr, 'first_name,last_name')
}
data.accountList = [];
var accountListGr = new GlideRecord('sys_user');
accountListGr.addActiveQuery();
accountListGr.setLimit(2);
accountListGr.query();
while(accountListGr.next()){
var accountObj = {};
$sp.getRecordValues(accountObj, accountListGr, 'first_name,last_name')
data.accountList.push(accountObj);
}
})();
Accessing through HTML markup
<span>{{ data.account.first_name }}</span>
<span>{{ data.account.last_name }} </span>
Or if using as a variable for an AngularJS directive you don't necessarily need the curly braces. I.e. using ng-repeat directive
<p ng-repeat="account in data.accountList">
<span>{{ account.first_name }}</span>
<span>{{ account.last_name }}</span>
</p>
From the client controller inject $scope or use from c
api.controller=function($scope) {
var c = this;
console.log(
"$scope: ",$scope.data.account.first_name,
"\n",
"C: ", c.data.account.first_name,
"\n",
"Array: ", $scope.data.accountList,
"\n",
"User object: ", $scope.user.first_name
)
};
As a side note, I see in your example the script is getting user data from server side. For basic user information a user object for the logged in user is already available client side. It's accessible straight from HTML markup and through $scope in the client controller.
<span>{{ user.first_name }}</span>api.controller = function ($scope){
var c = this;
console.log($scope.user.first_name);
}
References:
Hey Chris,
Thank you for the documentation and example provided. They have been very helpful to get an overall picture on Service Portal. The issue I'm currently facing is regarding a Transform function which is doing an external request and returning an object. I'm attaching a picture for further reference.
Therefore, back to my prompt question, I'm looking to print the returning object in a dropdown field html. I was able to built such logic in UIB however UIB is very limited when doing designs and creating order guide with multiple steps.
Hi @Teo Gamarra ,
My apologies. I haven't worked with the Data Broker Script before but everything that I see it being used for is with the Now Experience framework. I do not think that it can be accessed via a portal widget.
However, the same logic from Data Broker can be constructed in the Server Script of the portal widget. Then the response can be used to create the drop down in any of the manners I presented in my first post.
Here is an example of pulling data from an external source and displaying a simple select element with options
HTML
<div>
<form name="programFileForm">
<div class="form-group">
<label for="program_profile">Program Profile</label>
<select id="program_profile" name="program_profile" class="form-control" ng-model="c.programProfile" ng-change="doStuff()">
<option value="">-- None --</option>
<option ng-value="profile.id" ng-repeat="profile in data.profiles">{{ profile.label }}</option>
</select>
</div>
</form>
</div>
Client Controller
api.controller=function($scope) {
var c = this;
c.programFile = null;
$scope.doStuff = function(){
console.log("Program Profile",c.programProfile)
}
};
Server Script
(function() {
try {
var sm = new sn_ws.RESTMessageV2();
sm.setEndpoint('https://fakerapi.it/api/v1/custom?_quantity=5&profile_id=vat&profile_name=name');
sm.setHeader("Accept", "*/*");
sm.setHttpMethod("GET");
var response = sm.execute();
var httpStatus = response.getStatusCode();
var respBody = JSON.parse(response.getBody());
data.profiles = respBody.data.map(function(obj){
return {
"id": obj.profile_id,
"label": obj.profile_name
}
});
} catch (err) {
data.error = err;
}
})();
