Multi items

Multi items templates

Multi items templates can manage multiple records in the database.

In opposite to single item templates which manage one record like a html module.
Single item templates can also contain list of items, but they are stored in 1 record and can be ordered by the editor.

Multi items templates are suitable for larger amount of items. But the items are not ordered by the editor. They can be ordered by the template file.

A record is added from the module action menu when you are in edit mode.
Edit actions are added near by each item on the screen.

example with jplist plugin for filtering and pagingexample with jplist plugin for filtering and paging

example with jplist plugin for filtering and paging

How to...

Multi items templates use a manifest file for define the list template file and the detail template file.

{
    "editWitoutPostback": true,
    "templates": {
        "template": {
            "type": "multiple", /* single or multiple*/
            "title": "List",            
            "main": {
                "template": "template.hbs"
            },
            "detail": {
                "template": "detail.hbs"                
            }
        }
    }
}

Please note that for Multi-Item templates, loading of Javascript, CSS and "Template Settings" files will be done according to the root name you use here and not the actual name of the template file (which in this example are the same).
So when you have a template file "list.hbs" under "main", you would have to name your css file "template.css"

Working modes

You can now chose between different working modes :

  1. The items are loaded/rendered server side in the template

Thus in the client the data is available as HTML. Filtering, sorting and paging is handled clientside by the jplist framework.

{
    "index": false,
    "templates": {
        "template": {
            "type": "multiple", /* single or multiple*/
            //...
            "clientSideData": false,
          /....
        }
    }
}
  1. The items are loaded clientside from a webapi as json and rendered from a client side template with handlebars js template for example.

Filtering, sorting and paging is handled serverside by the webapi. The data need to be indexed. OpenContent use Lucene for indexing.

{
    "index": true,
    "templates": {
        "template": {
            "type": "multiple", /* single or multiple*/
            //...
            "clientSideData": true,
          /....
        }
    }
}

Common tokens for multi-item templates (handlebars)

General / Module context:
Render RSS url for this module: {{Context.RssUrl}}
Add item link: {{#if Context.IsEditable}}Add Item{{/if}}

List view, per item:

  • Inside an {{each}}:
    Link to the detail view: {{Context.DetailUrl}}
    Edit link (for list template): {{#if Context.IsEditable}} Edit{{/if}}

Detail view:
Link to the overview / list: {{Context.MainUrl}}

General handlebar tokens

SEO for detail page

Templates can be defined in the manifest.json for url, page title, meta description and additiona meta for example open graph tags.

{
  // ...
    "detailMetaTitle": "{{#if Seo.MetaTitle}}{{Seo.MetaTitle}}{{else}}{{Title}}{{/if}}",
    "detailMetaDescription": "{{#if Seo.MetaDescription}}{{Seo.MetaDescription}}{{else}}{{Description}}{{/if}}",
    "detailUrl": "{{Category.Title}}-{{#if Seo.Slug}}{{Seo.Slug}}{{else}}{{Title}}{{/if}}",
    "detailMeta": "{{#if Image}}<meta property=\"og:image\" content=\"{{Image}}\" />{{/if}}<meta property=\"og:type\" content=\"article\" />",
  
  // ...
  
}

Demo

http://www.openextensions.net/dnn-modules/opencontent/catalog

Download template