PSTimeline

THIS SOFTWARE IS COVERED BY THIS DISCLAIMER.

Timeline components based on VisJS Timeline to show record activity such as chatter posts, document uploads, tasks, events, case comments, and records on child objects. Primary use cases could be around health care, social services, case history, etc... basically anything you want to show sequence of 'events' and visual reference to time.

There are two primary components in this package:

1. PSTimeline (Record) - a component to help show all the activity that occurred for a record. Use this component when you want to show 'events' for a specific record. You can configure to show chatter posts, document uploads, tasks, events, case comments, and records on child objects.
2. PSTimeline (Object) - a component to help show all records that occurred for a specific object. You would typically use use this component on a Home page or dashboard type page where you are showing all records for a given object.

PSTimeline (Record)

Some options of the component:

• Drag left and right on the timeline to slide to different dates
• Scroll up/down on mouse to zoom in/out of timeline window
• Double click on item to load the associated record
• Ability to move to specific date in timeline
• Grouping of activities in to buckets/swimlanes
• Control icon in top-right of component:
  • Click to recenter timeline on current day/time
  • Click to select a specific date to move to
  • Click to fit all items within the timeline
  • Click to toggle grouping of records
  • Click to perform a full data refresh and plot on timeline

This Lightning component is very configurable with following options:

• Locale - specify locale of following options: 'en' or 'fr'

• Title - a title string to show at top-left of component

• Item Type - item type to show in timeline (box or range)

• SLDS Icon Static Resource Reference - reference to static resource file that stores the SLDS icons (default is "/resource/SLDS261")

• Minimum Height - the minimum height of component; leave blank to not set limit

• Maximum Height - the maximum height of component; leave blank to not set limit

• Days Before - the number of days in past to show on initial timeline

• Days After - the number of days in future to show on initial timeline

• Navigate to new window - boolean to navigate to new window on item double-click or stay in current window

• Show Hover - boolean to determine if hover details will show when you hover over an item

• Truncation Size - the max size of any label strings before truncation occurs

• Show Activities - boolean to show activities (tasks, events, emails, calls)

• Task Icon - the icon to show for tasks (default: "standard:task")

• Event Icon - the icon to show for events (default: "standard:event")

• Email Icon - the icon to show for email (default: "standard:email")

• Call Icon - the icon to show for calls (default: "standard:call")

• Show Chatter Posts - boolean to show chatter text posts

• Chatter Icon - the icon to show for chatter text posts (default: "standard:post")

• Show Content Uploads (files) - boolean to show content uploads (i.e. Chatter files)

• Content Icon - the icon to show for content (default: "standard:file")

• Show Case Comments - boolean to show case comments

• Case Comment Icon - the icon to show for case comments (default: "custom:custom19")

• Show Case Milestones - boolean to show case milestones

• Case Comment Icon - the icon to show for case comments (default: "standard:case_milestone")

• Show Case Articles - boolean to show knowledge articles attached to cases

• Case Article Icon - the icon to show for case articles (default: "standard:knowledge")

The component supports ability to show child records for up to 5 related child objects. Configuration options are:

• Show Child Records - boolean to show this child records
• Child Icon - the icon to show for this child
• Child Object - the sObject API name for this child
• Child Parent Field - the sObject Field API name that contains the lookup/master-detail to the parent record
• Child Label Field - the sObject Field API name that contains the label to show in the timeline item
• Child Date Field - the sObject Field API name that contains the date or date/time field to plot on timeline
• Child End Date Field - the sObject Field API name that contains the end date or date/time field to plot on timeline (if value is provided, then a 'range' item will be created in the timeline)
• Color Field - the sObject Field API name that contains a string value to display as the color for the item (should be in hex '#FFFFFF' type format)
• Default Color - a string for default color for this timeline item (should be in hex '#FFFFFF' type format)

PSTimeline (Object)

Similar to above, options of the component:

• Drag left and right on the timeline to slide to different dates
• Scroll up/down on mouse to zoom in/out of timeline window
• Double click on item to load the associated record
• Ability to move to specific date in timeline
• Grouping of activities in to buckets/swimlanes
• Control icon in top-right of component:
  • Click to recenter timeline on current day/time
  • Click to select a specific date to move to
  • Click to fit all items within the timeline
  • Click to toggle grouping of records
  • Click to perform a full data refresh and plot on timeline
  • Click to get pop-up window to allow dynamic filtering of records

This Lightning component is very configurable with following options:

• Title - a title string to show at top-left of component

• Item Type - item type to show in timeline (box or range)

• SLDS Icon Static Resource Reference - reference to static resource file that stores the SLDS icons (default is "/resource/SLDS261")

• Minimum Height - the minimum height of component; leave blank to not set limit

• Maximum Height - the maximum height of component; leave blank to not set limit

• Days Before - the number of days in past to show on initial timeline

• Days After - the number of days in future to show on initial timeline

• Navigate to new window - boolean to navigate to new window on item double-click or stay in current window

• Show Hover - boolean to determine if hover details will show when you hover over an item

• Show filter section - boolean to show filter section on initial view

• API Name of Object - the API name of object to plot records on timeline

• Filter Fields - a CSV list of field API names to show in filter section (see Filter Fields section below for advanced syntax)

• Filter Operation - logic for all filter fields applied during soql query; either 'AND' or 'OR'

• Object Icon - the default icon to show for this object

• Object Label Field - the sObject field API name that contains the label to show in the timeline item

• Object Details Field - the sObject field API name that contains the text or HTML details to show when hover over item (see Formula Fields section below for advanced formula options)

• Object Date Field - the sObject field API name that contains the date/time field to plot on timeline

• Object Icon Field - the sObject field API name that contains icon to show for specific records; this is override field where you can set the specific icon to use for each record based on a formula field (see Formula Fields below for details)

• Object Color Field - the sObject field API name that contains color definition to paint background color for item on time (see below for details)

• Object Grouping - boolean to set if grouping of records in to buckets/swimlanes

• Object Grouping Field - the sObject field that contains the grouping (i.e. some text value) for each record; this could be a Picklist field or a formula field where you define custom groupings to your need

• Past Date Limit - used to provide how far in past to look for records to help with performance; options are number of days or date in past to limit object search (enter either 1. positive integer or 2. MM/DD/YYYY)"

• SOQL LIMIT - an integer value to limit the number of records pulled; use this if your data set is very large; suggest testing for demos around limit of 500 or so; the SOQL query that runs pulls records in descending date order so you get recent records

Icons

For any icon values provided in the component configuration, you have 3 options:

1. Use a reference to one of the Lightning design icons defined here. The format of the configuration string is :. So for the first icon in the Action category, the configuration property would be "action:add_contact". For account icon down in the Standard category section, the configuration property would be "standard:account". The component is preconfigured using this approach.
2. Upload your own static resource file of images you want and reference normal way of "/resource/<image_name>"
3. Lastly is providing a full http/https URL to an image stored on some remote server

Filter Fields

In the PSTimeline (Object) component you can provide a comma-separated-list (CSV) of sObject Field API names to provide filtering capabilities. The component will parse the CSV list and build a pop-up window with filtering options (text box, drop-down lists, etc...). In simplest form, you can enter simple CSV value like

Subject,Type,Status,CustomField__c

But you can also provide some more advanced options to each field if needed. The format is '|{option:value,option:value}'. For example, lets say you want to override the standard label for the Type field and provide a default value of 'New'. Your CSV format would look like

Subject,Type|{"label":"Case Type","value":"New"},Status,CustomField__c

or let's say you want to also enable default wildcard capability (i.e. wrap any text with % chars) for a text field like 'Subject', your string format would be

Subject|{"wildcard":"true"},Type|{"label":"Case Type","value":"New"},Status,CustomField__c

Formula Fields

Remember that you can use formula fields anywhere in the configuration properties where you need to provide a field API name for options like item color, item hover details, item label or item grouping. So for color, you can have a formula field like following to show different background colors for items:

CASE(Status, "New", "#d9d9d9", "Working", "#ccebff", "Escalated", "#ffb3b3", "Closed", "#adebad", "#d9d9d9")

Or show different item icon with formula field like following:

LEFT($Api.Partner_Server_URL_260, FIND( '/services', $Api.Partner_Server_URL_260)) & CASE( Type, "Animal Control", "resource/CaseType/OneCityAnimalInactive.png", "Events", "resource/CaseType/OneCityEventsInactive.png", "General Inquiry", "resource/CaseType/OneCityGeneralInactive.png", "Licensing and Permitting", "resource/CaseType/OneCityPermitInactive.png", "Noise", "resource/CaseType/OneCityNoiseInactive.png", "Public Works", "resource/CaseType/OneCityPublicWorksInactive.png", "Street and Traffic", "resource/CaseType/OneCityStreetInactive.png", "resource/CaseType/OneCityNoTypeInactive.png")

And lastly for item hover details, you can have a formula field that has embedded HTML tags to format your hover pop-up as you like:

'<h3>Subject + '</h3>' + '<table><tr><td valign="top" style="padding-right: 10px">' + '</td><td>' + '<br/><b>Type:</b> ' + TEXT(Type) + '<br/><b>Status:</b> ' + TEXT(Status) + '<br/><b>Priority:</b> ' + TEXT(Priority) + '</td></tr></table>'

Deployment Issues

Depending on the configuration of your target org, you may run in to one of the following deploy errors:

1. classes/PSTimelineController.cls(305,33):Invalid type: Schema.CaseMilestone - make sure to enable Entitlements in your org

Dependency: Install the LightningStrike.io and PSCommon packages first