This is an advanced component reserved for use only by the UCS Web team who will assist you in setting up and configuring the component.
List component
The List component is used to present similar or related content as a list of links. The list can be displayed in various formats by configuring the design options.
Component(s) you might want to use with this one:
Design options
There are a number of options available in this component. Although most are not normally used, they are presented below for reference.
The UCS Web team most commonly configures the List component to display Child pages as Links. In some cases, the component may also be configured to display a Fixed list of Links.
| Build list using | Display as | Order by |
|---|---|---|
| Child pages | News | jcr:title |
| Descendant pages | Links | jcr:created |
| Fixed list | Teaser | cq:lastModified |
| Search | cq:template | |
| Advanced search | ||
| Tags |
Other options:
- Limit
- Enable feed
- Paginate after
Job postings
A typical use case for the List component is to display job postings. For this purpose, each job posting should be created as a child page under a parent “Jobs” page in the AEM tree structure. The List component is configured to display this collection of child pages. Deactivated job postings will not display in the list on the live page. In some cases, job postings may be displayed as a fixed list rather than child pages if appropriate.
An example using two List components to display job postings
This is a list of advertised jobs on a “Jobs” page.
In this example of job postings for Canada Research Chairs (CRC), we will see that what appears to be a single list of four links, is in fact made up of two List components.
The first three links are for jobs under the Faculty of Arts and Science.
The last link is a job that is cross-appointed between both the Gina Cody School and the Faculty of Arts and Science. The page for the last job was created in the AEM tree under the Gina Cody School.
To build a list like we see in the example above, we will need:
- a first List component to display child pages from the Faculty of Arts and Science, and
- a second List component to display the cross-appointed position from the Gina Cody School as a fixed list.
A collection of child pages in the AEM tree
In AEM, the child pages for the Faculty of Arts and Science CRC jobs are located under the path:
/content/concordia/en/artsci/about/jobs/canada-research-chairs.
Notice there are a number of child pages here but only three are activated. They are the child pages we want to appear as links.
First List component
- First, we add a List component to a “Jobs” page where we want to advertise the jobs.
- Now, we configure the List component in the List tab to build the list using Child pages and display them as Links.
- Then, in the Child pages tab, we use the Parent page field to specify the path under which the job postings are located.
Second List component
- Next, we add another List component to the “Jobs” page.
- Then, we configure the List component in the List tab to build the list using a Fixed list and display it as Links.
- Finally, in the Fixed list tab, we use the Pages field to specify the path of the Gina Cody job posting page that we want to include in our list.
If we wanted to display other pages, we would click Add Item to add more paths.
Notice that the link to the page must be relative, i.e., starting with /content/... Use the magnifying glass to navigate to the page and this will ensure that the link is inserted as a relative link.
Remember, we are using a fixed list instead of child pages in this second List component because we don't want to include other jobs from the Gina Cody School that belong to a collection of child pages. We only want to add one specific job to our list.
Note: the links can be ordered using the up and down green arrows or removed from the list by clicking the red circle.
How the List components look in Author mode
Child pages in Author mode
In Author mode on the “Jobs” page, we see all the links to the child pages, i.e., all the deactivated and activated pages.
Fixed list in Author mode
In Author mode on the “Jobs” page, we also see the single link specified for the fixed list.
How the List components look on the live page
On the live page, the two List components are seamless.
Helpful tips & "gotchas"
By default, the font size of the list of links will only be 13 px. This is not easy to read so the UCS Web team will typically add the Embed CSS component to insert custom code onto the page. This renders the list using the standard X-Large style which has a better accessible font size of 18 px.
Need support?
The Web team is here to help.