Params

Attributes

• api-criteria: Object (optional) - Criteria that will be passed to the api on every call.
• api-search-error-key: String (string) - The translation key for the api error toast message.
• api-search-translated-error: String (string) - The translated error from the selector for a failed api call.
• auto-select-first-item: Boolean (optional, defaults to true) - If set false the list won't select the first item on the list when rendered.
• deselect-on-blur: Boolean (optional, defaults to false) - Allows the richlist to diselect the selected item when loses focus.
• disable-selections: Boolean (optional, defaults to false) - Disables the ability to select a list item.
• enable-ui-search: Boolean (optional, defaults to false) - Enables the ability to search a list item.
• filter-function: Function (optional) - Callback function called when a filter is selected.
• filter-items: list (optional) - List of filter items.
• filter-title: String (optional) - Label for the filter dropdown.
• has-focus: Boolean (optional) - Used to set focus on the list and attach arrow event listeners (set to false when the list loses focus).
• hybrid-search: Boolean (optional) - Will search by title as well as id field and return all items that match.
• is-item-preview: Boolean (optional, defaults to false) - Shows/hides a thumbnail in the list item and shows subtitles horizontally when true.
• is-api-searching: Boolean (optional, defaults to false) - When paging by API, the selector state which will control the loading indicator.
• list-items: Array (required) object properties: title (String), subTitles (Array<String>), glyph (String), hasError (Boolean)
• more-actions-list: Array (optional) - Will render a ... menu on the right side of the item list and will show a popout menu with the items. Object properties: id (String), title (String), actionFn (Function).
• on-bulk-remove: Function (optional) - Callback function when a bulk remove occurs (receives array of items selected).
• on-deselect: Function (optional) - When provided a function will be called and will allow a selected item to be unselected.
• on-right-keypress: Function (optional) - Callback function that will be called when kitting the right arrow key (used for multi fancy rich list implementations). Receives angular-hotkeys event type.
• on-left-keypress: Function (optional) - Callback function that will be called when kitting the left arrow key (used for multi fancy rich list implementations). Receives angular-hotkeys event type.
• on-select: Function - Callback function when a selection occurs (receives item selected).
• on-toggle-edit: Function (optional) - Callback function used to report the edit mode status of the richlist.
• pager: Boolean (optional, defaults to false) - Show the pager
• pager-api: Function (optional) - The api to call when paging through the rich list.
• page-size: Integer (optional, defaults to 20) - Number of items per page.
• primary-label-key: String - The object property which will be the main title for each list item.
• richListApi: Function (optional) - Callback function which exposes certain functions to the consuming controller.
• rich-list-title: String (string) - Title for the richlist which is displayed on top of the list items.
• secondary-label-key: Array (optional) - (String) The object keys which will be the secondary titles for each list item.
• secondary-title: Array (optional) - (String) The secondary title that sits below the main title.
• show-rich-list-title: Boolean (optional) - To specify if the richlist has a title.
• sort-items: Array (optional) - key (String), text (String), sortFunction (optional, function) <-- for custom sorting

NOTE: Most of the functions may need .bind(this) to bind the proper context. NOTE: There is a use case of this component that uses the filtering in the studio services Features page

Single

Simple rich list component that displays a list of items adding some functionality such as bulk remove and sorting.

HTML

<div class="t-content c-content" ng-controller="RichListExampleController as ctrl">
    <div class="c-content-container" style="height:500px;">
        <fancy-rich-list
            list-items="ctrl.items"
            primary-label-key="'name'"
            secondary-label-key="['gender', 'email', 'username']"
            on-bulk-remove="ctrl.remove"
            sort-items="ctrl.sortItems"
            on-select="ctrl.onSelect.bind(ctrl)"
            has-focus="ctrl.hasFocus"
            on-deselect="ctrl.onUnSelect2"
            more-actions-list="ctrl.moreActionsList">
        </fancy-rich-list>
    </div>
</div>

Adding Title

Simple rich list component with title that displays a list of items with bulk remove functionality.

HTML

<div class="t-content c-content" ng-controller="RichListExampleController as ctrl">
        <div class="c-content-container" style="height:500px;">
            <fancy-rich-list
                show-rich-list-title="true"
                rich-list-title="'Fancy Rich List'"
                list-items="ctrl.items"
                primary-label-key="'name'"
                secondary-label-key="['gender', 'email', 'username']"
                on-bulk-remove="ctrl.remove"
                on-select="ctrl.onSelect.bind(ctrl)"
                has-focus="ctrl.hasFocus"
                more-actions-list="ctrl.moreActionsList">
            </fancy-rich-list>
        </div>
    </div>
    

Search Enabled

Simple rich list component with search field that displays a list of items with bulk remove functionality. Also note that the items are filtered based on the "search-on-key" which makes this attribute required to enable search.

HTML

<div class="t-content c-content" ng-controller="RichListExampleController as ctrl">
    <div class="c-content-container" style="height: 500px;">
        <fancy-rich-list
            enable-ui-search="true"
            list-items="ctrl.items"
            on-select="ctrl.onSelect.bind(ctrl)"
            search-on-key= "'name'"
            primary-label-key="'name'">
        </fancy-rich-list>
    </div>
</div>

Filterable

Simple rich list component that displays a list of items adding some functionality such as bulk remove and filtering.

HTML

<div class="t-content c-content" ng-controller="RichListExampleController as ctrl">
    <div class="c-content-container" style="height:500px;">
        <fancy-rich-list
            list-items="ctrl.filteredItems"
            primary-label-key="'name'"
            secondary-label-key="'Status'"
            filter-function="ctrl.filterServiceFeatures"
            filter-items="ctrl.filters"
            filter-title="Status"
            on-bulk-remove="ctrl.remove"
            on-select="ctrl.onSelect.bind(ctrl)"
            has-focus="ctrl.hasFocus"
            on-deselect="ctrl.onUnSelect2"
            more-actions-list="ctrl.moreActionsList">
        </fancy-rich-list>
    </div>
</div>

Paging - Client

Rich list which pages on the client.

HTML

<div class="t-content c-content" ng-controller="RichListExampleController as ctrl">
    <div class="c-content-container" style="height:300px;">
        <fancy-rich-list
            pager="true"
            page-size="3"
            primary-label-key="'name'"
            secondary-label-key="['gender', 'username']"
            list-items="ctrl.items"
            sort-items="ctrl.sortItems"
            on-select="ctrl.onSelect.bind(ctrl)"
            more-actions-list="ctrl.moreActionsList">
        </fancy-rich-list>
    </div>
</div>

Paging - API

Rich list which pages using an api.

HTML

<div class="t-content c-content" ng-controller="RichListExampleController as ctrl">
    <div style="color: red;">Note. this does not perform a real api request, thus paging does not return a refined list</div>

    <div class="c-content-container" style="height:500px;">
        <fancy-rich-list
            pager="'server'"
            pager-api="ctrl.apiCall(criteria)"
            page-size="7"
            api-search-error-key="::ctrl.apiSearchErrorKey"
            api-search-translated-error="'Customer api failed message'"
            is-api-searching="ctrl.isAPISearching"
            primary-label-key="'name'"
            secondary-label-key="['id', 'gender', 'username']"
            list-items="ctrl.apiPagingItems"
            on-select="ctrl.onSelect.bind(ctrl)"
            more-actions-list="ctrl.moreActionsList">
        </fancy-rich-list>
    </div>
</div>

Multi

Multi fancy richlist that enables 2 or more richlists

HTML

<div class="t-content c-content" ng-controller="RichListExampleController as ctrl">
    <div class="c-content-container u-flex u-flexRow" style="height:500px;">
        <fancy-rich-list
            list-items="ctrl.items"
            primary-label-key="'name'"
            secondary-label-key="['gender', 'email', 'username']"
            on-bulk-remove="ctrl.remove"
            sort-items="ctrl.sortItems"
            on-select="ctrl.onSelect.bind(ctrl)"
            has-focus="ctrl.leftHasFocus"
            on-deselect="ctrl.onUnSelect2"
            more-actions-list="ctrl.moreActionsList"
            on-right-keypress="ctrl.onRightKeypressListOne.bind(ctrl)">
        </fancy-rich-list>
        <fancy-rich-list
            list-items="ctrl.selectedPerson.favoriteMovies"
            primary-label-key="'movieTitle'"
            secondary-label-key="'year'"
            on-bulk-remove="ctrl.remove"
            sort-items="ctrl.sortItemsMulti"
            on-select="ctrl.onSelect2"
            has-focus="ctrl.rightHasFocus"
            on-deselect="ctrl.onUnSelect"
            more-actions-list="ctrl.moreActionsList"
            on-left-keypress="ctrl.onLeftKeypressListTwo.bind(ctrl)"
            auto-select-first-item="false"
            deselect-on-blur="true">
        </fancy-rich-list>
    </div>
</div>

Hybrid Search

Searches based on title and id and returns list that matches either value in the list.

HTML

<div class="t-content c-content" ng-controller="RichListExampleController as ctrl">
    <div class="c-content-container" style="height: 500px;">
        <fancy-rich-list
            enable-ui-search="true"
            list-items="ctrl.hybridSearchList"
            on-select="ctrl.onSelect.bind(ctrl)"
            hybrid-search="true">
        </fancy-rich-list>
    </div>
</div>