Attributes

• api-criteria: Object (optional) - Criteria that will be passed to the api on every call. This is criteria additional to the search filter.
• 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.
• cancel-button-translated-text: String - Optional, alternative text for the Cancel button.
• dialog-config: Function - The callback function to pass through the popup config so the dialog can open
• dialog-title: String - The title for the rich list dialog.
• disable-selections: Boolean (optional, defaults to false) - Disables the ability to select a list item.
• hide-apply-button: Boolean (optional, defaults to false) - Shows/hides the Apply button.
• hide-filter-bar: Boolean (optional, defaults to false) - Shows/hides the Filter Bar.
• is-api-searching: Boolean (optional, defaults to false) - When paging by API, the selector state which will control the loading indicator.
• is-item-preview: Boolean (optional, defaults to false) - Shows/hides a thumbnail in the list item and shows subtitles horizontally when true.
• on-value-changed: Function - The callback function to handle the selected value
• options: Array - (Object) The array of objects you need to search through.
• pager: Boolean (optional, defaults to false) - Show the pager (pages 20 items per page)
• pager-api: Function (optional) - The api to call when paging through the rich list.
• pager-size: Integer (optional, defaults to 20) - Number of items per page when paging.
• primary-label-key: String - The object property which will be the main title for each list item.
• secondary-label-key: Array (optional) - (String) The object keys which will be the secondary titles for each list item.
• sort-items: Array (optional) - (Object) The sort object which contains the keys to sort on

Default

Standard rich list dialog with pager

HTML

<div class="t-content c-content" ng-controller="RichListDialogExampleController as $ctrl">
    <div class="c-content-headingContainer">
        <button class="c-button"
                ng-click="$ctrl.openDialog()">
            <div class="c-buttonText">Open Dialog</div>
        </button>
        <div class="u-mt++">
            <b>Selected Value:</b>
            <span ng-bind="$ctrl.selectedValue"></span>
        </div>
    </div>

    <inv-popup-vault>
        <inv-rich-list-dialog
            dialog-title="'Select Example'"
            options="$ctrl.exampleList"
            on-value-changed="$ctrl.valueChanged(value)"
            primary-label-key="'name'"
            secondary-label-key="['id', 'birthday', 'gender']"
            dialog-config="$ctrl.popupConfig(popupApi)">
        </inv-rich-list-dialog>
    </inv-popup-vault>
</div>

Sorting

Rich list dialog with sorting and pager

HTML

<div class="t-content c-content" ng-controller="RichListDialogExampleController as $ctrl">
    <div class="c-content-headingContainer">
        <button class="c-button"
                ng-click="$ctrl.openDialog()">
            <div class="c-buttonText">Open Dialog</div>
        </button>
        <div class="u-mt++">
            <b>Selected Value:</b>
            <span ng-bind="$ctrl.selectedValue"></span>
        </div>
    </div>

    <inv-popup-vault>
        <inv-rich-list-dialog
            dialog-title="'Select Example'"
            options="$ctrl.exampleList"
            primary-label-key="'name'"
            secondary-label-key="['id', 'birthday', 'gender']"
            sort-items="$ctrl.sortItems"
            on-value-changed="$ctrl.valueChanged(value)"
            dialog-config="$ctrl.popupConfig(popupApi)">
        </inv-rich-list-dialog>
    </inv-popup-vault>
</div>

Paging - Client with sorting

Rich list dialog with a client pager and sorting

HTML

<div class="t-content c-content" ng-controller="RichListDialogExampleController as $ctrl">
    <div class="c-content-headingContainer">
        <button class="c-button u-mt++"
                ng-click="$ctrl.openDialog()">
            <div class="c-buttonText">Open Dialog</div>
        </button>
        <div class="u-mt++">
            <b>Selected Value:</b>
            <span ng-bind="$ctrl.selectedValue"></span>
        </div>
    </div>

    <inv-popup-vault>
        <inv-rich-list-dialog
            dialog-title="'Rich list with client paging'"
            options="$ctrl.exampleList"
            pager="true"
            page-size="6"
            primary-label-key="'name'"
            secondary-label-key="['id', 'birthday', 'gender']"
            sort-items="$ctrl.sortItems"
            on-value-changed="$ctrl.valueChanged(value)"
            dialog-config="$ctrl.popupConfig(popupApi)">
        </inv-rich-list-dialog>
    </inv-popup-vault>
</div>

Paging - API

Rich list dialog with API pager. Sorting is not enabled for API paging.

HTML

<div class="t-content c-content" ng-controller="RichListDialogExampleController as $ctrl">
    <div class="c-content-headingContainer">
        <div style="color: red;">Note. this does not perform a real api request, thus paging and search does not return a refined list</div>
        <button class="c-button u-mt++"
                ng-click="$ctrl.openDialog()">
            <div class="c-buttonText">Open Dialog</div>
        </button>
        <div class="u-mt++">
            <b>Selected Value:</b>
            <span ng-bind="$ctrl.selectedAPIValue"></span>
        </div>
    </div>

    <inv-popup-vault>
        <inv-rich-list-dialog
            api-criteria="$ctrl.apiCriteria"
            api-search-error-key="::$ctrl.apiSearchErrorKey"
            api-search-translated-error="'Customer api failed message'"
            dialog-title="'Rich list with api paging'"
            is-api-searching="$ctrl.isAPISearching"
            pager="'server'"
            pager-api="$ctrl.apiCall(criteria)"
            page-size="6"
            primary-label-key="'name'"
            secondary-label-key="['id', 'birthday', 'gender']"
            sort-items="$ctrl.sortItems"
            on-value-changed="$ctrl.valueAPIChanged(value)"
            dialog-config="$ctrl.popupConfig(popupApi)">
        </inv-rich-list-dialog>
    </inv-popup-vault>
</div>

Hide Apply button and Filter Bar

Standard rich list dialog with pager where the Apply button and the Search Filter Bar are hidden

HTML

<div class="t-content c-content" ng-controller="RichListDialogExampleController as $ctrl">
    <div class="c-content-headingContainer">
        <button class="c-button"
                ng-click="$ctrl.openDialog()">
            <div class="c-buttonText">Open Dialog</div>
        </button>
        <div class="u-mt++">
            <b>Selected Value:</b>
            <span ng-bind="$ctrl.selectedValue"></span>
        </div>
    </div>

    <inv-popup-vault>
        <inv-rich-list-dialog
            dialog-title="'Hide Filter Bar Example'"
            options="$ctrl.exampleList"
            primary-label-key="'name'"
            secondary-label-key="['id', 'birthday', 'gender']"
            pager="true"
            on-value-changed="$ctrl.valueChanged(value)"
            hide-apply-button="true"
            hide-filter-bar="true"
            dialog-config="$ctrl.popupConfig(popupApi)">
        </inv-rich-list-dialog>
    </inv-popup-vault>
</div>

Disable selections, show image, and align subtitles horizontally

Rich list dialog where item selection is disabled, item images are displayed, and subtitles are aligned horizontally

HTML

<div class="t-content c-content" ng-controller="RichListDialogExampleController as $ctrl">
    <div class="c-content-headingContainer">
        <button class="c-button"
                ng-click="$ctrl.openDialog()">
            <div class="c-buttonText">Open Dialog</div>
        </button>
    </div>

    <inv-popup-vault>
        <inv-rich-list-dialog
            dialog-title="'Disable Selection Example'"
            disable-selections="true"
            options="$ctrl.exampleList"
            primary-label-key="'name'"
            secondary-label-key="['id', 'birthday', 'gender', 'state']"
            pager="true"
            on-value-changed="$ctrl.valueChanged(value)"
            hide-apply-button="true"
            hide-filter-bar="true"
            dialog-config="$ctrl.popupConfig(popupApi)"
            is-item-preview="true">
        </inv-rich-list-dialog>
    </inv-popup-vault>
</div>