This is the ninth part of articles discussing Project Detail Page enhancements:
- Show/hide a field depending on the value of an internal field on the same page
- Show/hide a field depending on the value of an Enterprise Custom field on the same page
- Show/Hide a field based on the value of an internal field using REST
- Show/Hide a field based on the value of an Enterprise Custom Field without Lookup Table using REST
- Remove Time from Enterprise Custom Fields on Project Detail Pages
- Remove Prefix from Enterprise Custom Fields on Project Detail Pages
- Hide Impact Ratings on Project Detail Page “Strategic Impact”
- Disable "Project Owner" Button on Project Detail Page
- Show WebParts in Tabs on Project Detail Page
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.
Add a Content Editor webpart with a link to the script provided below and set it as Hidden in Layout.
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.
After editing the page, you will see webparts in tabs.
Use this code to implement the solution:
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.