Start a conversation

How to configure the Advanced Directory

Customise your directories to do exactly what you want.

The Advanced Directory uses the Handlebars template system to render 2 sets of views: Listview and Detailview.

  • Listview - This is the UI users see when listing the directory entries. It is also used for displaying Search & Filter results when they are used.
  • Detailview - This is the UI users see when they open an entry.

Compared to the standard Directory component, the Advanced Directory allows you to customise how the UI for both views are rendered. It also comes with additional CSS and JavaScript containers for you to customise the directory further.

Here are some examples for the Listview and Detailview template code:

Listview

<ul>
{{#each this}}
  {{{alphabet_divider}}}
  <li class="linked data-linked" data-type="entry" data-index="{{@index}}">
    <!-- <span class="icon fa fa-star"></span> -->
    <div class="list-desc">
      <p class="list-title">{{plaintext "Title" this}}</p>
      <p class="time-place">{{moment "Session start" "HH:mm" this}} – {{moment "Session end" "HH:mm" this}} · <span>{{Location}}</span></p>
    </div>
    <div class="list-tags">
      {{tag_filters "Tags" this}}
    </div>
  </li>
{{/each}}
</ul>

As  with all Handlebars templates, each HTML template is   passed  through an object. The Listview template is  passed  through an  array of the data collection. This  could be the  full collection  or a filtered set based  on the search &  filter results. There are  a couple of  things to note:

  • It must follow a basic <ul><li></li></ul>     structure
  • The <li>  element must have    the following attributes class="linked data-linked"   data-type="entry"    data-index="{{@index}}" 

There  are a couple of useful Handlebars helpers that the   Advanced  Directory comes with:

Plaintext

This filters the content into plaintext by passing the   property  through the jQuery.text() 

Example

{{plaintext "Title" this}}

Moment

This  filters the content through the momentjs syntax by   passing the  property key and a date format for  rendering  based on ISO  formats.

Example

  {{moment "Session start" "HH:mm" this}}

Tags

The tag_filters  helper  renders a list   of tags based on the HTML structure below:

  <a class="data-linked" data-type="filter-value-tag" data-value="{{tagValue}}" data-filter="{{tagsField}}" href="#">{{tagValue}}</a>

The  tags rendered also act as filters when users tap on   them.

Example

{{tag_filters "Tags" this}}

Detailview

  <div data-source-entry-id="{{ID}}">
  <div class="directory-detail-title">{{[Title]}}</div>
  <div class="directory-detail-label">Location</div>
  <div class="directory-detail-value">{{[Location]}}</div>
</div>

The  Detailview template is rendered by passing through   an object for  the single entry that is to be  rendered,  containing all the  available  properties.

You  can, therefore, put together any HTML structure and   use any of  the object properties with the Handlebars   syntax.

Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Ian Broom

  2. Posted
  3. Updated

Comments