​
Description

The facet list directive displays a list of facets.

​
Usage

as element: 
<search:facet-list
       [response="{object}"]
       [styling="{string}"]
       [facet-names="{string}"]
       [max-characters="{number}"]
       [platform="{string}"]
       [query="{Object}"]>
</search:facet-list>

​
Directive info

  • This directive creates new scope.

​
Parameters

ParamTypeDetails
response (optional)objectA response object
styling (optional)stringThe style the facet list is to be rendered in. Accepted values ‘shadow’ and ‘wrappedheader’
facet-names (optional)stringThe names of the facets to output. Can be specified as either a comma separated list or as a wildcard ’*’ for all available facets. In addition, you can use the - with a facet name to omit a specific facet (e.g. -cat will omit the cat facet).
max-characters (optional)numberLimit display value to a certain number of characters, adding ’…’ if maxCharacters is exceeded. This will not break highlighting code.
platform (optional)stringThe name of the platform to use for search within the facet.
query (optional)ObjectQuery to be used.

​
Example

​
Source

<h3 id="example_styling">Styling</h3>
<h4 id="example_styling_simple">Simple</h4>
<search:facet-list response="response" facet-names="*"></search:facet-list>
<h4 id="example_styling_wrapped-header">Wrapped Header</h4>
<search:facet-list response="response" styling="wrappedheader" facet-names="*"></search:facet-list>
<h4 id="example_styling_indented">Indented</h4>
<search:facet-list response="response" styling="indented" facet-names="*"></search:facet-list>
<h4 id="example_styling_shadow">Shadow</h4>
<search:facet-list response="response" styling="shadow" facet-names="*"></search:facet-list>
<h4 id="example_styling_hidemetadata">Hidemetadata</h4>
<search:facet-list response="response" styling="hidemetadata" facet-names="*"></search:facet-list>
<h4 id="example_styling_recessed">Recessed</h4>
<search:facet-list response="response" styling="recessed" facet-names="*"></search:facet-list>
<h4 id="example_styling_light">Light</h4>
<div class="tk-stl-blocksidebar-light">
    <aside class="tk-bl-sidebar">
        <search:facet-list response="response" facet-names="*"></search:facet-list>
    </aside>
</div>
<h4 id="example_styling_dark">Dark</h4>
<div class="tk-stl-blocksidebar-dark">
    <aside class="tk-bl-sidebar">
        <search:facet-list response="response" facet-names="*"></search:facet-list>
    </aside>
</div>

angular.module('lightning')
.controller('ExampleController', ['$scope','$timeout','ResponseService', function($scope,$timeout,ResponseService) {
            $scope.response = {
                page: 2,
                query: {
                    rpp: 50
                },
                facets: {
                    test1: {
                        id:'test1',
                        display:'test1',
                        filters: [
                            {

                                val: {
                                    dsp: 'Day 1',
                                    act: 'Day 1',

                                },
                                count: 100,

                            },
                            {

                                val: {
                                    dsp: 'Day 2',
                                    act: 'Day 2',
                                },
                                count: 200,
                            }

                        ]
                    },
                    test2: {
                        id:'test2',
                        display:'test2',
                        filters: [
                            {

                                val: {
                                    dsp: 'Day 1',
                                    act: 'Day 1',
                                },
                                count: 10,

                            },
                            {

                                val: {
                                    dsp: 'Day 2',
                                    act: 'Day 2',
                                },
                                count: 20,
                            }

                        ]
                    },
                    empty: {
                        id:'empty',
                        display:'Empty',
                        filters: []
                    },
                },
                results: []
            }

            ResponseService.setResponse('response', $scope.response);
        }]);

​
Result

Result