Introduction to Details Pane Templates

This page contains information about...

Details Pane Templates are based on HTML and are extended with handlebars templating language.

For a list of available metadata fields see Available Binding Values in Content Manager.

Template skeletons

A template defines the content for a details pane tab. There are numerous ways and possibilities in which a template can be defined. In this section, we provide few examples and also some built-in helpers which can be leveraged for specific use cases.

Case: Editable metadata fields

Adding form fields for editing metadata in the template requires following structure which has both editable and non-editable blocks where, editable block is displayed when an entry is being edited or created by the user and non-editable block is displayed when a user simply browses an entry by selecting it.

Please also see template layout options for more information on ways to structure templates.

CODE

{{#form-container legacyController=legacyController}}
    {{#if editable}}
        <!-- editable block; configuration when editing -->
    {{else}}
        <!-- non-editable block; configuration when read only -->
    {{/if}}    
{{/form-container}}

Case: Common configuration

Information or components which are non-editable and hence do not depend on editable state can be simply added outside of editable and non-editable blocks. In the example below, we have configured our default audio pre-listen player.

Code

XML

{{audio-controls validateEntry=true legacyController=legacyController}}

Case: Creating new entry/group/story.

There is a built in property specifically for the case of creating new entry.

CODE

{{#if creatingNewEntry}}
	<!-- when creating a new entry -->
{{/if}

Examples:

Adding simple metadata fields

Adding one or metadata fields is simple. Here we add the metadata field Title. For layout, we have used our responsive-grid.

Code

XML

{{#form-container legacyController=legacyController}}
    {{#if editable}}
        {{#responsive-grid-area}}
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom" class="details-area-text-bold">Title:</div>
            <div data-col="sm-8 xs-12 valign-center" class="editable-field">{{input value=editModel.Title placeholder=editModel.TitlePlaceholder type="text" ariaLabel="Title"}}</div>
        {{/responsive-grid-area}}
    {{else}}
        {{#responsive-grid-area}}      
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom" class="details-area-text-bold">Title:</div>
            <div data-col="sm-8 xs-12 valign-center" class="details-area-text-bold">{{model.Title}}</div>
        {{/responsive-grid-area}}
    {{/if}}
{{/form-container}}

For many (technical) metadata fields it does not make sense to offer them as editable fields. If you want to show them nevertheless you can copy/paste the read only part into the editable part.

In Content Manager this would look like...

And in edit mode...

Enumerating arrays of objects

An entry has a metadata field Media which contains an array of medium objects. A medium object has an metadata field Subclips which contains an array of subclip objects. We want to visualize such arrays of data.

Example for subclips:

Code

XML

<table class="modern-table">
    <thead>
        <tr><th>Id</th><th>Type</th><th>Title</th><th>Comment</th></tr>
    </thead>
    <tbody>
        {{#each model.Media key="@index" as |m2|}}
           {{#if m2.SubClips}}
                {{#each m2.SubClips key="@index" as |sc|}}
                    <tr><td>{{sc.Id}}</td><td>{{sc.Type}}</td><td>{{sc.Title}}</td><td>{{sc.Comment}}</td></tr>
                {{/each}}
           {{/if}}
         {{/each}}
    </tbody>
</table>
{{#if model.mainMedium}} Count: {{model.mainMedium.SubClips.length}}  {{/if}}

Template Includes

You can create reusable snippets and include them in your templates.

Please see Template Includes.

Layout options

These are different ways to structure details pane template.

Please see Template layout options

Conditional Helpers

Template conditional helpers allow to specify conditions for rendering part/section of a template.

Please see Template conditional helpers

Configuration options for single selection of entry

These are custom components and other configurations that work with single selected entry in Content Manager.

Please see Templating options for single selection of entry

Configuration options for multi-selection of entries

To enable fast editing in Content Manager, bulk-edit operations are also supported that require some specialized components

Please see Templating options for multi-selection of entries