Toggle option for simple list widget

chandukollapart · ‎02-02-2022

Hello Everyone,

I have a question in service-portal simple list widget. Is there a way we can add toggle for simple list widget. When ever users clicks on that toggle list will open. Please let me know how can we achieve this functionality.

Thanks!

shloke04 · ‎02-03-2022

Hi,

Please follow the steps below to achieve your requirement:

1) First you need to clone your Simple List widget by clicking on the Clone widget button.

2) For example in this details below I have shown how to toggle OOB Incident Simple List widget, you can do it for any other widget as well:

Below Lines of code you need to add in your Cloned Simple List widget. I have shown them in Red and have given them separately as well:

HTML:

<span class="glyphicon glyphicon-triangle-bottom" ng-click="toggleData()"></span>

Above lines need to be added in Line number 6 where Title of Simple List is displayed as shown below:

Next you need to add below lines in other areas of HTML code to get this working:

ng-if="c.data.toggleInformation == true"

ng-if="c.data.list.length > 0 &&  c.data.toggleInformation == true"

ng-if="c.data.toggleInformation == true"

ng-if="!c.options.hide_footer && c.options.maximum_entries && c.data.count > c.options.maximum_entries && c.data.toggleInformation == true">

Client Script:

$scope.toggleData = function(){
		if(c.data.toggleInformation == false || c.data.toggleInformation == undefined){
			c.data.toggleInformation = true;
		}else{
			c.data.toggleInformation = false;
		}
	}

Result:

So click on the Drop Down arrow button and it will then display the list as shown below:

Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

View solution in original post

shloke04 · ‎03-08-2022

@chandukollaparthi

Yes you can do that as well.

You just need to add below line after line where it is written as var c=this;

c.data.toggleInformation = true;

So your Final Client Controller will look like below:

var c = this;
	c.data.toggleInformation = true;
	$scope.toggleData = function(){
	if(c.data.toggleInformation == false || c.data.toggleInformation == undefined){
			c.data.toggleInformation = true;
		}else{
			c.data.toggleInformation = false;
		}
		
		
	}

This will keep the list open by default and when you click on the arrow it will collapse or toggle it off as you need.

Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke