Display teasers for other pages in an interactive tabular
Add the component to the page. There are two
tabs: Collapsible Grid and Collapsible Grid
By default, teaser images from the linked pages are displayed as
slides in a grid pattern and when you mouse over a slide, the image
'flips' to display the associated teaser title. When you click a
slide, the slide number is now displayed as a placeholder while the
full teaser is revealed (title, image and description, plus any
list of links that is associated with that page template). The full
teaser is displayed below that slide row except for the bottom row
whose teasers are displayed above that row.
Number of grid columns: Choose from 3, 4 (default) or 5.
The actual number of columns displayed will depend on the space
available on the page.
Flip grid items: Provide a comma-separated list of slide
numbers to declare which, if any, of the slides should be flipped
so that the teaser title is displayed first instead of the image.
(On mouse-over, the view flips from description to image, or vice
Collapsible Grid Items Tab
Here you will choose the type of list, as well as additional
Build list using: This drop-down menu asks how you want
to build your list. You have the option to build it using:
- Advanced Search: Do not choose Advanced Search
unless you are familiar with writing queries. Build a list using
Java API and REST API. Advanced Search accepts a query description,
and creates and runs an XPath query.
- An Advanced Search tab will automatically appear.
- If desired, the XPath query will filter the result set and
- Query descriptions are made up from a set of predicates.
- For each predicate type, there is an evaluator component that
handles that specific predicate for XPath, filtering and facet
- The REST API provides access to these features through HTTP
with responses sent in JSON.
- Child pages: Populate the content of the list with the
pages found in a segment of a website.
- A Child Pages tab will automatically appear. Click the
magnifying glass icon to the right of the Parent Page field
to select a folder from which to display pages in your list. (If
you build your list with child pages, you do not have the option of
displaying them in the order of your choice.)
Be careful not to list the parent page here by
It can create a loop. >
The component opened for editing showing the Collapsible Grid Items tab.
- Curated list: Build a list with selected choices. Fixed
list requires you to manually add any additional pages to the list.
- A Fixed List tab will automatically appear. Click the
magnifying glass icons to select Web pages to be displayed.
- Use the Up and Down buttons to specify the order
that the Web pages will be displayed in the list. The minus (-)
buttons allow you to delete Web pages while the + button
enables you to add Web pages.
- Another list: Populate your list using another
previously created list. This is useful if you want to mirror items
displayed on another page, while perhaps limiting the amount of
- An Another List tab will automatically appear. Click the arrow
at the right of the List Reference field to select another
page from which to pull a list to imitate:
- Click on the field to pull up a browser window of all the pages
in your UBCMS site.
- Select the page containing the list you want to use.
- The browser will display all usable components on the right
hand side of the browser. Choose the desired list and click
- Search: Use a particular word or phrase to build a list.
Any page that contains the searched-for term will be included in
- Search query: Enter a predetermined unique keyword or
phrase; e.g. "ubgreen-event" in our example.
This is optional, but with no keyword you will display ALL events
in the calendar. More complex queries are possible. (See Tips
for Building a List Search Query.)
- Start in: Click the magnifying glass icon to select
which page, and subsequent child pages, the search is confined to.
Leave the field blank to search all pages in the UBCMS.
- Tags: Build a list using the tag words assigned to
certain pages. (Read more about Tagging
Your Shared Content.)
- A Tags tab will automatically appear. In the Tags field,
type the tags you would like to use or select the tags from a
drop-down menu by clicking on the downward arrow sign to the right
of the field.
- In the Limit to path field, choose the scope of the list
by selecting the page, and subsequent child pages, to which you
wish to limit the list. Leave this field blank to populate the list
using the content of your entire UBCMS. Web pages with tags
matching your selections will then be displayed in your list.
- Be advised, items in lists built using tags are not sorted in
the normal default order even if they all originate in one folder.
If you want the items to appear in a specific order, specify that
in the Order by field.
New window: Select so each clicked page is displayed in a
new browser window.
Order by: There are several ways in which you can order
- postDate: Arrange by the date the list pages were
created if using the News article template or with the Date Created
component in any other template. Using postDate without one of
these results in a randomized order.
- jcr:created: Order the list by the date of creation,
with the earliest date of creation beginning the list.
- cq:lastModified: The list will be ordered by the date of
modification. The page most recently edited will appear on
- cq:template: The order will be established according to
its arrangement in the Page Tree, sorted by template type used on
- jcr:title: The list is ordered alphabetically by
- random: There will be a random order to the list.
- You can also delete the default option and leave the field
blank to sort the list by its arrangement in the Page Tree.
Reverse order: Check the box to select whether you would
like to inverse the order selected in the Order by field.
Advanced List Options
Start at: Select how many items you would like to
skip at the beginning of the list (example: '5' will skip the first
four items and begin the list at the fifth item). Left blank, the
default value of '1' will result in the list displaying every item
in your list. This setting can be useful if you wish to feature
several items in one group, perhaps at the top of your news page,
or on your homepage, and NOT have them repeated with the rest of
your list displayed elsewhere on your site.
Limit: Choose a maximum number of entries
- If left blank, the default value is 100; for example, if you
leave it blank, no more than 100 items will be available.
- If you set the Limit value smaller than the Paginate
after value, users will never see the next page
Tip: If you want all items to appear in the list, do not leave
the Limit field blank. Instead, enter a value that you anticipate
will meet your needs; for example, 200, 500, etc. (The News Center
has used 9999 as a 'very large number' because their archives date
Exclude current page: Do not display any entries that
link to the page on which the list is shown (optional).
Enable scheduling: Select to enable shared content
- Scheduling can be used to automatically change the content in a
list over time.
- When scheduling is enabled, only pages whose “Featured
on/off time” (as set in each page’s Page
Properties) will be shown in the list.
- Scheduled lists can be previewed for a given date and time by
right-clicking the list and choosing “Schedule
- Unlike Delayed
Activation or Scheduled
On/Off Time, Featured On/Off Time does not affect the
page’s visibility elsewhere on the site; it is still visible
in navigation or by direct link.
- Pages with “Featured on/off time” set must also be
- Examples of uses for list scheduling:
- Hide an application link after a deadline has passed.
- Switch from one featured image to another in a slideshow each
day (set the start time of one item to the end time of
Host page: Specify on what page of your site you would
like any shared content shown. By default, it will be the current
The component opened for editing showing the Advanced list options.
Direct Linking to a Slide
You can link directly to any of the slides in a Collapsible
Grid, so that the page loads with that slide's content displayed.
The slides are numbered, 1, 2, 3, etc. and these become the anchors
for your link. Add a hashtag (#) + the slide number to the
end of the URL.
For example, this would load the page with the third slide
revealed on this Demo Site page: