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

Get URL Parameter - server side script (portal or classic UI)

Classic UI : var sURL_editparam = gs . action . getGlideURI (). getMap (). get ( ' sysparm_aparameter ' ); if ( sURL_editparam == 'true' ) { gs . addInfoMessage ( 'parameter passed ); } Portal : var sURL_editparam = $sp . getParameter ( " sysparm_aparameter " ); if ( sURL_editparam == 'true' ) { gs . addInfoMessage ( 'parameter passed ); }

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); } });