Change ListView in service portal

[MuhmmadU]

Hello everyone,

I am working on a XYZ Service Portal where we have a table displaying data in a list view. Currently, the table is rendering standard rows and columns, but we would like to modify it to group the data by a specific column.

Here's the scenario:

• The table is already set up and working on the portal.
• We need to apply Group By functionality to a column (e.g., "Category").
• The goal is to allow users to see grouped rows while staying within the Service Portal interface.

• Questions:

  1. What is the best approach to achieve this in Service Portal?

[Community Alums]

@MuhmmadU I am not sure how you have implemented but you can use below script to achieve same:

Update the client controller to handle the grouped data.

function ($scope) {

    $scope.groupedItems = $scope.data.items;

    $scope.toggleGroup = function (group) {

        group.isCollapsed = !group.isCollapsed;

    };

}

 HTML Template:

Update the HTML template to render the grouped data with collapsible sections.

<div ng-repeat="group in groupedItems">

    <h3 ng-click="toggleGroup(group)" class="group-header">

        {{ group.category }}

        <span ng-if="group.isCollapsed">+</span>

        <span ng-if="!group.isCollapsed">-</span>

    </h3>

    <div ng-if="!group.isCollapsed">

        <table class="table table-striped">

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Description</th>

                    <th>Other Field</th>

                </tr>

            </thead>

            <tbody>

                <tr ng-repeat="record in group.records">

                    <td>{{ record.name }}</td>

                    <td>{{ record.description }}</td>

                    <td>{{ record.other_field }}</td>

                </tr>

            </tbody>

        </table>

    </div>

</div>

Hope this will help you.