List Builder Component

Lists of links are common on UBCMS pages so there are a number of components that provide ways to list links. These can be simple bulleted lists, or more extensive lists of ‘teasers’, which display bundles of elements pulled from linked UBCMS content.

Links to external websites outside the UBCMS require the complete URL (http etc.), but for links to other UBCMS pages, we use what is called a reference, created using the built-in picker tool.

2. Open the Sites Console and navigate to your site; e.g. Sites + Self-Paced Training + {your site}.

3. Choose any page on your site or create a new page.

4. Select that page and click Open in the Commands Menu that now appears.

5. To add a component...

• Click the Toggle Side Panel button in the upper left of the window.
• Switch to the Component Browser.
• Components are listed alphabetically. Or type part of its title and click Enter.
• Find your desired component and drag it onto the page.

6. Select the component, then click the wrench icon to Configure it.

7. The List Builder can create a variety of different lists. This exercise will explore two common choices: Curated List and Child Pages.

This is a list of links that you will maintain yourself.

1. In 'Build List Using', choose 'Curated list'. A new tab will appear to house your links.
   
   Before you build your list, we’ll remind you that links to websites outside the UBCMS require the complete URL, “http” etc. Each external link requires a URL and text the visitor will click on. If you’re uncomfortable typing in these complex links, try finding the website in a separate browser tab, then copy the URL from the browser location bar. Internal links to other parts of the UBCMS should be created using the built-in picker tool and will begin “/content…”.
   
   
2. Now click the Add button four times to add four links.
   1. The first link will be to an external website.
      
      • For Path, enter “http://yahoo.com”.
      • For Link text, enter “Yahoo!”.
        
   2. The second link will be a reference to a UBCMS page.
      
      • For Path, click the checkbox icon to open the Picker tool.
        
        • Navigate to another page in the UBCMS (e.g. Content + {your training site} + UB’s Research + Natural Sciences Complex.
          
        • Select that page by clicking the thumbnail, then Select.
          (Note the reference path begins /content… and not http.)
      • For Link text, you can leave the this blank for a UBCMS reference. (The UBCMS will use that page’s Title and automatically update it if it ever changes, which is very helpful.)
   3. The third link will be to Yahoo again, but intentionally leave off the "http://" part of the URL.
      
      1. For Path, enter “yahoo.com”.
      2. For Link text, enter “Yahoo”.
   4. For the fourth link, link to Yahoo again, but this time we will forget to include the link text.
      
      1. For Path, enter “http://yahoo.com”.
      2. For Link text, leave the field blank.
3. Click the checkmark to save your changes and observe the results. 

You should see Yahoo!, Natural Sciences Complex (text supplied by the UBCMS), then “Title Not provided” for the link text we neglected to add (this reminder text will also show on your live website), and finally a warning of a “bad path provided”. For this fourth link, the missing URL prefix confused the UBCMS that you had referenced a non-existent internal page.

1. Open the component again and fix those errors.
   
2. Then save your changes and study the results.
   

This is an automated list of links that displays children of a parent page 

1. Under 'Build list using', choose 'Child pages'. A new tab will appear.
   
2. Now you need to choose the parent, so all its children are displayed.
   
3. On the Child Pages tab, click the magnifying glass icon to open the Picker tool and navigate to another part of the UBCMS; e.g. Content + {your training site} + Our Buildings. (Our Buildings has five children.)
4. Click the checkmark to save your changes and observe the results.
   

You should see a series of links to those five child pages, with the titles supplied by the UBCMS. This list can act as an index to that part of our website, with the titles automatically updated if the page titles ever change, and the items in the list automatically being updated if pages are added or removed.

But because we are using UBCMS content, we can also make this index fancier.

1. Open up the component again and expand the Display As settings.
   
2. Scroll down and select ‘Teasers With Images’.
   
3. Save your changes.

You should now see a very appealing list of what the UBCMS calls ‘teasers’, mini previews of each page. The thumbnail image, title, and first block of text from each child page is displayed as a fancy link.

• List Builder Component
• Links and References