4

So here is the scenario. I want to "hijack" the Timeline webpart used for project sites in SP2013 and set a fixed start and end date. There is an option to lock the timeline in it's current state in the ribbon, but that is not what I need. I need to be able to set the dates using either codebehind, JavaScript or whatever. The purpose is letting the user choose a start and end date for a project, and then making the Timeline webpart only show that span of time.

The Timeline webpart is also a part of the Project summary webpart (or at least I think it is), which is the one I really want to be able to use, but a solution for any of the two will do.

I have looked through the object model for both the Project summary webpart (Microsoft.SharePoint.Portal.WebControls.ProjectSummaryWebPart) and the Timeline webpart (Microsoft.SharePoint.WebPartPages.SPTimelineWebPart), and even though a few properties exist there, none seem to have anything to do with setting a time span. I have also tried making sense of the SP.UI.Timeline.js file, which contains the JavaScripts used for the webpart (for better readability open the SP.UI.Timeline.debug.js instead). You can find it in the hive at ...15\TEMPLATE\LAYOUTS.

Since you can lock the timeline in the UI, there has to be a property somewhere storing the dates, but I can't seem to find it. Also, if you modify the webpart settings, there is a property called View Name with a drop-down selector. There is only one option called "Timeline" though. What is this view? Could the view contain the start and end date? Where is it stored? How is it retrieved (I'm betting through JavaScript)? The view name does not correspond to any of the task list views as it seems, so it simply make things more confusing.

Have anyone tried to do something similar? Did you succeed? Did you give up? Tomorrow I'll continue to try to read the partly obfuscated JavaScript code. But it's starting to look like MS has blocked all options of setting a fixed time span for the Timeline webpart.

4

I know that this is a rather older post. I was dealing with the same issue. The Timeline component stores most of the configuration data in a property bag stored off of the RootFolder for the specific Task List.

var list = SPContext.Current.Web.Lists["Tasks"];
list.RootFolder.Properties["TimelineDefaultView"];
list.RootFolder.Properties["Timeline_Timeline"];

You can then take the value from Timeline_Timeline de-serialize it, modify it, then save the serialized XML back into the property bag.

There is an XML node for the timeline options. With the current values available, it seems like your best bet is to create two milestone tasks like "Project Start" and "Project End". The timeline should adjust accordingly.

<options dateFormat="255" panZoomT="9" ProjSummFmt="3" showDates="1" showProjSummDates="1" showToday="1" showTS="1" timelineHeight="110" timelineWidth="-1" timescaleT="8" todayT="10" />

You can read more about my discovery on my blog.

  • 1
    We do not approve answers containing nothing but a link to a private blog. Add the details here, and use the blog as a soruce – Robert Lindgren Feb 10 '14 at 7:06
  • 1
    Updated post to include an answer, with reference to blog. sorry about that :) – SweeneyRobb Feb 10 '14 at 8:20
  • 1
    No problem, it is not easy to now all the rules when you are new here :) – Robert Lindgren Feb 10 '14 at 8:22
1

Super old question, but I kept getting this question when searching for an answer. I figured out a kluge for this and wanted to share it as it works surprisingly well.

To set custom time extents on the Timeline:

  1. Wrap the main Timeline contents with a new "masking" div (createElement, insert in DOM, move timeline into newly "masking" div wrapper.)
  2. Set overflow of new masking div to hidden. (This makes the masking div something like a viewport.)
  3. Calculate the desired (a) scaling and (b) left-right translation to set new extents.
  4. Apply a CSS scaling transform to legacy Timeline div (eg. in javascript: style.transform = "scaleX(a)")
  5. Apply a CSS translation to the legacy Timeline div (eg. in javascript: style.position.left = b + "px")
  6. Apply inverse scaling (1/a) to all text leaf nodes in DOM (otherwise the text in the Timeline bars get distorted.)

It's pretty straight forward to (eg.) create a button to only show a particular date range, and this also properly truncates Tasks in the Timeline that cross the start or end boundaries. I imagine you could also make a neat "panning" effect showing time trickling by.

Given the age of this question, I'll leave this vague answer as a hint. If anyone wants more detail on how I did this, I'll edit this to produce a proper/more detailed answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.