How to display a widget on change of list items in Service Portal?

[Talvin Singh]

Hello Reader,

There are 6 list items shown in the horizontal view on the Service Portal. All these are created inside a div. We have to create another div just below it to show the content when any of these list items are clicked. 

If item 'A' is clicked then the corresponding widget of A should be display.

If item 'B' is clicked then the corresponding widget of B should be display.

So, please let me know how can we configure this, to display the required widget on click on the list item on the same page.

Thanks

[Allen Andreas]

Hi,

There's a few ways to do this. Here's a thread with one example: https://community.servicenow.com/community?id=community_question&sys_id=311de4d0dbfa5300e0e80b55ca96...

Please mark reply as Helpful/Correct, if applicable. Thanks!

[Aishwarya Thaku]

Hi @Talvin Singh ,

You can enter the code to display the widget in the other div. Put a condition in the div such as -

<div ng-if="c.data.showWidget">

<!-- Display the widget here -->

</div>

and declare c.data.showWidget = false; in the client controller 

On all the 6 list items, you can add ng-click and call your function from the client controller -

 ng-click=foo();

Then in the client controller, you can assign the value based on your condition such as -

$scope.foo= function() {

  c.data.showWidget= true;

}

Also, make sure that the $scope is also defined at the beginning of your client side.

//Refer the below line where the $scope is defined
function($scope,spUtil,$http,$timeout,$rootScope){
}

Please mark my answer as helpful or correct if it helped you.

Thanks,

Aishwarya

[Talvin Singh]

Hi Aishwarya,

Thank you for the response. 

I am looking for a dynamic functionality. If the user clicks on 'A' then the WidgetA should appear. If the user clicks on 'B' then the WidgetB should be visible and WidgetA should not be visible. If the user clicks on 'C' then WidgetC should be visible ALONE.

With the approach that you have helped with, will not hide the widget, but keep on adding new widgets on clicking on any other items.

Hope my explanation helps.

Thanks

[Aishwarya Thaku · Accepted solution]

Hi @Talvin Singh ,

Just like you can show the widget by setting c.data.showWidgetA as true. Similarly, you can set  c.data.showWidgetA to false on click of widget B and set another variable specific to widget B as true. 

Hope it helps!