Dynamic sn-record-picker fields

[amaradiswamy]

Hi All,

I want to create two reference fields which depends on other like user and task. When i select user then in task field only tickets raised by him should be visible.

Also, providing a button "Add Row" if user clicks on this then new two fields will come and same dependency should work for this row also.

I am struggling on assigning field value dynamically to observe and get newvalue that was changed. Please help me to solve this issue.

<tr ng-repeat="rowCounter in table_data track by $index" id="tableRow_{{rowCounter.number}}">               
                   <td ng-repeat="columnObj in rowCounter.fields">
                       <div class="form-group" ng-class="{'has-success' : columnObj.value != ''}">
                           <span ng-switch="columnObj.type">
                               <span ng-switch-when="reference">
                                   <sn-record-picker field="ed_user" table="columnObj.table" display-field="columnObj.displayField" value-field="columnObj.valueField" search-fields="columnObj.searchFields" name="columnObj.name" default-query='' page-size="100" ng-if="columnObj.table == 'sys_user'" id="user" on-change="c.getLaptopDetails(table)"></sn-record-picker>
                                   <sn-record-picker field="columnObj.value" table="columnObj.table" display-field="columnObj.displayField" value-field="columnObj.valueField" search-fields="columnObj.searchFields" name="columnObj.name" default-query="'assigned_to='+user" page-size="100" ng-if="columnObj.table != 'sys_user'"></sn-record-picker>
                               </span>
                               <span ng-switch-when="number">
                                   <input type="number" ng-class="{'form-control-success':columnObj.value > 0}" max="{{columnObj.max}}" min="{{columnObj.min}}" class="form-control" ng-model="columnObj.value" />
                               </span>       
                                 <span ng-switch-when="checkbox">
                                   <input type="checkbox" ng-class="{'form-control-success':columnObj.value > 0}" max="{{columnObj.max}}" min="{{columnObj.min}}" class="form-control checkbox" ng-model="columnObj.value" />
                               </span>   
                               <span ng-switch-default="">
                                   <input type="text" ng-class="{'form-control-success':columnObj.value != ''}" class="form-control" ng-model="columnObj.value" />
                               </span>
                           </span>
                       </div>
                   </td>

Client Controller:

$scope.ed_user ={
name: 'approver'
}
 $scope.$on("field.change", function(evt, parms) {
       if (parms.field.name == 'approver'){
   alert(parms.newValue);
             $scope.user = parms.newValue;
       }
               });

laurentchicoinechiragbagdaichiragb

lchicoineThanks in advance.

Regards

Swamy

[amaradiswamy]

Yes, in service portal it is working fine.

Now, i need to make it work in normal service catalog view also(UI page).

can you please help me with the question posted in below thread.

dynamic g:ui_reference fields in UI page

[saptashwa_chakr]

Hi Laurent,

I want to achieve the same functionality for Assignment Group and Assigned To.

That means One sn-record-picker is for the groups and the second sn-record-picker will be for the users who belong to that group.

I tried a lot but unable to do it.

Please me out.

[amaradiswamy]

Hi Chakrabarti,

You can do the below

1, Create below field 'u_short'(you can change the name) in sys_user_grmember table and update this field with user's name.

Now, use the below script in widget

HTML:

<div ng-repeat="column in columns"> 
   <sn-record-picker field="column.field" table="'sys_user_group'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100"></sn-record-picker>     
<sn-record-picker field="column.field2" table="'sys_user_grmember'"   display-field="'u_short'" value-field="'sys_id'" search-fields="'u_short'" default-query="column.queryField2" page-size="100"></sn-record-picker> 
</div> 
<button ng-click="addRow()"> 
   Add row 
</button> 

Client script:

function($scope, spUtil) {   
$scope.columns = [];   
$scope.addRow = function(){   
var column = {   
field: {   
displayValue: '',   
value: '',   
name: 'user-' + $scope.columns.length   
},   
field2: {   
displayValue: '',   
value: '',   
name: 'task-' + $scope.columns.length   
},   
queryField2: ""   
};   
$scope.columns.push(column);   
};   
$scope.$on("field.change", function(evt, parms) {   
if(parms.field.name.startsWith('user-')){   
var fieldNumber = parms.field.name.split('-')[1];   
var fieldValue = parms.field.value;   
$scope.columns[fieldNumber].queryField2 = 'group='+ fieldValue;   
}   
});   
}   

Regards

Swamy

[LaurentChicoine]

Swamy's answer is not bad, but I would not create a field for that.

Instead I would filter for users that are part of the group by using a client callable Script Include (make sure your users have read access to the sys_user_grmember table).

OTTB in the com.snc.resource_management plugin there is a function for this, If you don't have the plugin simply create the script include in your instance (give it another name in case you end up activating that plugin):

function rmGroupMembers(groupId) {


if (gs.nil(groupId))
return;

var memberIds = [];
var members = new GlideRecord('sys_user_grmember');
members.addQuery('group', groupId);
members.query();

while(members.next()) {
memberIds.push(members.getValue('user'));
}
return memberIds;
}

So you can use that script include in the widget:

HTML:

<div ng-repeat="column in columns">
   <sn-record-picker field="column.field" table="'sys_user_group'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100"></sn-record-picker>   
<sn-record-picker field="column.field2" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" default-query="column.queryField2" page-size="100"></sn-record-picker>
</div>
<button ng-click="addRow()">
   Add row
</button>

Client script:

function($scope, spUtil) {
$scope.columns = [];
$scope.addRow = function(){
var column = {
field: {
displayValue: '',
value: '',
name: 'group-' + $scope.columns.length
},
field2: {
displayValue: '',
value: '',
name: 'user-' + $scope.columns.length
},
queryField2: ""
};
$scope.columns.push(column);
};
$scope.$on("field.change", function(evt, parms) {
if(parms.field.name.startsWith('group-')){
var fieldNumber = parms.field.name.split('-')[1];
var fieldValue = parms.field.value;
$scope.columns[fieldNumber].queryField2 = 'sys_id=javascript:rmGroupMembers("' + fieldValue + '")';
}
});
}

[saptashwa_chakr]

"$scope.columns[fieldNumber].queryField2 = 'sys_id=javascript:rmGroupMembers("' + fieldValue + '")';"

In that line it will be "sys_id=" or "sys_idIN" ?

Because it should contain more than one sys_id.