>>>Page under Construction<<<

Dynamic Search Query List

Layout Variant: C032

Content Type: Query List


Teaser Title

Teaser Text

Pictures and Media

Items

CTAs

C032 Query 

Yes

No

No

Yes

No


Aspect Ratio: 

  • N/A

Expected Use:

The C032 Dynamic Search Query List is designed to provide greater flexibility on table functionality that presents detailed information in a way that is easier for a site user to consume. C032 allows dynamic content population through a query list and displays it in table format. Tags are mainly used to set conditions on the Query List. Optional Search, Filter and Sort functionality are also available.

Building the Component:

For C032 Query List, below are the steps to setup the component:

  1. Create a Query List Document Type collection. This component can be attached or be a part of any pages. The author can simply place the Query List Document Type under the Main section.  
    • On the Conditions Tab, configure according to business requirements by: 
      • Selecting the applicable Content Types
      • Selecting the Tags for the Search Query
      • Define the Sorting of the Search Results 
    • On the Content Tab, your component should contain the following:
      • Teaser Title - This refers to the Query Name or Component Title Label. 
      • Teaser Header - This contains the optional Eyebrow Label displayed in blue font above the Teaser Title. 
      • Teaser Options - Enables and disables the link to detailed Page. Ensure that this is enabled.  
      • Items - This contains the collections that defines the individual Dynamic Table Header Label for the query list. Below are the steps to create the collection.
        • Create a new Teaser for each Dynamic Table Header Label. 
          • For the initial phase, the preset Teasers for table headers are Date Published, News Type, Topic and Description. 
        • On the Content Tab,
          • Only the Teaser Title is required to be filled up. The Teaser Title is the Dynamic Table Header Label.
          • All other sections are not used for this collection except the Layout Variant that must be set to "Default".
          •  On the System Tab's Local Settings, add a Boolean with the property name "isTableHeader_DynamicTableListSearch" then check the Value. 
        • Add this Teasers to the Items Section under the Contents tab of the Query List component. 
      • Set Layout Variant to C032 - Dynamic Table List Search
      • On the System Tab's Local Settings, standard and optional property settings can be added to the C032 component. Refer to bullet # 2 for the complete list of optional settings. 
      • Teaser CTA Label, Teaser Text, CTA Label and Teaseable Content, Pictures and Other Media are not used for C032 Component.
        • Changes on Background Color are not permitted.
        • Add the C032 component to Main Section of a page.
  2. Resource Bundle File
    • The "dynamicTableListSearch" resource bundle file was setup and added to the Homepage. The bundle files enable the displayed Table Header Labels on the query for the table, filters, search bar, so on to be localized. Refer to bundle file screenshot below.
    •  <Bundle File Image >
  3. Local Settings
    • The standard Local Settings that must be added to the C032 component are:
      • dynamicTableHeadings – This bundle file defines the order that the Table Header Labels will be displayed. <Insert screenshot>
      • subjectTaxonomy – Defines the document type and tags to search.
    • The List of optional settings that the author can add are as follows: 


Property

Type

Component Item

disableDateFilter

Boolean

Hides the Date Filter Dropdown

disableReleaseTypeFilter

Boolean

Hides the News Type Filter Dropdown

disableTopicFilter

Boolean

Hides the Topic Filter Dropdown

tableEqualColumnWidth

Boolean

Styles the Table with equal Column Widths

tableZebraStripes

Boolean

Styles the Table with Zebra Stripes

disableTableColumnDate

Boolean

Hides the Date Published Column in the Table

disableTableColumnNewsType

Boolean

Hides the News Type Column in the Table

disableTableColumnTopic

Boolean

Hides the Topic Column in the Table

disableTableColumnDesc

Boolean

Hides the Description Column in the Table

disableSearch

Boolean

Hides Search Functionality


Adding Optional Elements:

To add a short cut to "turn on" the Legacy (Gray) Background color, add a boolean property 'backgroundToggle' to the component's Local Settings. If this property is checked, then Legacy (Gray) background color will be displayed. If this property is unchecked or it is not added in the Local Settings then the background color is set to 'Default' (no color). 


Please enable JavaScript to use this website.