MENU

Organizing Text Content

Further organization and optimization of page content can make the user experience more enjoyable and helps the audience consume the content the way you intended.

Below you'll learn about creating tables and toggles, adding file downloads, list components for news feeds, and tags and filtering options.

Tags

Tags are used to organize your content by applying a “label” to a page. Tags are commonly used with news items to categorize the content.

Show Tags

Tags can then be displayed in the List Component styled as a card (link to List Component – Card) or used in labeling items to sort in the dynamic filter component.

Using Tags

Dynamic Filter

The dynamic filter component enables you to sort through pages by applying tags to the pages and displaying the results by tag name and/or dates. 

Select an option
This year This month This week Today Yesterday Last week Last month Last year Earlier
Select an option
Alumni Arts Awards and recognition COVID-19 Community notices Convocation Cultivating dialogue EDI Entrepreneurship Health and wellness Indigenous Innovation Institutional announcements Partnerships Reconciliation Research Sports Student experience Sustainability

 How to

1. Establish your tag structure - Before building any tags, you should identify your tag hierarchy and high-level groupings. ‘Parent’ tags are essentially the groups (i.e.: Topic or Location) and ‘children’ of these parents are your actual tags (i.e.: Burnaby, Surrey, Vancouver). 

2. Set up Tags - Before you can use the Dynamic Filter component, you will need to create tags for your pages. 

  • a. To create your tags, navigate to the tag tab in AEM.
  • b. Find your site tag folder, in the list on the left.
  • c. Create a parent tag - by selecting New > Create Tag. Enter the title and name of your Parent tag.

Note: This Parent tag will be used as your Filter Category.

  • d. Create child tags - by selecting your Parent tag from the list on the left and create child tags by selecting new > create tag.  

Note: All child tags will be displayed in the drop-down list of your Filter Category. There is no way to hide the child tags from the drop-down list.

  • e. Once your tags are created, activate each tag by selecting the tag and clicking on activate from the top menu.

3. Add tags to pages - Once your tags are set up, add the tags to your pages to be tagged.

  • a. Navigate to your pages and open the page properties.
  • b. Under the basic tab of your page properties, select the tab under Tags/Keywords to open the menu.
  • c. Find the tags for your site, and open the folders and select your child tags.
  • d. Once your tag has been selected it will be listed under the Tags/Keywords section.
  • e. To remove a tag, click on the small x that appears on the tag.

Note: 

  • Pages must be tagged to be displayed in the dynamic filter component.
  • Pages can have multiple tags.

4. Add date to pages  - If you plan to use the date filter you will need to add dates to your pages as well.

  • a. Open page properties of each page you wish to add a date to.
  • b. Under the basic tab, below Tags is the date field, select date from calendar.

5. Add Images to pages - If your results are to be displayed as cards you will need to add an image.

  • a. Add images under “Image” tab of page properties.
  • b. Set the crop size to 3:2 (Carousel) size.

6. Add Dynamic Filter Component - To add the dynamic filter component, find it in the sidekick under “other” section.

Note: only one Dynamic Filter can be added to a page at a time.

7. Set Dynamic Filter Component Options:

Filters Tab

  • a. Date Filter
    • i. No Date Filter - No filter for dates will be displayed
    • ii. Relative Date Filter - date filter will display as: this year, this month, today etc., 
    • iii. Static Date Filter - date filter will display by month, listing the most recent 12 months, followed by "Earlier"
  • b. Filter Names 
    • i. Filter Name - defines the label for the filter  
      (You can use the title of the parent tag, or use other wording)    
    • ii. Select Tag Root - select the parent tag
    • iii. Display as Table Column only - if you're using the Table display for results, this option allows you to show this category as a column in a table; if ticked, this category will not appear as a filter

Note: Your Dynamic Filter can have only 6 filter categories in total. For example: a date filter + 5 additional filters.

Options Tab

  • d. Search Label - the default keyword search label is "Refine your search", use this field if you'd like to overwrite it
  • e. Sort by:
    • Title - will list results in alphabetical order
    • Ascending Date - will list results from older to newer
    • Descending Date - will list results from newer to older    
  • f. Number of Initial Results - specify the number of results shown on page load. More results beyond the specified number will show when user clicks "Show more"
  • g. Display Style:
    • Table View - displays results in a table with sortable columns; each filter will show as a column
    • Simple List View - displays results as a list of links with dates (if selected)
    • Card View - 2 Columns - displays results as cards organized in a 2-column layout. Each card displays an image, date (if selected), page title and values from up to 2 parent tags
    • Card View - 3 Columns - displays results as cards organized in a 2-column layout. Each card displays an image, date (if selected), page title and values from up to 2 parent tags

Others Tab

  • h. Pre-filter By - specify one child tag, only items tagged with that value will display in results on page load
  • i. First Filter Displayed on Card - card results can display child tag values of one or two filters; choose a parent tag to use this feature; if no parent tag is specified the card will display no child tag values
  • j. Second Filter Displayed on Card - choose a parent tag to display its child tag values; if no parent tag is specified the card will only display child tag values of one filter

 

Resources