Expand/collapse functionality in service portal widgets

[poojitha bn]

Hi team,

Need expand/collapse functionality in service portal for widgets.

I Have few custom widgets in portal, on clicking + button widget should expand and show the records as below on clicking same button all records should collapse and show only heading.

Toggle functionality for showing and hiding records.

Can anyone please help me how to do this.

Thanks,

Poojitha B Nagaraj

[Mohit Kaushik]

Hi Poojitha,

I have implemented the same kind of functionality in my code and it worked for me. When i will click the title of my widget it will expand or collapse.

<a data-toggle="collapse" data-target="#Pending_Incidents_Requiring_My_Action" href="javascript:void(0);" aria-controls="Pending_Incidents_Requiring_My_Action">
<h2 class="h4 panel-title">${Pending Tickets Requiring My Action}
<div ng-show="c.showFilter">
<input aria-label="${Filter}" ng-model="c.data.filterText" ng-model-options="{debounce: 300}" sn-focus="c.showFilter" placeholder="{{::data.filterMsg}}" ng-change="c.update()" class="form-control input-sm filter-box">
</div>
<label ng-if="data.pagination.showPagination && (data.pagination.from <= data.pagination.to)" class="pull-right text-info">
<span ng-if="data.pagination.from != data.pagination.to">{{data.pagination.from}} ${to_lower}</span> {{data.pagination.to}} of {{data.pagination.of}}</label>
</h2>
</a>
</div><!--end of panel heading--->
<div id="Pending_Incidents_Requiring_My_Action" class="panel-collapse collapse"> <!--staring of panel collapse-->
<!-- Put your data which you want to hide on toggling -->
</div><!-- Ending of collapse-->

Hope this will help you. Please mark it correct answer and helpful if it resolves the purpose.

Thanks,

Mohit Kaushik

[kuttti]

Hi @Mohit Kaushik 

I tried to implement this code, but not working as expected, can you please guide me in detail. What should be in place of "Pending_Incidents_Requiring_My_Action" and how to insert data that I want to hide on toggling.

Any help is appreciated! 

Thanks!

[Prins Kumar Gup]

Hi,

You can refer OOTB widget "Ticket Field". Under this widget, we have one section "Option". Please see below Screenshot:

If my replies have helped you at all, I’d really appreciate it if you click the Helpful button and if my reply is the answer you were looking for, it would be awesome if you could click the Accepted Solution button!
Best Regards,
PKG