Zeppelin Header - Content List Compact With Search Template | Axero Documentation

The Zeppelin Header - Content List Compact With Search template displays a list of content in a side modal, with a search bar.

The template is a built-in template and comes with your Axero site. Follow the steps below to create the example widget, which provides quick links to the People Directory for all the departments in your organization.

1. Go to Control Panel > System > Page Builder > Header.
2. Set the Active Header to Global Header with Sub Navigation.
3. Click Save.
4. In the list below, edit the "Global Header with Sub Navigation" header.
5. Click Widgets.
6. On the "Sub Navigation" Section widget, click the gear icon > Expand.
7. Drag a new Section widget into the "Sub Navigation" Section widget.
8. On the Section widget you added, click the gear icon > Edit Properties.
9. Update the Title to Departments.
10. Click Template.
11. Select Zeppelin Header - Block Item.
12. Click Advanced.
13. Check Open content in modal.
14. Click Save Widget.
15. Drag a new Content List widget into the "Departments" Section widget you configured.
16. On the Content List widget, click the gear icon > Edit Properties.
17. Update the Title to Departments.
18. For Widget Sub Type, select Field Options List.
19. Click Template.
20. Select Zeppelin Header - Content List Compact With Search.
21. Click Advanced.
22. Check Load list on opening dropdown (requires template that opens).
23. Save the widget and page.

Template HTML

Below is the HTML of this template, for your reference.

<div id="ContentFilterList{{WidgetID}}" class="ax-diamond-hover-box ax-diamond-hover-box-spaces{{CustomCSSClass}}">
    {{#if ShowWidgetHeader}}
    <ul class="ax-diamond-hover-box-header">
        <li class="nav-header">
            {{{WidgetTitle}}}
        </li>
        <li class="divider"></li>
    </ul>
    {{/if}}
    <div class="ax-space-menu-filter">
        <input type="text" id="ContentFilter{{WidgetID}}" class="input-block-level hasPlaceholder" placeholder="{{Resources.GlobalSearchWatermarkText}}">
    </div>
    <ul class="ax-diamond-hover-box-dropdown ax-diamond-hover-box-dropdown-spaces" id="ScrollContainer{{WidgetID}}">
        {{#each Contents}}
        <li class="">
            <a href="{{ContentURL}}" class="space-home-link noimage"><span class="anchor-text">{{{Title}}}</span></a>
        </li>
        {{/each}}
    </ul>
    {{{PlaceholderHTML}}}
</div>
{{{ScriptBlock}}}
<script type="text/javascript">
    jQuery(function () {
        jQuery('#ContentFilterList{{WidgetID}}').on('keypress', 'input', function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
            }
        });
        
        jQuery('#ContentFilterList{{WidgetID}}').find('li').on('click', function(e) {
            jQuery('#SpaceList{{WidgetID}}').hide();
            jQuery(this).closest('.sidebar-modal').modal('hide');
        });
        jQuery('#ContentFilter{{WidgetID}}').keyup(function () {
            var me = jQuery(this);
            var filter = me.val(), count = 0;
            jQuery('#ContentFilterList{{WidgetID}}').find('.ax-diamond-hover-box-dropdown-spaces li').each(function () {
                if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
                    jQuery(this).addClass("hidden");
                } else {
                    jQuery(this).removeClass("hidden");
                    count++;
                }
            });
        });
    });
</script>