We’ve had a lot of questions about how the client side and server side of a widget can communicate, so this week I thought it would be a good idea to offer a quick demonstration. In this tutorial we will create a widget that allows the user to add or remove items from a list. In this case it’s just a simple Array, but it could just as easily be using GlideRecord against a table.
Here is the sample code used in the video:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div class="panel panel-default"> <div class="panel-body m-b-n"> <ul class="list-group"> <li ng-if="c.data.messages.length == 0" class="list-group-item">${No Messages}</li> <li class="list-group-item" ng-repeat="message in c.data.messages track by $index"> <span>{{message}}</span> <a href="" ng-click="c.remove($index)" class="fa fa-remove pull-right text-danger"></a> </li> </ul> </div> <div class="panel-footer text-center"> <div class="input-group"> <input type="text" ng-model="c.data.message" class="form-control" aria-label="..."> <div class="input-group-btn"> <button type="submit" ng-click="c.add()" class="btn btn-primary">Add</button> </div> </div> </div> </div> |
Server Script:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | (function() { data.messages = []; if (input) { data.messages = input.messages; if (input.action == "addMessage") { data.messages.push(input.message); } if (input.action == "removeMessage") { data.messages.splice(input.i,1); } } })(); |
Client Script:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function() { /* widget controller */ var c = this; c.add = function() { c.data.action = "addMessage"; c.server.update().then(function(){ c.data.action = undefined; c.data.message = ""; }) } c.remove = function(i) { c.data.i = i; c.data.action = "removeMessage"; c.server.update().then(function(){ c.data.action = undefined; }) } } |
Thanks Nathan for this quick shot. Though, you might want to change places of Client script to server-script and vice-versa.
Anyways thanks for this.
Good catch.
Can you help how to updated all field information on Form when we click on UPDATE button .
actually with-out calling each individual field in server-side script [ gr.setValue(‘incident_state’, 6); ]…how to call all form fields and save whole form fields info….?
Thanks a lot. Nathan, that’s very useful.
Thanks, Nathan!!
I was looking for the server call method implementation from client script and this one is awesome.
Hey I want to submit to the database tables using the input fields
Hi,
Page was not responsive , it takes some time maybe 1-2 sec to add or remove record
Hi,
If i used data.text = incident.number, its showing blank in the page and if encoded with data.text =’test’+incident.number then its showing in the proper way. Whats the problem in the first case.
Haven’t tested, but maybe it has to be a string. With “test”+incident.number you’re casting it as a string.
Can you elaborate on how input.notes is being used here. Is this Angular magic creating an array based off of data.note?
It’s Service Portal magic. When you call the Server Script from the controller, whatever you pass becomes “input” on the server (usually “data”).