Hello. We are using the "My Delegates" [my_delegates] widget and need to customize to include start and end dates. I have everything working except for new delegate entries.
-> Existing delegates (update): The date displays correct and can be updated using the calendar.
-> New delegates (insert): The date is cleared (correct value) but I'm unable to open the calendar.
Console error:
Error: can't access property "label", n.field is undefined
<div ng-show="depsLoaded" ng-class="{'sp-date-input-group': snDisabled, 'input-group': !snDisabled, 'has-error': field.isInvalidDateFormat || field.isInvalid}" style="width: 100%;" role="presentation" field="item.starts" ng-model="item.starts" sn-change="" sn-include-time="true" class="ng-isolate-scope">
Widget code
HTML
<snh-panel rect="rect" title="'${My Delegates}'">
<div style="width: 100%; padding: 5px 50px;">
<table class="table table-hover table-condensed">
<thead>
<tr>
<th style="text-align: center;">Delegate</th>
<th style="text-align: center;">Approvals</th>
<th style="text-align: center;">Assignments</th>
<th style="text-align: center;">CC Notifications</th>
<th style="text-align: center;">Meeting Invitations</th>
<th style="text-align: center;">Start Date</th>
<th style="text-align: center;">End Date</th>
<th style="text-align: center;">Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.listItems track by item.id | orderBy: 'delegate'" ng-hide="item.removed" $index>
<td data-th="Delegate">
<sn-avatar class="avatar-small-medium" primary="item.id" show-presence="true"/>
{{item.delegate}}
<td data-th="Approvals" style="text-align: center;"><input type="checkbox" ng-model="item.approvals"/></td>
<td data-th="Assignments" style="text-align: center;"><input type="checkbox" ng-model="item.assignments"/></td>
<td data-th="CC Notifications" style="text-align: center;"><input type="checkbox" ng-model="item.notifications"/></td>
<td data-th="Meeting Invitations" style="text-align: center;"><input type="checkbox" ng-model="item.invitations"/></td>
<td data-th="Start Date" style="text-align: center;"><sp-date-picker field="item.starts" ng-model="item.starts" sn-change="" sn-include-time="true"/></td>
<td data-th="End Date" style="text-align: center;"><sp-date-picker field="item.ends" ng-model="item.ends" sn-change="" sn-include-time="true"/></td>
<td data-th="Remove" style="text-align: center;"><img src="/images/delete_row.gif" ng-click="removePerson($index)" alt="Click here to remove this person as a delegate" title="Click here to remove this person from the list" style="cursor: pointer;"/></td>
</tr>
</tbody>
</table>
<p>To add a delegate to the list, select a person from below:</p>
<sn-record-picker id="snrp"
field="data.personToAdd"
ng-change="addSelected()"
table="'sys_user'"
display-field="'name'"
display-fields="'title,department,location,email'"
value-field="'sys_id'"
search-fields="'name,email'"
page-size="20"
placeholder="Search for a user..."
default-query="data.myQuery"></sn-record-picker>
<br/>
<p>To remove a delegate from the list, click on the Remove icon.</p>
</div>
<div style="width: 100%; padding: 5px 50px; text-align: center;">
<button ng-click="saveDelegates()" class="btn btn-primary ng-binding ng-scope" role="button" title="Click here to save your changes">Save</button>
<button ng-click="returnToProfile()" class="btn ng-binding ng-scope" role="button" title="Click here to cancel your changes">Cancel</button>
</div>
</snh-panel>
Server
(function() {
data.userID = gs.getUser().getID();
data.listItems = data.listItems || fetchList();
data.list2Items = data.list2Items || fetchList2();
if (input) {
data.listItems = input.listItems || fetchList();
if (input.personToAdd && input.personToAdd.value > '') {
addPersonToList(input.personToAdd.value);
}
if (input.button == 'save') {
saveList();
}
}
function fetchList() {
var gdt = new GlideDateTime();
var list = [];
var delegateGR = new GlideRecord('sys_user_delegate');
delegateGR.addQuery('user', data.userID);
delegateGR.orderBy('delegate.name');
delegateGR.query();
while (delegateGR.next()) {
var thisDelegate = {};
thisDelegate.sys_id = delegateGR.getValue('sys_id');
thisDelegate.id = delegateGR.getValue('delegate');
thisDelegate.delegate = delegateGR.getDisplayValue('delegate');
thisDelegate.approvals = (delegateGR.getValue('approvals') == 1);
thisDelegate.assignments = (delegateGR.getValue('assignments') == 1);
thisDelegate.notifications = (delegateGR.getValue('notifications') == 1);
thisDelegate.invitations = (delegateGR.getValue('invitations') == 1);
thisDelegate.starts = delegateGR.getDisplayValue('starts');
thisDelegate.ends = delegateGR.getDisplayValue('ends');
list.push(thisDelegate);
}
return list;
}
function fetchList2() {
var list = [];
var today = new Date();
var delegationGR = new GlideRecord('sys_user_delegate');
delegationGR.addQuery('delegate', data.userID);
delegationGR.orderBy('user.name');
delegationGR.query();
while (delegationGR.next()) {
var stillActive = true;
var endDate = '';
if (delegationGR.getValue('ends')) {
endDate = new GlideDate();
endDate.setValue(delegationGR.getValue('ends'));
// endDate = endDate.getByFormat('yyyy/MM/dd');
if (today.after(new Date(endDate))) {
stillActive = false;
} else {
if (new Date(endDate).getFullYear() == 2100) {
endDate = '';
}
}
}
if (stillActive) {
var thisDelegation = {};
var delegations = [];
if (delegationGR.getValue('approvals') == 1) {
delegations.push('Approvals');
}
if (delegationGR.getValue('assignments') == 1) {
delegations.push('Assignments');
}
if (delegationGR.getValue('notifications') == 1) {
delegations.push('CC on Notifications');
}
if (delegationGR.getValue('invitations') == 1) {
delegations.push('Meeting Invitations');
}
if (delegations.length > 0) {
thisDelegation.sys_id = delegationGR.getValue('sys_id');
thisDelegation.id = delegationGR.getValue('user');
thisDelegation.user = delegationGR.getDisplayValue('user');
thisDelegation.ends = endDate;
thisDelegation.delegations = '';
var separator = '';
for (var i = 0; i < delegations.length; i++) {
thisDelegation.delegations += separator;
thisDelegation.delegations += delegations[i];
if (delegations.length > 2) {
separator = ', ';
if (i == (delegations.length - 2)) {
separator = ', and ';
}
} else {
separator = ' and ';
}
}
list.push(thisDelegation);
}
}
}
return list;
}
function saveList() {
for (var i = 0; i < data.listItems.length; i++) {
var thisDelegate = data.listItems[i];
if (thisDelegate.removed) {
if (thisDelegate.sys_id != 'new') {
var gr = new GlideRecord('sys_user_delegate');
gr.get(thisDelegate.sys_id);
gr.deleteRecord();
}
} else {
var delegateGR = new GlideRecord('sys_user_delegate');
if (thisDelegate.sys_id != 'new') {
delegateGR.get(thisDelegate.sys_id);
} else {
delegateGR.initialize();
delegateGR.user = data.userID;
delegateGR.delegate = thisDelegate.id;
}
delegateGR.approvals = thisDelegate.approvals;
delegateGR.assignments = thisDelegate.assignments;
delegateGR.notifications = thisDelegate.notifications;
delegateGR.starts = thisDelegate.starts;
delegateGR.ends = thisDelegate.ends;
delegateGR.update();
}
}
gs.addInfoMessage('Your Delegate information has been updated.');
}
function addPersonToList(selected) {
var existing = -1;
for (var i = 0; i < data.listItems.length && existing == -1; i++) {
if (data.listItems[i].id == selected) {
existing = i;
}
}
if (existing == -1) {
var thisDelegate = {};
thisDelegate.sys_id = 'new';
thisDelegate.id = selected;
var userGR = new GlideRecord('sys_user');
userGR.get(selected);
thisDelegate.delegate = userGR.getDisplayValue('name');
thisDelegate.approvals = true;
thisDelegate.assignments = true;
thisDelegate.notifications = true;
//thisDelegate.starts = true;
//thisDelegate.ends = true;
data.listItems.push(thisDelegate);
} else {
data.listItems[existing].removed = false;
}
input.personToAdd = {};
}
})();
Client
function MyDelegates($scope, $window) {
var c = this;
c.data.personToAdd = {
value: '',
displayValue: ''
};
c.data.myQuery = 'active=true';
$scope.addSelected = function() {
$scope.server.update().then(function(response) {
$('#snrp').select2("val", "");
});
};
$scope.removePerson = function(i) {
c.data.listItems[i].removed = true;
};
$scope.saveDelegates = function() {
c.data.button = 'save';
$scope.server.update().then(function(response) {
reloadPage();
});
};
$scope.returnToProfile = function() {
reloadPage();
};
function reloadPage() {
$window.location.reload();
}
}
I've referenced sp-date-picker not opening calendar but this displays the date field empty for all records. Also, updating one value changes the value for all records.
