How to pass objects from server/client script into link function

[yundlu316]

In widget editor, is there a way to pass server/client script objects into link function?  I can't seem to find any documentation on how to do this.  Thanks!

[ChrisBurks]

Remember that in ServiceNow the data object is available via $scope and you can pass scope to the link function:

 function(scope,element,attrs,ctrl) {
      console.log("Scope Client", scope)
      console.log("DATA Object", scope.data);
}

 Of course since scope can be accessed then client objects too.

Also note that you can pass in element (the widget's html template), the attributes of the widget, and the controller.

[Zack Hilacan1]

I can't quite understand, can you put an example getting the object from server then to, link function?

Im trying to get the displayName of the user and displaying it inside a function in the link function.

[ChrisBurks]

Hi Zack,

The data object is a given object within Service Portal. Not only is it given to us but ServiceNow has also made it available via the $scope. What this means is if you need to have data that is accessible from the Server Script side you would want to create a property on that data object.

For example if I needed to grab a user displayName for a user that isn't the logged in user (there is already a given user object on $scope for the logged in user btw) and I had to get it via server script, I would place that info on a new property on data after getting that value.

// Server Script
(function (){
   // notice data does not have to be declared as an object.
   data.displayName = "User D. Name";

  //If I needed more information and want to be somewhat efficient the following can be done too
  data.moreInfo = {
      displayName: "User D. Name",
      userName: "userd.name",
      deptId: "FLR12"
  }

})();

With the above either of those or both of those values would be accessible from the view, client controller and or link function by the following means:

<!-- from the view (HTML) -->
<div>
  <h3>Direct From Server</h3>
   <p> <strong> DisplayName: </strong> {{ data.displayName }} </p>
   <p> <strong> UserName: </strong> {{data.moreInfo.userName}} </p>
  
  <h3>Different Ways from Scope/Controller</h3>
  <p> <strong> DisplayName: </strong> {{c.displayName}} </p>
  <p> <strong> UserName: </strong> {{c.moreInfo.userName}} </p>
  <p> <strong> Dept ID: </strong> {{c.data.moreInfo.deptId}}</p>
  
  <h3>From Link Function</h3>
   <p> <strong>Dept ID: </strong> <span id="dept-id"></span></p>
</div>
    

//client controller
api.controller = function($scope) {
// notice that $scope has to be passed in if you want to use straight from $scope 

var c = this;
c.displayName = $scope.data.displayName;

// or this is possible too when "this" is assigned to the c variable
c.displayName = c.data.displayName;

//and of course the moreInfo object within the data object
c.moreInfo = $scope.data.moreInfo;

}

// the link function

function (scope, element, attrs, controller) {
      //notice that scope can be passed to the link function which from scope you have access to the data object

      //I assume you're going to do some DOM manipulation since you're in the link function to pass a value
      $('#dept-id').text(scope.data.moreInfo.deptId);
}

Hopefully this helps.
Other notes:
From the link function you can also see that element, attrs, and controller arguments exist. The following is what they are:

Element = the actual widget and all its containing markup

Attrs = any attributes placed on the element. For example what if I wanted to know all the classnames on the widget. I could get them from attrs.class

Controller = you guessed it, it's the controller which would be about the same as c. For example I could access data through here too. (controller.data.displayName)