Tasks list web part Timeline disappears

Question

I have a page with Web Part layout. I add a Tasks list web part and Documents library web part in the same page and publish. By default the Timeline is getting shown in Tasks web part however when I navigate to a folder in the Documents web part (Note:- The url has rootfolder querystring now) the Timeline disappears.

Any help on this

Answer 1

Find myself the solution, Scenario: The above scenario is working fine until I activated the publishing feature. Once I activated the publishing feature for the site, it stopped working.

Reason for failure: sp.ui.timeline.js (and its related js & css files) was not loaded hence the timeline disappeared.

Resolution:

if ($("span[istimelineparent='1']").children().length == 0) {
    loadCSS(window.location.origin + "/_layouts/15/1033/styles/Timeline.css");

    loadScript(window.location.origin + "/_layouts/15/xui.js", function() {
        loadScript(window.location.origin + "/_layouts/15/sp.datetimeutil.js", function() {
            loadScript(window.location.origin + "/_layouts/15/sp.ui.timeline.debug.js", function() {

                window.CoreJsApiPresent = true;
                window.ExecuteOrDelayUntilScriptLoaded && ExecuteOrDelayUntilScriptLoaded(function() {
                        var fnReg = JsApi.ExtensibilityManager._RegisterFilesForNamespace;
                        var ns = 'SP.SPGantt.InstrumentedApi';
                        var api = 'GanttSharedApi.generated.js';
                        var shim = 'GanttApiShim.generated.js';
                        RegisterSodDep(shim, api);

                        fnReg(ns, api, ns + '.ClientApi', 1);
                        fnReg(ns, shim, ns + '.ShimPlaceholder', 2);
                    },
                    'JsApiExtensibilityManager.js');
                Type.registerNamespace('SP.SPGantt.InstrumentedApi');
                SP.SPGantt.InstrumentedApi.ExecuteWithJsApiLoaded = function(fn) {
                    var fnEx = window.ExecuteOrDelayUntilScriptLoaded && ExecuteOrDelayUntilScriptLoaded;
                    fnEx && fnEx(function() { JsApi.ExtensibilityManager.ExecuteWithJsApisInNamespaceLoaded('SP.SPGantt.InstrumentedApi', fn); }, 'JsApiExtensibilityManager.js');
                };
                g_spPreFetchKeys.push('sharing.js');
                g_spPreFetchKeys.push('callout.js');
                window.CoreJsApiPresent = true;
                window.ExecuteOrDelayUntilScriptLoaded && ExecuteOrDelayUntilScriptLoaded(function() {
                        var fnReg = JsApi.ExtensibilityManager._RegisterFilesForNamespace;
                        var ns = 'SP.Timeline.InstrumentedApi';
                        var api = 'TimelineSharedApi.generated.js';
                        var shim = 'TimelineApiShim.generated.js';
                        RegisterSodDep(shim, api);

                        fnReg(ns, api, ns + '.ClientApi', 1);
                        fnReg(ns, shim, ns + '.ShimPlaceholder', 2);
                    },
                    'JsApiExtensibilityManager.js');
                Type.registerNamespace('SP.Timeline.InstrumentedApi');
                SP.Timeline.InstrumentedApi.ExecuteWithJsApiLoaded = function(fn) {
                    var fnEx = window.ExecuteOrDelayUntilScriptLoaded && ExecuteOrDelayUntilScriptLoaded;
                    fnEx && fnEx(function() { JsApi.ExtensibilityManager.ExecuteWithJsApisInNamespaceLoaded('SP.Timeline.InstrumentedApi', fn); }, 'JsApiExtensibilityManager.js');
                };
                ExecuteOrDelayUntilScriptLoaded(function() {
                        JsApi.ExtensibilityManager._RegisterExpectedApi('SP.Timeline.InstrumentedApi', 1);
                    },
                    'JsApiExtensibilityManager.js');

                var TasksWebPartID = $("#WebPartWPQ3 span").first().attr("ID");
                var tlds_TasksWebPartID = new SP.UI.Timeline.ListTimelineDatasource();
                tlds_TasksWebPartID.Init("dd543ea3-cdff-4af6-846f-1d4e5382df14", [{ "ListRO": "0", "ItemsRO": "0" }], null, "Timeline");
                var tl_TasksWebPartID = new SP.UI.Timeline.TimelineControl();
                tl_TasksWebPartID.SetMinHeight(110);
                tl_TasksWebPartID.Init(TasksWebPartID, tlds_TasksWebPartID);

                tl_TasksWebPartID.Render();
                var ctxRibbon = SP.UI.Timeline.TimelinePageComponent.initialize(tl_TasksWebPartID, TasksWebPartID);

            });
        });
    });
}

Explanation: If the istimelineparent is not present, then we are invoking the timeline above the tasks webpart. NOTE: The webpart id is hardcoded

$("#WebPartWPQ3 span").first().attr("ID");