Dynamically changing \$sp.getWidget options in Client Script

[xiaix]

Calling widget:

server:

(function() {
       var userLocation_sysID = gs.getUser().getLocation();
       var userSysID = gs.getUserID();
       data.deptList = [];
       var grSITE = new GlideRecord('u_bcpa_sites');
       grSITE.addQuery('u_active', true);
       grSITE.addQuery('u_location', userLocation_sysID);   
       grSITE.query();
       if (grSITE.next())
       {
               var deptList = [];
               var grDEPT = new GlideRecord('u_bcpa_departments');
               grDEPT.addQuery('u_active', true);
               grDEPT.addQuery('u_bcp_site', grSITE.sys_id.toString());
               grDEPT.addQuery('u_department_author', userSysID);
               grDEPT.query();
               while (grDEPT.next())
               {
                       deptList.push({
                               name: grDEPT.u_department_name.toString(),
                               sysid: grDEPT.sys_id.toString(),
                               updated: grDEPT.sys_updated_on.toString()
                       });
               }
               data.deptList = deptList;
               if (deptList.length)
               {
                       // Default widget option sys_id to the first department record sys_id.
                       // Will be dynamically changed later depending on what user selects.
                       var deptEditWidgetOptions = {"sys_id": deptList[0].sysid, "testName":""};
                       data.deptEditWidget = $sp.getWidget("bcp-dept-edit-widget", deptEditWidgetOptions);
               }
       }
})();

client:

function($rootScope, $scope, $http, spUtil, $timeout, $location, $compile, $element) {
   var c_this = this;
       $scope.navigateToDept = function(id)
       {
               if ($scope.data.deptEditWidget)
               {
                       $scope.data.deptEditWidget.options.sys_id = id;
                       $scope.data.deptEditWidget.options.testName = id;
                       $scope.data.deptEditWidget.rectangle.sys_id = id;
                       var widg = '<sp-widget widget="data.deptEditWidget"></sp-widget>';
                       var el = $compile(widg)($scope);
                       $element.append(el);
               }
       }
}

html:

<div>
   <div class="innerDIV">
       <table class="tableClass">
           <tr>
               <td colspan="2" class="headingTitle">Choose a department to edit</td>
           </tr>
           <tr>
               <td class="columnTitle">Dept.</td>
               <td class="columnTitle">Last Updated</td>
           </tr>
           <tr id="deptTR" ng-repeat="dept in data.deptList" ng-click="navigateToDept(dept.sysid)">
               <td class="deptName">{{dept.name}}</td>
               <td class="deptName">{{dept.updated}}</td>
           </tr>
       </table>
   </div>
</div>

Called widget:

server:

(function() {
       if (options)
               data.opts = options;
})();

client:

function($rootScope, $scope, $http, spUtil, $timeout, $location, $compile, $element) {
       var c_this = this;
       console.dir($scope.data.opts);
}

Result:

It seems that testName didn't get transferred over to the instantiation of the widget, and the sys_id is always what it first grabbed from the server code, not what was dynamically set.

So, am I to assume that the client script cannot edit/alter the $sp.getWidget options?

[xiaix]

I feel I'm on the right track from this post: Re: Portal- Refreshing embedded widgets by option value

Here's my new CALLING widget:

client:

function($rootScope, $scope, $http, spUtil, $timeout, $location, $compile, $element) {
       var c_this = this;
       $scope.navigateToDept = function(id)
       {
               spUtil.get("bcp-dept-edit-widget",{"testID":id}).then(function(response) {
                       $scope.data.deptEditWidget = response;
                       console.dir(response);
               });
       }
}

html:

<div ng-if="!data.deptEditWidget">
   <div class="innerDIV">
       <table class="tableClass">
           <tr>
               <td colspan="2" class="headingTitle">Choose a department to edit</td>
           </tr>
           <tr>
               <td class="columnTitle">Dept.</td>
               <td class="columnTitle">Last Updated</td>
           </tr>
           <tr id="deptTR" ng-repeat="dept in data.deptList" ng-click="navigateToDept(dept.sysid)">
               <td class="deptName">{{dept.name}}</td>
               <td class="deptName">{{dept.updated}}</td>
           </tr>
       </table>
   </div>
</div>
<div class="elementRow" ng-if="data.deptEditWidget">
   <sp-widget widget="data.deptEditWidget"></sp-widget>
</div>

Only problem is, testID option is nowhere to be found!

[xiaix · Accepted solution]

Got it.   This works:

CALLING Widget:

server:

(function() {
       if (input.chosenDeptSysId.length == 32)
       {
               data.deptEditWidget = $sp.getWidget("bcp-dept-edit-widget", {"chosenDeptSysId":input.chosenDeptSysId});
       }
})();

client:

function($rootScope, $scope, $http, spUtil, $timeout, $location, $compile, $element) {
       var c_this = this;
       $scope.navigateToDept = function(id)
       {
               $scope.data.chosenDeptSysId = id;
               c_this.server.update().then(function(response) {
                       $scope.data.chosenDeptSysId = '';
               });
       }
}

html:

<div ng-if="!data.deptEditWidget">
   <div class="innerDIV">
       <table class="tableClass">
           <tr>
               <td colspan="2" class="headingTitle">Choose a department to edit</td>
           </tr>
           <tr>
               <td class="columnTitle">Dept.</td>
               <td class="columnTitle">Last Updated</td>
           </tr>
           <tr id="deptTR" ng-repeat="dept in data.deptList" ng-click="navigateToDept(dept.sysid)">
               <td class="deptName">{{dept.name}}</td>
               <td class="deptName">{{dept.updated}}</td>
           </tr>
       </table>
   </div>
</div>
<div class="elementRow" ng-if="data.deptEditWidget">
   <sp-widget widget="data.deptEditWidget"></sp-widget>
</div>

CALLED Widget:

server:

(function() {
       if (options)
       {
               var theDeptSysId = options.chosenDeptSysId;
               if (theDeptSysId.length == 32)
               {
                       /// blah blah do your stuff
               }
       }
})();

Works like a charm.