- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-01-2015 12:27 AM
Hi,
Just to clear out the conditions 😃 I'm pretty new to servicenow and developing. Coding has always been there in the background all life, but it has never been my main work.
I'm trying to learn how to get angularJS to work like I want and I've been through a lot of tutorials of AngularJS but I havnt found anyone that covers really how to get the information from ServiceNow. all these always put the data in the controller manually.
And when it comes to REST, Im totally new 😃
I've played around abit with the info from Angular in ServiceNow: Tutorial #3 - REST Calls-John Andersen
and I get it to work. But since that one requires a input for the tickets to show, I want to know how to make a ui page that shows the records without any manually input calling for the function to get it.. but show all the records that my query is. Im trying this out on my personal dev-instance.
In my dream world I would just take away the function part and use the get right up, but I guess Im missing something.
This is what I got.
UI page:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<!-- Import AngularJS Library -->
<g:requires name="angular.min.jsdbx" />
<!-- Import my UI Script - get updated timestamp to invalidate cache if script changes -->
<g2:evaluate var="jvar_stamp">
var gr = new GlideRecord('sys_ui_script');
gr.get("e608a7e94fc41600028f7ab28110c748");
gr.getValue('sys_updated_on');
</g2:evaluate>
<g:requires name="driftinformation.jsdbx" params="cache=$[jvar_stamp]" />
<!-- The User Interface -->
<div ng-app="descEditor" style='padding:40px;'>
<div ng-controller="DescriptionText">
<table><tr>
<!-- <td style='width: 300px; vertical-align: top;'>
<p>NUMBER</p>
<input ng-model="incnum" ng-change="updateRecordList(incnum);"/>
</td> -->
<td style='vertical-align: top; padding: 20px;
background-color: #B2B2B2; width: 200px;'>
<div ng-repeat="num in numbers">{{num.number}}</div>
</td>
</tr></table>
</div>
</div>
</j:jelly>
UI Script:
var myApp = angular.module('descEditor', []);
myApp.controller('DescriptionText', [
'$scope',
'$http',
function($scope, $http) {
$scope.incnum = "INC010";
$scope.url = '/api/now/table/incident';
$http.defaults.headers.common.Accept = "application/json";
$http({
method: 'GET',
url: $scope.url + "?sysparm_query=numberSTARTSWITH"+incnum+
"^ORDERBYDESCnumber"+
"&sysparm_fields=number&sysparm_limit=25",
}).
success( function(data, status) {
$scope.numbers = data.result;
}).
error ( function(data, status) {
$scope.numbers = [{"number": "Error fetching list"}];
});
}
] );
I'm hoping someone in the community can point me in the right direction 😃
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-01-2015 01:34 AM
Hi Göran Lundqvist,
Great to see many pepl trying Angular on Service now. to execute any function on Load u need to use this attribute 'data-ng-init'.
so HTML side looks like this
<div ng-controller="DescriptionText" data-ng-init="getAllActive()">
And your Controller would look like this. add that method.
$scope.getAllActive = function(){
$http({
method: 'GET',
url: $scope.url + "?sysparm_query=active=true",
}).
success( function(data, status) {
$scope.numbers = data.result;
}).
error ( function(data, status) {
$scope.numbers= [{"number": "Error fetching list"}];
});
};
it will show all Active Incidents.
I Hope it WOrks for u.
***mark helpful/like/correct based on impact of reply*****
Regards,
Rushit Patel
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-22-2015 01:09 PM
I think its something else in the background. Im back om my personal dev(Geneva) and comparing the UI page and if you logged on or not. This is above my head, but if I log at the console log, both sides generates the same errrors, but the one where Im logged in is working.
If I click on sources thou I can find that on the one that is wokring there is a js_includes_amb..... but that isnt on the one that isnt working... is this to any help?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-22-2015 01:49 PM
I found abit of the solution.. Now the UI Pages are working... The problem there was that script include wasnt "public". So I needed to add a few lines to the script include to make it possible to be "callable" from a public page..
So I added:
isPublic: function() {
return true;
},
Now the ui page is working. Even you can test it 😃 https://ludev.service-now.com/testdrift.do
but sadly it didnt help the CMS page... but atleast it felt like half a victory.
BTW... I love your avatar. Like I loved our victory over Man City yesterday
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-23-2015 06:47 AM
Hi Goran,
This really looks great.
If you wont mind, could you please share the UI page, UI Script Controller and script include for this app?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-24-2015 01:38 AM
Sure I can do that.
Just let me clean it up and do some proper comments on it as well.
I'll throw it up on my blog as well with some more comments as well. Working on a post about angularJS and how to use JSON to fetch data for it.
And I can't really put it to words, but without the help from rossipatel, I would never had made this far.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-24-2015 02:20 AM
Thank you very much Goran.
That will help alot.
