How can I update Widget HTML data after server.get() ?
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
02-09-2024 09:27 AM
Hi, I'm trying to stay with the OOB widget Announcements, and my goal is to filter the announcements records and then show the result, I achieved the filtering in a tricky way still utilizing the spAnnouncement API.The problem is that when I call the server side utilizing server.get(), in my response I call another function to set the c. object properties like c.announcements that is used in the HTML ng-repeat.
The HTML doesn't update with the updated c. objectI believe that's because it doesn't wait for my functions to populate the object and it doesn't take track of the updated values.Could you help me with this? Below the widget code (the function that I worked in client Controller is c.goToPage, in server script i just added the action getCompany)
HTML
<div ng-class="['panel', 'panel-{{::c.options.color}}', 'b', 'spw-announcements-root', '{{::c.wid}}', {'accessibility-off': c.accessibilityOff}]">
<div class="panel-heading">
<h3 class="h4 panel-title"><span ng-if="c.options.glyph"><fa class="flip-icon-rtl" name="{{::c.options.glyph}}"></fa></span>{{::c.options.title}}</h3>
</div>
<ul ng-if="::(c.totalAnnouncements > 0)" class="list-group" style="max-height: none; overflow-y: auto;">
<li ng-class="['list-group-item', {'can-expand': a.canExpand, expanded: a.expanded}, cssId]" ng-repeat="a in c.announcements" ng-init="::(cssId = 'announcement-' + a.id + '-' + c.wid)">
<style ng-if="::c.options.use_display_style" ng-init="::(ds = c.getDisplayStyle(a))">
li.{{::cssId}} {
background-color: {{::ds.backgroundColor}};
text-align: {{::ds.alignment.toLowerCase()}};
}
li.{{::cssId}},
li.{{::cssId}} .details div.title div,
li.{{::cssId}} .details div.title a,
li.{{::cssId}} .details a.info-link {
color: {{::ds.foregroundColor}} !important;
}
li.{{::cssId}} .details p {
font-weight: 100;
}
li.{{::cssId}}:hover .details div.title a,
li.{{::cssId}} .details a.info-link {
text-decoration: underline;
}
</style>
<div class="details" ng-init="c.linkSetup(a)">
<div ng-if="a.canExpand" class="title" ng-class="{'expanded': !a.expanded}" data-aid="{{::a.id}}" ng-click="c.toggleDetails(a)" tabindex="0" role="button" aria-expanded="{{a.expanded}}" ng-attr-aria-controls="{{a.canExpand ? c.wid+'-'+a.id+'-summary' : undefined}}">
<div ng-if="a.linkType !== 'title'" ng-bind="::a.title" id="{{::c.wid}}-{{::a.id}}-title"></div>
<a ng-if="a.linkType === 'title'" ng-bind="::a.title" ng-href="{{::a.targetLink}}" target="{{::a.linkTarget}}" id="{{::c.wid}}-{{::a.id}}-title" tabindex="0"></a>
<span ng-if="a.canExpand" class="glyphicon glyphicon-menu-down" aria-label="{{a.expanded ? '${Hide details}' : '${Show details}'}}"></span>
</div>
<div ng-if="!a.canExpand" class="title" data-aid="{{::a.id}}">
<div ng-if="a.linkType !== 'title'" ng-bind="::a.title" id="{{::c.wid}}-{{::a.id}}-title"></div>
<a ng-if="a.linkType === 'title'" ng-bind="::a.title" ng-href="{{::a.targetLink}}" target="{{::a.linkTarget}}" id="{{::c.wid}}-{{::a.id}}-title" tabindex="0"></a>
</div>
<div ng-if="a.canExpand" id="{{::c.wid}}-{{::a.id}}-summary" aria-labelledby="{{::c.wid}}-{{::a.id}}-title" role="region">
<p ng-if="::a.summary" ng-bind="::a.summary"></p>
<a class="info-link" ng-if="a.linkType === 'normal'" ng-bind="::a.targetLinkText" ng-href="{{::a.targetLink}}" target="{{a.linkTarget}}" aria-label="{{a.targetLinkText}}" tabindex="{{a.expanded ? 0 : -1}}"></a>
</div>
</div>
</li>
</ul>
<div ng-if="::(c.totalAnnouncements === 0)" class="empty-state-content panel-body">
<p>${No information available}</p>
</div>
<div class="panel-footer" ng-if="c.totalPages > 1">
<div ng-if="::c.options.paginate" class="btn-toolbar m-r pull-left">
<div class="btn-group">
<a ng-disabled="c.currentPage === 1" href="javascript:void(0)" ng-click="c.currentPage === 1 ? null : c.goToPage(c.currentPage - 1)" class="btn btn-default" aria-label="${Previous page}" role="button"><i class="fa fa-chevron-left flip-icon-rtl"></i></a>
</div>
<div ng-if="c.totalPages > 1 && c.totalPages < 3" class="btn-group">
<a ng-repeat="i in c.getNumArray(c.totalPages) track by $index" ng-click="c.goToPage($index + 1)" href="javascript:void(0)" ng-class="{active: ($index + 1) === c.currentPage}" type="button" class="btn btn-default" aria-label="${Page} {{$index + 1}}" role="button">{{$index + 1}}</a>
</div>
<div class="btn-group">
<a ng-disabled="c.currentPage === c.totalPages" href="javascript:void(0)" ng-click="c.currentPage === c.totalPages ? null : c.goToPage(c.currentPage + 1)" class="btn btn-default" aria-label="${Next page}" role="button"><i class="fa fa-chevron-right flip-icon-rtl"></i></a>
</div>
</div>
<div ng-if="::c.options.paginate" class="m-t-xs panel-title pull-left">{{c.getPageInfo()}}</div>
<div ng-if="::(!c.options.paginate)" class="m-t-xs panel-title pull-left no-margin">${First {{::c.totalAnnouncements}} of {{::c.totalRecords}}}</div>
<a ng-if="::(c.options.view_all_page && !c.isViewAllPage())" ng-class="['pull-right', {'push-margin': c.options.paginate}]" ng-href="?id={{::c.options.view_all_page}}" role="link">${View all}</a>
<span class="clearfix"></span>
</div>
</div>
Client Controller
function($scope, $timeout, $location, spAnnouncement, spUtil, spAriaUtil) {
var c = this;
c.wid = 'spw-announcements-' + new Date().getTime();
c.accessibilityOff = spAriaUtil.g_accessibility === 'false';
c.announcements = [];
c.totalAnnouncements = 0;
c.companyPrefix = 'CompanyPrefix:'
c.companySuffix = ':CompanySuffix'
c.category = 'news:'
c.company;
c.toggleDetails = function(announcement) {
announcement.expanded = !announcement.expanded;
};
c.isViewAllPage = function() {
return $location.search().id === c.options.view_all_page;
};
c.getNumArray = function(number) {
return new Array(number);
};
c.getPageInfo = function() {
var limit = parseInt(c.options.max_records, 10);
var offset = (c.currentPage - 1) * limit;
var end = offset + limit;
return spUtil.format(c.data.rowsMessage, {
'0': offset + 1,
'1': end < c.totalRecords ? end : c.totalRecords,
'2': c.totalRecords
});
};
c.goToPage = function(page, firstLoad) {
var i = Number.MAX_SAFE_INTEGER
var x = 1
var result;
c.server.get({
action: "getCompany"
}).then(function(response) {
c.company = response.data.company;
fetchData()
});
function fetchData() {
//FETCH ALL THE DATA WITHOUT FILTERS
result = spAnnouncement.get(spAnnouncement.filterOnType(c.options.type), i, x);
//ALL FILTERS THAT I APPLY: THEY WORK AND RETURN AN ARRAY WITH THE EXPECTED RECORDS
result.data = result.data.filter(function(obj) {
if (obj.summary.substring(0, (obj.summary.indexOf(c.companySuffix) + c.companySuffix.length)).length == 28) {
return true;
} else {
return obj.summary.substring(c.companyPrefix.length, obj.summary.indexOf(c.companySuffix)) == c.company
}
})
result.data = result.data.filter(function(obj) {
return obj.title.indexOf(c.category) == 0;
})
result.data.forEach(function(obj) {
obj.title = obj.title.substring(c.category.length)
});
//FILTERS END
c.totalPages = Math.ceil(result.data.length / c.options.max_records)
c.totalRecords = result.data.length;
result.data = result.data.slice(((page * c.options.max_records) - c.options.max_records), (page * c.options.max_records))
c.currentPage = page;
c.announcements = result.data;
c.totalAnnouncements = result.data.length;
c.announcements.forEach(function(a) {
a.canExpand = a.summary || a.targetLinkText;
a.expanded = false;
});
$(document).ready(function() {
if (!firstLoad)
setFocus();
});
}
};
c.linkSetup = function(a) {
a.linkTarget = '_self';
if ('urlNew' === a.clickTarget) {
a.linkTarget = '_blank';
}
a.linkType = !a.targetLink ? 'none' : a.targetLinkText ? 'normal' : 'title';
};
c.getDisplayStyle = function(announcement) {
return announcement.displayStyle || {
backgroundColor: '#006ed5',
foregroundColor: '#ffffff',
alignment: 'LEFT'
};
};
function setFocus() {
var ul = $('.' + c.wid).find('ul');
if (!ul.length) {
$timeout(setFocus);
return;
}
$timeout(function() {
ul.first().focus();
}, 20);
}
c.goToPage(1, true);
}
Server Script
(function() {
if (input && input.action == "getCompany") {
data.company = gs.getUser().getCompanyID();
}
if (options.title)
options.title = gs.getMessage('{0}', options.title);
else
options.title = gs.getMessage('Announcements');
options.max_records = options.max_records ? options.max_records : 20;
options.paginate = options.paginate === 'true' && options.max_records;
options.use_display_style = options.use_display_style === 'true';
data.rowsMessage = gs.getMessage('Rows {0} - {1} of {2}');
if (options.view_all_page) {
var gr = $sp.getPageRecord(options.view_all_page, null);
options.view_all_page = gr.getValue('id');
}
if (options.type) {
var types = [];
var typeIds = options.type.split(',');
var typesMap = $sp.getAnnouncementConsumerType(typeIds);
typeIds.forEach(function(typeId){
types.push(typesMap.get(typeId));
});
options.type = types.join(',');
}
})();
Thank you
0 REPLIES 0
