VLab User Guide

Timelines

Adding a Timeline to a VLab Page

TimelineJS is famous for easy-to-make, beautiful timelines.  These instructions will step you through the process of adding a timeline to a VLab community page.  

Creating a timeline involves 2 steps: 

  1. Adding individual timeline event entries.
  2. Adding a timeline Web Content container to a page

How to add the individual timeline entries

  1. Go to your community
  2. Click on "Menu" toggle icon in upper left to open the product menu 

    Screenshot of selecting web content folder

  3. Expand the "Content" Section under your community
  4. Click on Web Content and navigate to the folder where you want to store the timeline entries.  You can create a new subfolder if needed.
  5. Click on the large blue + on the bottom right and select "Timeline Event Web Structure"

    Screenshot of Web content structure selection dialog
  6. Add the following elements using the below image for locations where the elements are rendered in the timelineScreenshot of a Timeline with labels of the components
    1. Title
    2. Start Date Year
    3. Start Date Month (optional)
    4. Start Date Day (optional)
    5. End Date Year, Month, Day (optional)
    6. Headline - Headline displayed in the timeline
    7. Text - Text below the headline displayed in the timeline
    8. Media - URL - Displays image found at link - Link points to outside resource or upload an image to VLab through documents and media "content" and link to the internal file (optional)
    9. Media - Caption - caption displays below image/video at URL (optional)
    10. Media - Credit - if pulling image or video from elsewhere give the other site credit - displays the credit right below the media (optional)
    11. Media - Thumbnail - thumbnail shown in the timeline (optional)
    12. Media - Alt - alt tag used with the image (optional)
  7. Click on "Publish" to save
  8. Repeat procedures 5-6 for each timeline entry

How to add a timeline to a community page

  1. Repeat steps 1 - 4 above if you are not within the Web Content area of your community
  2. Click on the large blue + button on the bottom right and select "TimelineJS Web Structure"

    Screenshot of Web Content Structure Selection for TimelineJs Web Structure
  3. Enter a title for the timeline (right below the “Title*”) 
  4. Specify the “Title Slide” (the first slide displayed within the timeline):
    • Click on the “Select” button.  You will see the web content browser popup dialog.  
    • Click on the title of the timeline event entry web content that you want to show up as the first entry in the timeline.

      Screenshot of Timeline Event form
  5. To add timeline events to the timeline do the following:
    • Click on "+"  to the right of the first event for each new timeline entry
    • Click on the “Select” button
    • Select a timeline event entry from the web content browser

      Screenshot of Adding Event to Timeline step
  6. Repeat step 5 to add all the timeline entries created above (note that the timeline entries are placed within the timeline based upon their specified start and end dates). 
  7. Click Publish button to save your timeline web content.

    screenshot of Publish button
  8. Go to a community page that you want to add the timeline
  9. Add a Web Content Display portlet to the page you want the timeline displayed on

    Screenshot of the right product menu to to add Web Content portlet
  10. Select the timeline specified in step 3 above to have it displayed within the Web Content Display portlet.

    Screenshot of selecting web content dialog
  11. You are done!  Confirm that the timeline entries work as expected.  

How to add additional timeline entries to an existing timeline

  1. Follow the guidance under “How to add the individual timeline entries” above to add more entries
  2. Go to the page the timeline is displayed on
    • Make sure “Toggle Controls” is turned off (the eye at the top of the control panel doesn’t have a line through it)
    • Hover over the timeline portlet and select the three vertical dots
    • Select “Edit Web Content

      Screenshot of Edit Web Content button on the left dropdown menu of the web content display portlet.
  3. To add timeline events to the timeline do the following:Screenshot of adding timeline event button and fields
    • Click on "+" to the right of the first event for each new timeline entry (don’t worry about where you add the timeline, the start date controls placement within the display)
    • Click on the “Select” button
    • Select a timeline event entry from the web content browser
  4. Repeat step 5 to add new timeline entries
  5. Click Publish button to save your timeline web content.
  6. You are done!  Confirm that the timeline entries work as expected.  
Tags
user guide user manual timeline
Most Recent
Portlet Guidance August 27, 2019
Using Forums July 2, 2019
Request Forms March 28, 2019
VLab Training March 28, 2019
Navigation March 28, 2019
00
Previous