0

enter image description here

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

0

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");
  • I am having a similar issue and trying to use your solution to rectify it. What is LoadCSS and LoadScript? I don't recognize those functions. Are you loading them from a library? Thanks – MonkeyWrench Jun 14 '18 at 19:17

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.