>>>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:
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:
- 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.
- 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 >
- 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).