Group By parent task on Simple list widget

[Community Alums]

Hello,

I have a portal page where I have added simple list to it where I want to show list of tasks but need to group by parent task, as one parent has multiple tasks associated there is a huge list of tasks so want to group by parent but when I added GROUPBYparent filter in the simple list it's not working, please suggest how can I add the filter condition here.

Thanks,

Prudhvi

[Ankur Bawiskar]

@Community Alums 

it's not supported to use group by in simple list widget

You might have to use some other option

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar]

@Community Alums 

Thank you for marking my response as helpful.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar · Accepted solution]

@Community Alums 

something like this can help you, please enhance as per your requirement and include in portal page

Note: I took some help from AI tool for this

HTML:

<div class="panel-group" id="incidentAccordion">
  <div class="panel panel-default" ng-repeat="(state, incidents) in c.stateGroups">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="" ng-click="c.toggle(state)">
          {{state}} ({{incidents.length}})
          <span class="pull-right glyphicon"
                ng-class="{'glyphicon-chevron-down': c.isOpen(state), 'glyphicon-chevron-right': !c.isOpen(state)}"></span>
        </a>
      </h4>
    </div>
    <div class="panel-collapse" ng-show="c.isOpen(state)">
      <ul class="list-group">
        <li class="list-group-item" ng-repeat="incident in incidents">
          <a href="incident.do?sys_id={{incident.sys_id}}" target="_blank">
            {{incident.number}} - {{incident.short_description}}
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Client:

api.controller = function($scope) {
  var c = this;
  c.stateGroups = {};
  c.openStates = {};

  c.toggle = function(state) {
    c.openStates[state] = !c.openStates[state];
  };

  c.isOpen = function(state) {
    return !!c.openStates[state];
  };

  c.server.get().then(function() {
    c.stateGroups = c.data.incidents.reduce(function(groups, incident) {
      var state = incident.state || 'No State';
      if (!groups[state]) groups[state] = [];
      groups[state].push(incident);
      return groups;
    }, {});
  });
};

Server:

(function() {
  data.incidents = [];
  var incidentGR = new GlideRecord('incident');
  incidentGR.addActiveQuery();
  incidentGR.orderByDesc('sys_created_on');
  incidentGR.query();
  
  while (incidentGR.next()) {
    data.incidents.push({
      "number": incidentGR.getDisplayValue('number'),
      "short_description": incidentGR.getDisplayValue('short_description'),
      "priority": incidentGR.getDisplayValue('priority'),
      "state": incidentGR.getDisplayValue('state'),
      "assigned_to": incidentGR.getDisplayValue('assigned_to'),
      "sys_id": incidentGR.getUniqueValue()
    });
  }
})();

Output: Incidents grouped by state and made collapsiible

If my response helped please mark it correct and close the thread so that it benefits future readers.