Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.

Follow

Edit content list or RSS feed templates

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

This is a Developer task

To edit a template:

  1. Go to More > Content Lists
  2. Choose a content list of RSS feed to edit it, or click Create New Content List to start fresh.
  3. Go to the Edit template tab.

Different templates available

The diagram below shows how these templates are combined to build the full list view template.

The templates are put together so that the body top is at the top, followed by the header, then the first item, alternate item, last item, footer, and body bottom. Alternatively, the empty template is displayed between the body top and body bottom.

Body Top

Body Top will show regardless of if there are items to display or not. This is the best place to include any filters for the content list.

Header

Shows between the item templates and body top template. Will only show if there are items on the list.

First Item, Item, Alternate Item, and Last Item

If you don’t want to treat Alternating Items, First Item, and Last Item differently, you can just use the Item template. If you do want to have a different style or different information on any of these items, use a combination of the 4 templates.

Footer

Shows between the items templates and the body bottom template. Will only show if there are items on the list. The footer template is where you can create pagination for your content list.

Body Bottom

Similar to Body Top, this template will show regardless of whether there are items to display or not.

Empty template

This shows if the list doesn’t have any items to display.

Edit Body Top, Header, Footer and Body Bottom templates

When working with these templates, you’ll see the same set of template parts and plugins to use within the template. You can place an existing plugin in the template where appropriate.

Each of the template parts will render a control for site users to interact with, static text that shows information to site users, or a piece of JavaScript code. You can place the JS code within a script block or directly within an onclick attribute.

  • Search Trigger - This will render the necessary postback JavaScript to trigger a search on click. You can include this in a small JavaScript block or directly within the onclick attribute of a link.
  • Search trigger - No JS - This will show a search trigger button to the user with the selected text as the button text. We recommend using this instead of the above trigger to meet accessibility requirements. This will work even if the user has disabled JavaScript in the browser.
  • Keyword Search - Will show a textbox for the site user to enter the keyword.
  • Filter - Will render a custom filter postback code. You can place this within a JS code block or directly as an onclick attribute of a link. The format expected is similar to the default filter.
  • Total results - Will show the total number of results as a piece of string.
  • Pages - Will show an unordered list of hyperlinks with postback JS to change the page the user is on.
  • Pages - No JS - Will render a drop down with the list of pages and a button with the given text to change the page.
  • Current page - Will show the current page number as a piece of string.
  • Total pages - Will show the total number of pages as a piece of string.
  • Previous page - Will render the postback JS to move to the previous page.
  • Previous page - No JS - Will show a button to move to the previous page.
  • Next page - Will render the postback JS to move to the next page.
  • Next page - No JS - Will show a button to move to the next page.
  • From result # - If you want to show information around the number of items (e.g. “Showing items 10 to 20”) then you can use this template part in combination with To result #.
  • To result # - If you want to show information around the number of items (e.g. “Showing items 10 to 20”) then you can use this template part in combination with From result #.
  • Search terms - If you do have a keyword search field within the filter, you can use this template part to get the value the user has searched for. The value will be returned as static text.
  • Results per page - You can let the user overwrite the page size you’ve configured in the Overview tab. This shows the necessary controls for the user to change the page size.
  • Results per page - No JS - This has the same functionality as Results per page, but renders as buttons so the functionality will work even without JavaScript.
  • Link to current page - Renders the current page link as static text. You can use this to create a button or link to refresh the page to the default state without any site user filters.
  • Time Zone - Hidden, Time Zone - Drop Down, Time Zone - No JS - The date filters shown in a content list will always be considered to be in the time zone that you’ve set in the application. If you want these filters to use the site user’s time zone, use one of these filter options.
  • Control Id - For the site to meet accessibility requirements, you need to make sure all input fields in a filter have an associated label. Use this template part to achieve this.
    For example:
    <label for="<DataListControl type="ControlId" control="searchListKeyword"params="normal" />">
    	Search
    </label>
    <DataListControl type="SearchKeywordInput" controlid="searchListKeyword" />
  • Search query JSON - Renders the current search query in JSON format. This can be assigned to a JS variable in a script block.
  • Field-specific filter options - In addition to the above filter options, you’ll get filter controls for the fields used within the content types selected for the content list. These filters will render an appropriate filter based on the field input type.

If you’re not sure what to include in your templates, check out our sample content list templates.

Edit First Item, Item, Alternate Item, and Last Item templates

When working with these templates, you’ll see the same set of template parts and plugins to use within the template. You can place an existing plugin in the template where appropriate.

The template parts you’ll see will be the fields used in the content types you’ve chosen. Values of these fields can show on the content list based on the field template selected.

In addition to the fields, you will get the following special template parts:

  • Result:BodyText - Best used if you have a keyword search filter. You can configure the body text to show X number of characters around the best-matched text.
  • Result:Relevance - The relevance of the item to the keyword searched. The value is rendered as a percentage.
  • Result:Sequence - This will render the sequence of the item within the content list. This is a zero-based sequence per page. You can use this to create a unique CSS class per item template or use within a data attribute to be used in JavaScript.
    For example:
    <div class='item-<Result type="Sequence" />'></div>
    Or
    <div data-item='<Result type="Sequence" />'></div>

Don’t forget to check out our sample content list templates if you’re stuck.

Edit the Empty template

You can give additional information to users via the Empty template when their search terms don’t return any results. Or, use some default text for when a predefined content list doesn’t have any items to display.

Was this article helpful?
1 out of 2 found this helpful