Skip to main content

Service Portal: hide/show HTML elements, access them in client controller

1) using ng-hide

HTML:

 <div id="mi-open-tickets" ng-model = "c.openList" ng-hide="{{c.data.showOpen}}">OPEN TICKETS


Client:

function($scope) { /* widget controller */ var c = this; c.data.showOpen = false;//--show c.data.showOpen = true;//--hide




advantage: works great onload

drawback:

doesnt appear possible to hide/show dynamically


2) using display:none/block approach -  no ng-hide

html

<div class="mi-openclosed"> <div class="mi-padded"> <div class="mi-center"> <button class="btn btn-default" ng-click="mi_showOpen()">Open Issues</button>&nbsp; <button 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 id="mi-open-tickets" ng-model = "c.openList" >OPEN TICKETS <div ng-repeat="openTicket in ::data.openIssuesList" > <span>{{openTicket.number}} ; {{openTicket.short_description}}</span> </div> </div> <div id="mi-closed-tickets" ng-model = "c.closedList">CLOSED TICKETS <div ng-repeat="closedTicket in ::data.closedIssuesList" > <span>{{closedTicket.number}} ; {{closedTicket.short_description}}</span> </div> </div>












client script:


$scope.mi_showOpen = function() { //c.data.showOpen = false; // c.data.showClosed = true; document.getElementById("mi-closed-tickets").style.display="none"; document.getElementById("mi-open-tickets").style.display="block"; } $scope.mi_showClosed = function() { //c.data.showOpen = true; //c.data.showClosed = false; document.getElementById("mi-closed-tickets").style.display="block"; document.getElementById("mi-open-tickets").style.display="none"; }


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