apim-developer-portal4/custom-reports/widgets/subscription-list/ko/runtime/subscription-list-dropdown.html

API management developer portal

<div class="dropdown-container collapsible">
    <!-- <button class="button button-default" data-bind="click: handleSubscriptionListDropdownSelect" >Load</button> -->

    <div class="form-control" tabindex="0" role="button" aria-label="Subscriptions" data-toggle="collapsible">
        <div class="input-group">
            <div class="input" data-bind="text: selection"></div>
            <div class="input-group-append">
                <i class="icon icon-chevron-down"></i>
            </div>
        </div>
    </div>

    <div class="collapsible-dropdown collapsible-content">
        <div class="search-input">
            <div class="input-group">
                <input type="search" role="searchbox" aria-label="Search" placeholder="Search subscriptions"
                    spellcheck="false" data-bind="textInput: pattern" />
                <button type="button" class="search-button" aria-label="Search subscriptions">
                    <i class="icon icon-magnifier"></i>
                </button>
            </div>
        </div>

        <div role="list">
            <!-- ko if: working -->
            <spinner role="presentation"></spinner>
            <!-- /ko -->

            <!-- ko ifnot: working -->

            <!-- ko foreach: { data: subscriptions, as: 'subscription' } -->
            <a href="#" role="listitem" class="nav-link text-truncate"
                data-bind="attr: { href: $component.getProductUrl(subscription) }, text: subscription.displayName || subscription.name"></a>
            <!-- <a role="listitem" class="nav-link text-truncate"
                data-bind="click: $component.handleSubscriptionListDropdownSelect, text: product.displayName"></a> -->

            <!-- /ko -->

            <!-- ko if: subscriptions().length === 0 -->
            <p>No subscriptions found</p>
            <!-- /ko -->

            <!-- ko if: hasPager -->
            <ul class="pagination justify-content-center" role="navigation" aria-label="Pagination">
                <!-- ko if: hasPrevPage -->
                <li class="page-item">
                    <a href="#" class="page-link" role="button" aria-label="Previous page"
                        data-bind="click: prevPage, enable: hasPrevPage">
                        <i class="icon icon-chevron-left"></i>
                    </a>
                </li>
                <!-- /ko -->
                <li class="page-item">
                    <span class="page-link" data-bind="text: page"></span>
                </li>
                <!-- ko if: hasNextPage -->
                <li class="page-item">
                    <a href="#" class="page-link" role="button" aria-label="Next page"
                        data-bind="click: nextPage, enable: hasNextPage">
                        <i class="icon icon-chevron-right"></i>
                    </a>
                </li>
                <!-- /ko -->
            </ul>
            <!-- /ko -->

            <!-- /ko -->
        </div>
    </div>
</div>