Skip to main content

​
Description

The sort directive for selecting how the data on the page should be sorted. The sort tag should be wrapped in a Layout Controls Tag.

​
Usage

as element: 
<search:sort
       response="{string}"
       fields="{string}"
       [default-label="{string}"]
       [title="{string}"]
       [default-order="{string}"]
       [mode="{string}"]>
</search:sort>

​
Directive info

  • This directive creates new scope.

​
Parameters

ParamTypeDetails
responsestringThe name of the response
fieldsstringFields to provide sorting on (comma-separated).
default-label (optional)stringLabel to display for the ‘default’ sort option when no specific sorts are applied. Usually implies sorting on score or relevance. Default: ‘relevance’
title (optional)stringAdd a title to display. Default: ‘Sort by’
default-order (optional)stringAttribute to set the default sort order of Sort Fields (asc or desc). Default: ‘asc’
mode (optional)stringThe mode in which the sorting should work, be default click. click: Selecting a sort will sort in the default order, when clicking on a selected sort this sort will be removed, to change the order use the ascending and descending options at the bottom of the dropdown. toggle: Selecting a sort will sort in the default order, when clicking on the selected sort again it will reverse the order.

​
Example

​
Source

<layout:grid>
    <layout:block md="1-1">
        <h5 id="example_source_click-mode">Click Mode</h5>
        <layout:controls>
            <search:sort response="response" fields="IncidentNum=Incident Number,Foo=Bar"></search:sort>
        </layout:controls>
    </layout:block>
    <layout:grid>
        <layout:block md="1-1">
            <h5 id="example_source_toggle-mode">Toggle Mode</h5>
            <layout:controls>
                <search:sort response="response" fields="IncidentNum=Incident Number,Foo=Bar" mode="toggle" class="left"></search:sort>
            </layout:controls>
        </layout:block>
    </layout:grid>

angular.module('lightning').controller('ExampleController', ['$scope', 'ResponseService', function($scope, ResponseService) {
    var response = {};
    ResponseService.setResponse('response', response);
}]);

​
Result

Result