Toggle option for simple list widget

chandukollapart
Tera Contributor

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!

1 ACCEPTED SOLUTION

shloke04
Kilo Patron

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:

find_real_file.png

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

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

find_real_file.png

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

find_real_file.png

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

find_real_file.png

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

find_real_file.png

Client Script:

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

find_real_file.png

Result:

find_real_file.png

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

find_real_file.png

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

5 REPLIES 5

shloke04
Kilo Patron

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:

find_real_file.png

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

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

find_real_file.png

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

find_real_file.png

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

find_real_file.png

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

find_real_file.png

Client Script:

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

find_real_file.png

Result:

find_real_file.png

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

find_real_file.png

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

Thank you so much @shloke04 

Glad to help 🙂

Regards,

Shloke

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

Regards,
Shloke

@shloke04 Just want to make sure can we add default toggle is open to the above code.

 

Thanks!