blog.atwork.at

news and know-how about microsoft, technology, cloud and more.

Project Online / Project Server: Project Detail Pages - Enhancements (Part 9)- Show WebParts in Tabs on Project Detail Page

This is the ninth part of articles discussing Project Detail Page enhancements:

  1. Show/hide a field depending on the value of an internal field on the same page
  2. Show/hide a field depending on the value of an Enterprise Custom field on the same page
  3. Show/Hide a field based on the value of an internal field using REST
  4. Show/Hide a field based on the value of an Enterprise Custom Field without Lookup Table using REST
  5. Remove Time from Enterprise Custom Fields on Project Detail Pages
  6. Remove Prefix from Enterprise Custom Fields on Project Detail Pages
  7. Hide Impact Ratings on Project Detail Page "Strategic Impact"
  8. Disable "Project Owner" Button on Project Detail Page
  9. Show WebParts in Tabs on Project Detail Page

For a description for preparation of a Project Detail Page for JavaScript, see General Preparation.

This time, we will look into an option to display all non-hidden webparts on a Project Detail Page in tabs. Using webpart Basic Info several times to get a sort of grouping can result in a very long page. I just wanted to have these webparts in tabs, no matter how many of them are on the page. There are a lot of great samples available for this requirement. But I needed a solution without any additional configuration - simply use it on any page.

Here is a sample with 5 webparts on a Project Detail Page. To see information at the end you need to scroll down.

image

Add a Content Editor webpart with a link to the script provided below and set it as Hidden in Layout.

image

After click on Apply, it will show all webparts in tabs. The names will be set as defined in Title for each webpart. You can still edit all webparts by clicking on tab and use Edit Web Part as before.

image

After editing the page, you will see webparts in tabs.

image

Use this code to implement the solution:

<html>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />

<head>
    <title></title><
    <script type="text/javascript"></script>

    <!-- Load following three files into your script library or leave reference to source -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- <link rel="stylesheet" href="/sites/PWA/Scripts/jquery-ui.css"> -->

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <!-- <script src="/sites/PWA/Scripts/jquery-1.12.4.js"></script> -->

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <!-- <script src="/sites/PWA/Scripts/jquery-ui.js"></script> -->


    <script type="text/javascript">
        $(document).ready(function () {
            ExecuteOrDelayUntilScriptLoaded(InitPdpTabs, "sp.js");
        });
                function InitPdpTabs() {
            if ($("#tabs").length > 0) return;
            console.log("PDP Tabs 1.0.0.0");

            var parentDiv = $(".ms-webpart-zone:eq(1)");
            $(parentDiv).prepend('<div id="tabs"></div>');
            var tabsDiv = $("#tabs");

            var linkList = "<ul>";
            $(".s4-wpcell").each(function (index) {
                var id = $(this).attr("id");
                var titleCell = $(this).find(".js-webpart-titleCell");
                var title = titleCell.text();

                var link = "#" + id;
                linkList = linkList + '<li><a href="' + link + '">' + title + '</a></li>';

                var movedDiv = $(this).detach();
                $(tabsDiv).append(movedDiv);
            });
            linkList = linkList + "</ul>";
            $(tabsDiv).prepend($(linkList));
            $(tabsDiv).tabs();
}
    </script>
<body>
</body>
</html>


Copy above code into a text editor, modify at least the marked sections, save with file extension "js" or "html", and upload to your script library.

Comments (1) -

  • PickupChips

    3/15/2021 1:24:44 PM |

    Brilliant, thanks!

    Can you give me \details on how I'd go about adjusting the colour of the highlighted tab - Would be good to be able to customise colours for my organisation.

    Thanks


    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active,
    a.ui-button:active,
    .ui-button:active,
    .ui-button.ui-state-active:hover {
      border: 1px solid #5fba4c;
      background: #5fba4c;
      font-weight: normal;
      color: #ffffff;
    }

Pingbacks and trackbacks (1)+

Loading