Resource listing

Overview

A resource listing template is for when a content author wants to create search style pages for a content area. This allows for filtering of files or information into relevant categories. An author can set up multiple categories.

A resource listing can display information as a lightbox.

Example

Two live examples of resource listings are Historic settlement surveys and Hampshire Outdoor Centres.

Some resource listings have included over 350 items so there is effectively no limit.

Screenshot examples are in the guidance below.

WCMS use

Introduction

There are three steps to complete to set up a Resource listing:-

  1. Meta title (LookupValueGroup) and Lookup Values - The Meta title is the header in the left navigation containing all the Lookup values. The Lookup values will be the radio button fields the user can select underneath the Meta titles.
  2. Resource items - These are the individual boxes on the right. Each resource item is linked to one or many Lookup values (see below image)
  3. Resource page - this is where you add your Meta titles (in Content Editor) and Resource listing rendering component (in Experience Editor)

Example of location of elements on Resource item page

The below image gives you visual guidance of which element populates what on the page:-

Step 1. Metadata and Lookup Values

  • To set up a searchable resource listing you need to create a LookupValueGroup. Navigate to common-content, Global settings and metadata. 
    • Check through the list to see if you can use any of the current groups for your Resource Listing. Do not change the current setup though as these are likely to be in use (you can always add more LookupValues (shown as binoculars) if needed though)
    • If not, right click 'metadata' and choose Insert and then LookUpValueGroup. Enter a name for the new item in lower case and select OK. 
    • It may be worth thinking about what values you need and how to group your resource items before you start
  • The name, value and description of the Lookup Value are all the same
  • Duplicate and create more Lookup Values but be conscious that it's best to keep it minimal so the user doesn't have to scroll to much
An example can be found by opening: Common-content > Global settings > metadata > benefits > educationandskills.

Step 2. Resource items

  • Resource items are placed in: Common-content > Service content
  • Add a folder to hold the resource items by expanding Service content and then the folder where you want your content to be located. Right click on the parent page and choose Insert and then Folder. Give your folder a name and select OK. Its good practice to match the page structure in terms of folder location
  • Add Resource items within the folder by duplicating others from a different folder. The fields that need to be considered are:
Title and Description This will appear in the very top part of your resource item.
The title is actually a link. If you're linking to an internal Sitecore page this will take the title of that page. In Content Editor in the Title field press Insert link and navigate to the page and highlight it. The description of a page can be added in the description field at this point.
If you are linking to a HantsFile document then press Insert external link and paste the HantsFile link into the URL field. Add a description and press Insert.
Thumbnail image (optional) In the thumbnail image field press Browse. Find your image in the navigation and press Insert. The image will need to be approximately 250 pixels x 250 pixels.
Metadata In the Metadata field find where your meta data is located and then double click on each skill to move it to the Selected field.
When you create the page in step 3 you may not be able to preview it. This is because you need to make sure each Resource item is linked up to its page (see 'Title and Description')

Step 3. Resource item page

  • In the content tree, right click and select Insert > Insert from template
  • Choose Page templates > HCC_ResourceListing
  • Optional: In Link details fill in the fields Link title, Link caption, LinkItem_ButtonLabel and add a Link image
  • In the Resource Listing section, go to the Resource items location: field. Select the drop down and navigate to the parent folder of your new resource items (it will be located in Service content)
  • In the Filter: field move across the parent icons from All to the Selected area by highlighting them and pressing on the right directional arrow. (a parent icon is shown as a blue book with an a-z). Do this for each of the meta data items you want to use as a filter group
  • Resource items location filter example
    • For the filter to work the child items that you want to appear on the page as filters must be directly under the parent icon in the Content Editor navigation
  • Lookup value group for Sitecore
  • Resource listing Sitecore example showing parent filter values
  • In the Summary information section fill in Page title and the Summary of page fields

Check that the content is being populated on your page after saving.

Don't call any resource item Document. When selecting it in the filter, it causes the page to error (the word document might be a reserved word for coders to use). 

Lightboxes (additional step)

If you need information to appear as a lightbox then you need to make new TextToFullWidth pages underneath the HCC_ResourceItem page.

Right click your resource item and choose Insert and then press Insert from template. Expand Page Templates and highlight HCC_TextToFullWidth. Press Insert. The page can have any items on it but be mindful of how you want it to be displayed inside the lightbox. The lighbox will be smaller than an average page. A good example can be found by selecting abseiling on the Hampshire Outdoor Centre activities page.

For the resource item page find the field CustomScripts under Page specific scripts and add JS/resourcelist-colorbox.

Example of location of elements on Resource item page

The below image gives you visual guidance of which element populates what on the page:-

MVC.net use
Code
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release

Example image

Resource listing example