Skip to main content

Service Portal Widget: a 'my issues' widget


 

HTML

<!-- https://xd.adobe.com/view/0305f2c4-d644-4abb-8558-269aab4c658c-5656/screen/8b567bfc-4a32-4b17-9a2c-19e137f1e779/specs/ --> <div class="mi-container"> <div> <!-- your widget template --> <h1 class="mi1"> My Issues</h1> <!-- current user: {{data.sysUserID}}--> </div> <div class="mi-openclosed"> <div class="mi-padded"> <div class="mi-center"> <button id="mi-button-open" autofocus class="btn btn-default" ng-click="mi_showOpen()">Open Issues</button>&nbsp; <button id="mi-button-closed" class="btn btn-default" ng-click="mi_showClosed()">Closed Issues</button> </div> <div class="typea"> <widget id="typeahead-search" options=data.search_options></widget> </div> </div> </div> <div class="panel-heading break-word"> <h2 id="mi-total-panel-title" class="h4 panel-title">{{c.resultsList}} <span class="issues-total">{{c.totalTickets}}</span> {{c.cellPadder}}<span class="sortby-small">Sorted by: {{c.sortedBy}}</span> <span class="issues-sort" >Sort by: <button id="mi-button-sort-1" class="btn btn-default" ng-click="mi_sort_last_updated()">Last updated</button> <button id="mi-button-sort-2" class="btn btn-default" ng-click="mi_sort_created_date()">Created date</button> <button id="mi-button-sort-3" class="btn btn-default" ng-click="mi_sort_status()">Status</button> </span> </h2> </div> <div id="mi-open-tickets" ng-model = "c.openList" ng-hide="{{c.data.showOpen}}"> <!-- <div ng-repeat="openTicket in ::data.openIssuesList" >--> <div ng-repeat="openTicket in c.openTickets" > <div class="panel-body b-b result-item" style="background-color:#F2FBFE"> <a href="?id=form&sys_id={{openTicket.sys_id}}&table=incident"><span>{{openTicket.short_description}}</span> <span id="mi-priority-o" style="font-weight:{{c.highlightColor5}}"> - Priority: {{openTicket.priority}}</span> </a><br/> <span class="mi-fi">Issue Number: {{openTicket.number}}</span> {{c.cellPadder}}<span id="mi-fi-created-o-{{openTicket.number}}" style="font-weight:{{c.highlightColor1}}" class="mi-fi">Created: {{openTicket.sys_created_on}}</span> {{c.cellPadder}}<span id="mi-fi-updated-o-{{openTicket.number}}" style="font-weight:{{c.highlightColor2}}" class="mi-fi">Updated: {{openTicket.sys_updated_on}}</span> {{c.cellPadder}}<span id="mi-fi-updated-o-{{openTicket.number}}" style="font-weight:normal" class="mi-fi">Agent: {{openTicket.assigned_to}}</span> <button class="btn btn-default" style="float: right;background-color:#145896;color:#F2FBFE;font-size:14px" ng-click="mi_viewRecord(${openTicket.sys_id})">View issue</button> </div> <div class="mi-spacer"></div> </div> </div> <!--<div id="mi-closed-tickets" ng-hide="{{c.data.showClosed}}" ng-model = "c.closedList">CLOSED TICKETS--> <div id="mi-closed-tickets" style="display:none" ng-model = "c.closedList"> <!--<div ng-repeat="closedTicket in ::data.closedIssuesList" >--> <div ng-repeat="closedTicket in c.closedTickets" > <div class="panel-body b-b result-item" style="background-color:#F2FBFE"> <a href="?id=form&sys_id={{closedTicket.sys_id}}&table=incident"><span class="mi-sd">{{closedTicket.short_description}}</span> <span id="mi-priority-c" style="font-weight:{{c.highlightColor5}}"> - Priority: {{closedTicket.priority}}</span> </a><br/> <span class="mi-fi">Issue Number: {{closedTicket.number}}</span> {{c.cellPadder}}<span id="mi-fi-created-c-{{closedTicket.number}}" style="font-weight:{{c.highlightColor3}}" class="mi-fi">Created: {{closedTicket.sys_created_on}}</span> {{c.cellPadder}}<span id="mi-fi-updated-c={{closedTicket.number}}" style="font-weight:{{c.highlightColor4}}" class="mi-fi">Updated: {{closedTicket.sys_updated_on}}</span> {{c.cellPadder}}<span id="mi-fi-updated-c-{{openTicket.number}}" style="font-weight:normal" class="mi-fi">Agent: {{closedTicket.assigned_to}}</span> <button class="btn btn-default" style="float: right;background-color:#145896;color:#F2FBFE;font-size:14px" ng-click="mi_viewRecord(${closedTicket.sys_id})">View issue</button> </div> </div> <div class="mi-spacer"></div> </div> </div>
</div>




CLIENT SCRIPT

function($scope) { /* widget controller */ var c = this; c.data.showOpen = false; c.data.showClosed = true; c.resultsList = 'Total open issues: '; c.totalTickets = c.data.totalOpenIssues; c.openTickets = c.data.openIssuesList; c.closedTickets = c.data.closedIssuesList; c.sortedBy = c.data.sortedBy; //angular.element($('#mi-button-sort-1')).style.backgroundColor='#145896'; document.getElementById("mi-button-sort-1").style.backgroundColor = "#145896"; document.getElementById("mi-button-sort-1").style.color = "#F2FBFE"; var sPad = ''; for (ic = 0; ic < 3; ic++) { sPad += String.fromCharCode(160); } c.cellPadder = sPad; //--show open button clicked------------------- $scope.mi_showOpen = function() { document.getElementById("mi-button-sort-1").style.backgroundColor = "#145896"; document.getElementById("mi-button-sort-1").style.color = "#F2FBFE"; c.server.get({ action: "sort_updated", msg: "Sorting issues by updated date...", customQuery: angular.element($('#custom_query')).val() }).then(function(r) { c.openTickets = r.data.openIssuesList; c.closedTickets = r.data.closedIssuesList; c.sortedBy = r.data.sortedBy; }); c.data.showOpen = false; c.resultsList = 'Total open issues: '; c.totalTickets = c.data.totalOpenIssues; document.getElementById("mi-closed-tickets").style.display = "none"; document.getElementById("mi-open-tickets").style.display = "block"; c.highlightColor1 = 'normal'; c.highlightColor3 = 'normal'; c.highlightColor2 = 'bold'; c.highlightColor4 = 'bold'; c.highlightColor5 = 'normal'; } //--show open closed clicked------------------- $scope.mi_showClosed = function() { document.getElementById("mi-button-sort-1").style.backgroundColor = "#145896"; document.getElementById("mi-button-sort-1").style.color = "#F2FBFE"; c.server.get({ action: "sort_updated", msg: "Sorting issues by updated date...", customQuery: angular.element($('#custom_query')).val() }).then(function(r) { c.openTickets = r.data.openIssuesList; c.closedTickets = r.data.closedIssuesList; c.sortedBy = r.data.sortedBy; }); c.resultsList = 'Total closed issues: '; c.totalTickets = c.data.totalClosedIssues; document.getElementById("mi-closed-tickets").style.display = "block"; document.getElementById("mi-open-tickets").style.display = "none"; c.highlightColor1 = 'normal'; c.highlightColor3 = 'normal'; c.highlightColor2 = 'bold'; c.highlightColor4 = 'bold'; c.highlightColor5 = 'normal'; } //--view record button clicked------------------- $scope.mi_viewRecord = function(issueSYSID) { var sLink = "?id=form&sys_id=" + issueSYSID + "&table=incident"; //alert(sLink); window.open(sLink, '_self'); } //----------------sort by UPDATED button clicked---------------------- $scope.mi_sort_last_updated = function() { document.getElementById("mi-button-sort-1").style.backgroundColor = "#145896"; document.getElementById("mi-button-sort-1").style.color = "#F2FBFE"; c.server.get({ action: "sort_updated", msg: "Sorting issues by updated date..." }).then(function(up) { c.openTickets = up.data.openIssuesList; c.closedTickets = up.data.closedIssuesList; c.sortedBy = up.data.sortedBy; }); c.highlightColor2 = 'bold'; c.highlightColor4 = 'bold'; c.highlightColor1 = 'normal'; c.highlightColor3 = 'normal'; c.highlightColor5 = 'normal'; } //----------------sort by CREATED button clicked---------------------- $scope.mi_sort_created_date = function() { document.getElementById("mi-button-sort-1").style.backgroundColor = "#F2FBFE"; document.getElementById("mi-button-sort-1").style.color = "#145896"; c.server.get({ action: "sort_created", msg: "Sorting issues by created date..." }).then(function(cr) { c.openTickets = cr.data.openIssuesList; c.closedTickets = cr.data.closedIssuesList; c.sortedBy = cr.data.sortedBy; }); c.highlightColor1 = 'bold'; c.highlightColor3 = 'bold'; c.highlightColor2 = 'normal'; c.highlightColor4 = 'normal'; c.highlightColor5 = 'normal'; } //----------------sort by PRIORITY button clicked---------------------- $scope.mi_sort_status = function() { document.getElementById("mi-button-sort-1").style.backgroundColor = "#F2FBFE"; document.getElementById("mi-button-sort-1").style.color = "#145896"; c.server.get({ action: "sort_status", msg: "Sorting issues by priority..." }).then(function(pr) { c.openTickets = pr.data.openIssuesList; c.closedTickets = pr.data.closedIssuesList; c.sortedBy = pr.data.sortedBy; }); c.highlightColor1 = 'normal'; c.highlightColor3 = 'normal'; c.highlightColor2 = 'normal'; c.highlightColor4 = 'normal'; c.highlightColor5 = 'bold'; } }
}

















SERVER SCRIPT

(function() { /* populate the 'data' object */ /* e.g., data.table = $sp.getValue('table'); */ var sMsgPadder = "*********************************** MSG: "; data.sysUserID = $sp.getParameter("sys_id"); if (!data.sysUserID) { data.sysUserID = gs.getUser().getID(); } data.search_options = '{"contextual_search_sources": { "value": "d12dd5cadb8d6c10f04aad050596195c", "displayValue": "My Incidents" }}'; var sOrderByField = 'sys_updated_on'; data.sortedBy = 'updated'; var sOB_descAsc = 'desc'; //--order by priority if (input && input.action === "sort_status") { sOrderByField = 'priority'; data.sortedBy = 'priority'; sOB_descAsc = 'asc'; } //--order by created if (input && input.action === "sort_created") { sOrderByField = 'sys_created_on'; data.sortedBy = 'created'; sOB_descAsc = 'desc'; } //default--order by updated /*if (input && input.action === "sort_updated") { }*/ //gs.addInfoMessage(sMsgPadder + sOrderByField + ';' + data.sortedBy + ';' + sOB_descAsc); var sQuery = 'caller_id=' + data.sysUserID + '^ORu_logged_on_behalf=' + data.sysUserID; var iLimit = 5; data.openIssuesList = []; var grIncsOpen = buildIncGR(sOB_descAsc, sOrderByField, true, sQuery, 0); iLimit = grIncsOpen.getRowCount(); //--uncomment if want to limit to initial iLimit value data.totalOpenIssues = iLimit; while (grIncsOpen.next()) { var object_o = buildUpIncArr(grIncsOpen); data.openIssuesList.push(object_o); } data.closedIssuesList = []; var grIncsClosed = buildIncGR(sOB_descAsc, sOrderByField, false, sQuery, 0); iLimit = grIncsClosed.getRowCount(); //--uncomment if want to limit to initial iLimit value data.totalClosedIssues = iLimit; while (grIncsClosed.next()) { var object_c = buildUpIncArr(grIncsClosed); data.closedIssuesList.push(object_c); } })(); function buildUpIncArr(grInc) { var objArr = {}; objArr.number = grInc.number + ""; objArr.sys_id = grInc.sys_id + ""; objArr.short_description = grInc.short_description + ""; //--created on: var sCrOn = grInc.getDisplayValue('sys_created_on'); var sCrOn_Arr = sCrOn.split(' '); objArr.sys_created_on = sCrOn_Arr[0] + ""; //--updated on: var sUpdOn = grInc.getDisplayValue('sys_updated_on'); var sUpdOn_Arr = sUpdOn.split(' '); objArr.sys_updated_on = sUpdOn_Arr[0] + ""; objArr.assigned_to = grInc.getDisplayValue('assigned_to') + ""; objArr.priority = grInc.getDisplayValue('priority') + ""; return objArr; } function buildIncGR(orderByAscOrDesc, orderByField, activeQuery, query, iLimit) { var grInc = new GlideRecord('incident'); if (activeQuery) { grInc.addActiveQuery(); } if (!activeQuery) { grInc.addInactiveQuery(); } if (iLimit > 0) { grInc.setLimit(iLimit); } if (orderByField != '' && orderByAscOrDesc!='') { if (orderByAscOrDesc == "desc") { grInc.orderByDesc(orderByField); } if (orderByAscOrDesc == "asc") { grInc.orderBy(orderByField); } } grInc.addQuery(query); grInc.query(); return grInc; }

})();































CS

CSS

/*the typeahead input within the embedded widget*/ input[name="q"] { border-radius: 50px; height:100%; } button[name="search"] { border-radius: 50px; height:100%; } button[class="input-group-btn"]{ border-radius: 50px; } div.typea{ width: 380px; float: right; padding: 15px; } /*end typeahead*/ h1.mi1{ color:#003057; background-color:#F5F6F8; font-size:25px; } div.mi-openclosed{ background-color:#145896; color:white; height: 70px; } div.mi-center{ margin: 0; position: absolute; margin-top: 12px; } div.mi-padded{ padding-left: 20px !important; } div.mi-spacer{ height:10px; background-color:#F5F6F8; } div.mi-container{ /* min-height: 703px; */ } span.mi-fi{ font-size:14px; color:#003057; } span.mi-sd{ font-size:16px; } span[id^='mi-priority']{ font-weight:normal; } span.issues-total{ color:#145896; font-size:16px; } span.issues-sort{ color:#145896; font-size:16px; float: right; } span.sortby-small{ color:#2A363B; font-size:14px; } span[id^='mi-fi-updated-o'] { font-weight:bold; } span[id^='mi-fi-updated-c'] { font-weight:bold; } #mi-total-panel-title{ color:#2A363B; font-size:16px; } #mi-button-open {background-color:#F2FBFE; color:#145896; font-size:18px; } #mi-button-open:focus { background-color:#145896; color:#F2FBFE; opacity: 1; font-size:18px; } #mi-button-closed { /*background-color: white;*/ background-color:#F2FBFE; color:#145896; /*opacity: 1;*/ font-size:20px; } #mi-button-closed:focus { background-color:#145896; /*color:white;*/ color:#F2FBFE; opacity: 1; font-size:20px; } button[id^='mi-button-sort'] { background-color:#F2FBFE; color:#145896; } button[id^='mi-button-sort']:focus { background-color:#145896; color:#F2FBFE; opacity: 1; }

Comments

Popular posts from this blog

URL link in addInfoMessage

var ga=new GlideAjax('gld_HR_ajax'); ga.addParam('sysparm_name', 'checkEmployeeNumber_hrProfile'); ga.addParam('sysparm_hrprofilenumber', g_form.getValue('number')); ga.addParam('sysparm_employeenumber', newValue); ga.getXMLAnswer(function(answer) { if (answer!='undefined' && answer!=''){ var navURL="<a style='text-decoration:underline;color:blue' href=hr_profile.do?sysparm_query=number=" + answer + ">" + answer + "</a><img width='3' src='images/s.gif'/>"; var sMsg='The employee number entered already exists on another HR Profile ' + navURL; //alert(sMsg); g_form.showErrorBox('employee_number', 'error - please check'); g_form.addInfoMessage(sMsg); } });

GlideRecord setValue

setValue(String name, Object value) Sets the specified field to the specified value. Normally a script would do a direct assignment, for example,  gr.category = value . However, if in a script the element name is a variable, then  gr.setValue(elementName, value)  can be used. When setting a value, ensure the data type of the field matches the data type of the value you enter. This method cannot be used on journal fields. If the value parameter is null, the record is not updated, and an error is not thrown https://developer.servicenow.com/app.do#!/api_doc?v=madrid&id=r_GlideRecord-setValue_String_Object