In this tutorial I create a simple Hello World widget that makes a call to the server to retrieve the “name” of the user based on the “username” entered in the input. This tutorial is specific to the Geneva version of Service Portal.
Also in case you missed my big announcement made earlier today: I’m now available for contract work.
HTML Template:
1 2 3 4 5 6 7 8 9 10 | <div class="panel panel-default" ng-controller="helloWorldController"> <div class="panel-heading"> Username <input class="form-control" ng-model="data.username"> </div> <div class="panel-body"> <p>Hello {{data.username}}</p> <button class="btn btn-primary m-b" ng-click="getUser()" >Button</button> <pre>{{data.user}}</pre> </div> </div> |
JSON Data Producer:
1 2 3 4 5 6 7 8 | // populate the 'data' object var data = {}; if (typeof input != "undefined") { var gr = new GlideRecord('sys_user'); gr.get('user_name', input.username); data.user = gr.getDisplayValue('name'); } new JSON().encode(data); |
Client Script:
1 2 3 4 5 6 7 8 | function helloWorldController($scope, spUtil, $http) { $scope.getUser = function() { var dataURL = spUtil.getWidgetURL($scope); $http.post(dataURL, $scope.data).success(function(response) { angular.extend($scope.data, response.data); }); } } |
Hi,
Where I can see the plugin for the service portal?
It’s not in my application menu.
Thanks,
Lior Grinberg
Love your auto-magic corrections of “spUtil” and “success” 🙂 But seriously, great start to what I hope to be an amazing resource of Angular and Service Portal.
Haha yeah, I didn’t feel like re-recording to fix that. Glad to see someone was paying attention 🙂
Hi Nathan,
I’m a principal at a local San Diego consulting firm. We have an SN practice and are looking for folks to help us accelerate the practice through knowledge of the platform and willingness to participate in Business Development.
Looks great Nathan, thanks for sharing! I look forward to trying out the newer version, as I only tried the initial beta version when Geneva was released. Hope to see you at Knowledge16?
Yup, I’ll be there!
Hi Nathan.
Can you show/describe how to create an appropriate Rectangle to make it work? Your video shows one titled, ‘Ajax’ but doesn’t mention anything about it.
The rectangle sits between the column and the widget. If you go to a column record you will see a related list of rectangles, simply click ‘new’ and then it will ask you what type of widget it is for… then voila! I wrote an article about the Service Portal schema here: https://serviceportal.io/service-portal-in-geneva-overview/
Hey Nathan,
Thank you for example. I was trying out few things on portal and was stuck on how do I store and load html templates based on click events.
scenario: left navigation has some link and based on links I need to load different html pages in main content pane.
Hi Nathan,
This example doesnt work on H. Can you please tell us what changes needs to be made ? how can we call server from the Client ?
Take a look at the ‘Hello World 3’ widget on Helsinki.
Thanks Nathan , that worked.
Hi Nathan,
One small query . i was looking at the User profile widget. In order to get team data, they are making use of this code :
data.teamWidget = $sp.getWidget(‘sp-my-team’, {glyph: ‘user’, color: ‘primary’});
can you please tell me from where does it get the value of widget (sp-my-team) ?
Thanks,
Indumathi
The $sp.getWidget code lives on the server and not something we have access to.
Thanks Nathan
Hi Nathan,
Can you please help me resolve this issue. We have applied a filter using instance with table. But the filter doesnt seam to be getting applied . Neither extra fields added get reflected on the List view in the portal.
Thanks,
Indumathi
This question is not related to this blog post. I would suggest reading the docs on Github: https://github.com/service-portal
Sure Nathan.
Thanks