Timeline

Layout Variant: C090

Content Type: Collection

Expected Use:

The C090 is an authorable, content-driven component that is organized in a modular, timeline layout. This component features content in a timeline layout configured based on content type and designated CoreMedia tags. While designed for the Newsroom project, the primary use case for this component is a timeline, but it has the flexibility to also be used to showcase a process flows or other content that needs to be presented in a sequential manner. 

Building the C090 Component:

This component uses a Timeline which functions similar to a Collection, but allows a dynamic selection of content. 

Step 1: Create a Timeline Page

Step 2: Create a Timeline Collection

1.  Add Teaser Title – This is the timeline heading title to a section.

2.  Add Teaser Text -This is the optional timeline description of a section.

3.  Add the Teaseable Items – This contains the Segment Collection (Refer to Step 3) that will display on the Timeline.

4.  Set CTA to ‘Default Call to Action Label’

5.  Set Layout Variant to ‘C090’.

6.  Teaser CTA Label, Teaser Header and Pictures or Other Media are not used in this collection.   

7.  On the Local Settings under the System tab, below are the properties that must be defined.

• Sort By Dropdown. This displays the optional ‘Sort By’ dropdown and when enabled, allows a user to sort item displayed in ascending or descending order. Sort functions are described in Step 5: Timeline Resource Bundle.
  • In the Timeline collection add a Local Settings boolean property called ‘displaySortDropdown’
    •  If this property does not exist or is unchecked the ‘Sort By’ dropdown will not display on the timeline page (This is the default.).
    • If the property is checked the ‘Sort By’ dropdown will display on the timeline page. 

• These string properties and values are on the locale’s ‘timelineGeneral’ described in Step 5: Timeline Resource Bundle, if they do not currently exist. These are the options that will display in the ‘Sort By’ dropdown. This has been setup up already. 

• backgroundToggle – When enabled, this displays the Timeline Collection with ‘Legacy (Gray)’ background color.
• addToJumpNavFlag – When enabled, this allows the user to move from one timeline to another.
• bgColorState – this displays the background selected under the Content tab.
• Below is a sample of the properties in the Local Settings under the System tab. 

8.  Add this Timeline Collection to the Timeline Page.

Step 3: Create a Segment Collection

1.  Create a separate collection for each Segment Sub-group that will display on the Timeline.

2.  Teaser Title, Teaser CTA Label, Teaser Header, tester Text and Pictures or Media are not used. 

3.  Add Items – This contains the Event Card Teaser that will display on the Timeline. Refer to Step 4: Create a Segment Event Teaser.

4.  Select ‘Use Default Call-to-Action label’. The CTA will come from the Event Card Teasers added on the Items.

5.  Set Layout Variant to ‘Default’.

6.  Add the Segment Collection to the Timeline Collection. 

7.  On the Local Settings under the System tab, below are the properties that must be defined.

• Segment Sub-group Start and End Labels
  • In each Segment collection add a Start and, if applicable, End Segment label
    • Add a Start string property to the Local Settings called ‘TimelineSegmentStart’ and give it a logical value.
    • Add an End string property to the Local Settings called ‘TimelineSegmentEnd’ and give it a logical value.
    • The logical values you create must be unique to your instance of the component so that you can enter the labels for your component in the bundle file. Example have been created in the two bundle files that each platform should use. 
    • Note: these are not the actual values that will appear on the timeline. Go to the next bullet to create the actual values. 

• In your platform's timeline resource bundle,
  • For the Properties, add the Values from each Segment collection that were created for the Start and End labels.
  • Add the Start and End values to the corresponding Properties that will appear on the timeline. Refer to the above sample. 

• Note: Timeline bundles are created for each platform:  'timelineAutoSol' or 'timelineComRes'. If multiple Segment Sub-groups use the same Start or End values, do not duplicate these values in the respective timeline bundle files on either platform's timeline resource bundle. Instead, use the unique 'timelineAutoSol' or 'timelineComRes' Property name as the Value in the Segment collection. The Segment’s local settings Value will ‘point’ to the appropriate bundle file property per platform.

Step 4: Create a segment Event Card Teaser

1.  Create a separate teaser for each event card that will display on the timeline.

2.  Do not add anything on the Teaser Target.

3.  Add the Teaser Title - This contains the event card eyebrow. The eyebrow displays maximum of two lines. Beyond two lines, it will be truncated.

4.  Add the Teaser Header – This contains the optional event card heading or Title Text.

5.  Add the Teaser Text – This contains the event card’s body text or description.

6.  If applicable, add an optional Picture or Video.

7.  If applicable, add an optional CTA. A maximum of two (2) CTAs can be added. 

• Authors have the option to not display any CTA or add a Page, Download, External Links, Videos, or any combination as CTAs.
• When any of the teaseable content (linked item) are added, authors have the option to set the CTA Button to ‘Use Linked Call-to-Action Label’, the CTA will come from the linked item OR ‘Use both Custom & Linked Call-to-Action Label’, if a custom label is desired to replace the teaesable content’s default CTA.

8.  Set Layout Variant to ‘Default’.

9.  Add the event card teaser to the appropriate Segment Collection it should display in.

10.  On the Local Settings under the System tab, below are the properties that must be defined.

• Event Card Expanded. On the Local Settings under the System tab, below are the properties that need to be defined.
  • In each ‘Event Card’ teaser add a Local Settings boolean property called ‘dataCardExpanded’.
  • If this property does not exist or is unchecked the Event Card will display in the collapsed state on page load (this is the default).
  • If the property is checked the ‘Event Card’ will display in the expanded state on page load. 

• CTA Button.
  • In each Event Card teaser add a Local Settings boolean property called ‘displayCTAasButton’.
  • If this property does not exist or is unchecked any available CTA will display as a link (this is the default).
  • If the property is checked the any available CTA will display as a button. 

Step 5: Timeline Resource Bundles 

1.  The resource bundle ‘timelineGeneral’ contains three (3) main bundle entries. There are two additional bundle files. One for each platform: 'timelineAutoSol' and 'timelineComRes' that defines the properties and values for the Start and End dates or labels. 

2.  Remember to add the platform specific resource bundle properties to the Timeline Segment collection --> Localization Tab.