Legacy Product

Fusion 5.4

search:facet-list

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

Param Type Details

response

(optional)

object

A response object

styling

(optional)

string

The style the facet list is to be rendered in. Accepted values 'shadow' and 'wrappedheader'

facet-names

(optional)

string

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

number

Limit display value to a certain number of characters, adding '…' if maxCharacters is exceeded. This will not break highlighting code.

platform

(optional)

string

The name of the platform to use for search within the facet.

query

(optional)

Object

Query 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);
        }]);