Collapse/Expand option for the table in the widget

[Saranya Babu]

@Anil Lande 

Hello All,

I have created a widget which will show different data from different table and now used to scroll alot to view the down data.

So In the table, I want to add plus and minus option like expand or collapse.Can someone please help?

(function() {
	var parentId = $sp.getParameter('sys_id');
	var column=$sp.getListColumns(data.table)
	gs.log("Parent ID "+parentId);
	console.log("Parent ID "+parentId);
	var listOfCaseTasks = [];
	
	var taskGr = new OMTManagmentUtils().getRelatedOrder(parentId);
	var variable = '';
	if(taskGr.hasNext()) {
		data.display = true;
		variable = taskGr.getEncodedQuery();
    var widgetOptions = {
      "table": "sn_ind_tmt_orm_order",
      "order_by": "sys_updated_on",
			"filter": variable,
      "maximum_entries": options.maximum_entries || 5,
      "color": 'primary',
      "sp_page": "form",
      "enable_filter": true
    };
		console.log("Variable ID "+variable);
    if (options.list_page_dv)
      widgetOptions.list_page_dv = options.list_page_dv;
    
    data.dataTableWidget = $sp.getWidget('widget-data-table', widgetOptions);
	}
	
	
	var listOfCaseTasks1 = [];
	data.display = true;
	var taskGr1 = new OMTManagmentUtils().getRelatedOrdeLineItem(parentId);
	var variable1 = '';
	if(taskGr1.hasNext()) {
		data.display = true;
		variable1 = taskGr1.getEncodedQuery();
    var widgetOptions1 = {
      "table": "sn_ind_tmt_orm_order_line_item",
      "color": 'warning',
      "filter": variable1,
      "sp_page": "form"     
      
    };
    if (options.list_page_dv)
      widgetOptions1.list_page_dv = options.list_page_dv;
    
    data.dataTableWidget1 = $sp.getWidget('widget-data-table', widgetOptions1);
	}
	
		
	var listOfCaseTasks2 = [];
	data.display = true;
	var taskGr2 = new OMTManagmentUtils().getPOInformation(parentId);
	var variable2 = '';
	if(taskGr2.hasNext()) {
		data.display = true;
		data.table="sn_ind_tmt_orm_domain_order";
	data.fields = $sp.getListColumns(data.table, data.view);
		variable2 = taskGr2.getEncodedQuery();
    var widgetOptions2 = {
      "table": "sn_ind_tmt_orm_domain_order",
			"order_by": "sys_updated_on",
      "color": 'success',
      "filter": variable2,
      "sp_page": "form",
			"fields":data.fields
     
    };
    if (options.list_page_dv)
      widgetOptions2.list_page_dv = options.list_page_dv;
    
    data.dataTableWidget2 = $sp.getWidget('widget-data-table', widgetOptions2);
	}
	
		var listOfCaseTasks3 = [];
	data.display = true;
	data.table="sn_ind_tmt_orm_order_task";
	data.fields = $sp.getListColumns(data.table, data.view);
	var taskGr3 = new OMTManagmentUtils().getOrderTask(parentId);
	var variable3 = '';
	var columns=$sp.getListColumns("sn_ind_tmt_orm_order_task");
	console.log("Colums "+columns);
	console.log("Data.fields"+data.fields);
	if(taskGr3.hasNext()) {
		data.display = true;
		variable3 = taskGr3.getEncodedQuery();
    var widgetOptions3 = {
      "table": "sn_ind_tmt_orm_order_task",
      "color": 'danger',
      "filter": variable3,
      "sp_page": "form",
			"fields":data.fields
			
      
    };
   
    
    data.dataTableWidget3 = $sp.getWidget('widget-data-table', widgetOptions3);
	}
	
	
	
	
	
})();

  <sp-widget widget="data.dataTableWidget">
  </sp-widget>

  <sp-widget widget="data.dataTableWidget1">
  </sp-widget>
    

  <sp-widget widget="data.dataTableWidget2">
  </sp-widget>
    
        

  <sp-widget widget="data.dataTableWidget3">
  </sp-widget>

Thanks

Saranya

[Bhaba · Accepted solution]

Hi Saranya,

Add the following code into the widget. It'll add expand & collapse option into your widget.

<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-->

This has worked fine for me. Let me know if this works fine for you as well.

Thanks.

[Saranya Babu]

Thank you very much for the reply I have managed it somehow like below

    <div ng-if="data.fields.length > 0" ng-init="variable_toggle=true">
      <h4 ng-click="variable_toggle = !variable_toggle" style="cursor: pointer;" class="collapsible1">
        <span style="font-size: 12px;" class="glyphicon" 
              ng-class="{'glyphicon-chevron-down': !variable_toggle, 'glyphicon-chevron-up': variable_toggle}"></span>
        ${Customer Order}
      </h4>
      
      <div ng-if="variable_toggle">
        <hr>
       <sp-widget widget="data.dataTableWidget" class="panelcolor">
  </sp-widget>
      </div>
    </div>

    
	 <div ng-if="data.fields.length > 0" ng-init="variable_toggle=true">
      <h4 ng-click="variable_toggle = !variable_toggle" style="cursor: pointer;"class="collapsible1">
        <span style="font-size: 12px;" class="glyphicon" 
              ng-class="{'glyphicon-chevron-down': !variable_toggle, 'glyphicon-chevron-up': variable_toggle}"></span>
        ${Product Order Information}
      </h4>
      
      <div ng-if="variable_toggle">
       
        <hr>
        
        
       <sp-widget widget="data.dataTableWidget2">
  </sp-widget>
     
	  <hr>
       <sp-widget widget="data.dataTableWidget3">
  </sp-widget>
      </div>
	  </div>

	
			 <div ng-if="data.fields.length > 0" ng-init="variable_toggle=true">
      <h4 ng-click="variable_toggle = !variable_toggle" style="cursor: pointer;"class="collapsible1">
        <span style="font-size: 12px;" class="glyphicon" 
              ng-class="{'glyphicon-chevron-down': !variable_toggle, 'glyphicon-chevron-up': variable_toggle}"></span>
        ${Service Order Information}
      </h4>
      
      <div ng-if="variable_toggle">
        <hr>
       <sp-widget widget="data.dataTableWidget4">
  </sp-widget>
  <hr>
       <sp-widget widget="data.dataTableWidget5">
  </sp-widget>
      </div>
    </div>

	 <div ng-if="data.fields.length >0" ng-init="variable_toggle=true">
      <h4 ng-click="variable_toggle = !variable_toggle" style="cursor: pointer;"class="collapsible1">
        <span style="font-size: 12px;" class="glyphicon" 
              ng-class="{'glyphicon-chevron-down': !variable_toggle, 'glyphicon-chevron-up': variable_toggle}"></span>
        ${Resource Order Information}
      </h4>
      
      <div ng-if="variable_toggle">
        <hr>
       <sp-widget widget="data.dataTableWidget6">
  </sp-widget>
  <hr>
       <sp-widget widget="data.dataTableWidget7">
  </sp-widget>
      </div>
      </div>
	  
	      
	    <div ng-if="data.fields.length > 0" ng-init="variable_toggle=true">
      <h4 ng-click="variable_toggle = !variable_toggle" style="cursor: pointer;" class="collapsible1">
        <span style="font-size: 12px;" class="glyphicon" 
              ng-class="{'glyphicon-chevron-down': !variable_toggle, 'glyphicon-chevron-up': variable_toggle}"></span>
        ${Order Line Item}
      </h4>
      
      <div ng-if="variable_toggle">
        <hr>
       <sp-widget widget="data.dataTableWidget1">
  </sp-widget>
      </div>
    </div>