by Martin Laukkanen | Jan 18, 2017 | SharePoint
One of those small annoyances that I find myself always fixing (or being asked to fix) is the default page layout of a Project Detail Page in PWA, for example:
Specifically around and between each web part on the page there is a large margin that even (partially) exists when you insert hidden webparts. Additionally the content alignment is out compared to other pages; ie the page title “Kosten” in this case is not left aligned with the page content and sub headings.
Easily fixed with a little CSS
This can be easily fixed with (you guessed) a content editor webpart and the following html style sheet:
<style type="text/css">
.ms-webpartPage-root {
border-spacing: 0px;
}
</style>
The value was previously “20px”, so if 0px padding is too little then you can try a different value. Additionally there are lots of other styles that you might like to play with, for example: “.ms-PartSpacingVertical” is by default empty but is useful if you need a very specific gap between web parts.
When inserted in a hidden content editor web part anywhere in the page results in:
Now that page title is a little too close, but now that can be easily edited as needed.
Futhermore, while I’ve not included it in this example, if you want to remove absolutely all spacing then add the following CSS:
.ms-webpartzone-cell {
margin: auto auto 0px;
}
That 0px value changed from the default of 20px removes all spacing including the margin that hidden web parts have so if like me you find yourself with lots of hidden content editor webparts with scripts and such, then this can be useful.
Hope someone else finds that useful.
by Martin Laukkanen | Mar 4, 2015 | How to, Project 2013, Project Online
Back in the days of 2010 there was a Project Site List Viewer WebPart that gave you the ability to show specific lists (Risks, Issues or anything) from a given project’s site in a PDP. While in 2013 on-prem you can still install that solution starter from Fluent-Pro (here), that doesn’t help you with Project Online and not to mention with the dozens of on-prem scenarios where the solution doesn’t work without code modifications. So recently I was asked to solve this problem again and I thought that I’d try to find another way.
Another (simpler) way
Let’s start with a screenshot of the end result:
Perfect it looks exactly like a typical SharePoint list only in the Project Detail Page for our project – and of course importantly it shows the Risk list from the currently open project.
Reason 9,999 why I love JavaScript
Basically using a small script we can show the actual SharePoint page for the risk list e.g. “/PWA/Project Name/Lists/Risks/AllItems.aspx?isdlg=1” in an iFrame on our PDP. To do that firstly you can see that I’ve added “&isdlg=1” to the URL which tells SharePoint to show the page without the rest of the SharePoint master page and quick launch menu in the frame (which just looks weird), then we need to update the address with the actual project’s name and finally by default the ribbon menu would be shown again in our frame so we need to hide that.
JQuery script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function RenderiFrame (c) {
document.write('<iframe id="nbDataGridFrame" src="' + c + '" width="100%" height="1400" onload="hideRibbonMnu();">');
document.write('<p>Your browser does not support iframes.</p>');
document.write('</iframe>');
}
function runSummaryReport() {
var projectName = $("[id$=RootAspMenu]").find("[href*=projuid]").first().find(".menu-item-text").text();
var URLString = '/PWA/' + encodeURIComponent(projectName) + '/Lists/Risks/AllItems.aspx?isdlg=1';
RenderiFrame(URLString);
}
function hideRibbonMnu() {
var $isFound = $("#nbDataGridFrame").contents().find("#s4-ribbonrow");
if ($isFound.length > 0 && $isFound.is(":visible")) {
$isFound.hide();
}
else {
setTimeout(hideRibbonMnu, 100);
}
}
runSummaryReport();
</script>
Okay so I won’t go through it line by line, but in summary what the script needs to do is the following:
- Construct the correct URL to the list (Risks in this case) by obtaining the Project Name from the quick launch menu of the current page- Yes I’m assuming the default site naming based on project name!
- Passes the encoded URL into a function which renders an iFrame of the specified size.
- Finally as a part of the iFrame itself there is an ‘onload’ parameter which calls a function to hide the ribbon menu once the frame is loaded.
Installing the script
If you’ve not used the CEWP much before here are a few reminders on how to create a PDP with this kind of script:
Firstly save the script above to a file named “showListonPDP.html” (note it is .html not .js), then upload that to your PWA site contents where everyone can access it /PWA/SiteAssets/ or /PWA/Site Collection Documents/ etc.
Then create a new PDP as normal and add the Media and Content -> Content Editor web part:
Now edit the web part properties and paste in the URL of the script:
Note that the URL must be just the file name, not the full URL, e.g.: “/PWA/SiteAssets/showListonPDP.html”
Now add the PDP to your EPT and go ahead and open a project.
Just one more little thing
Now if you click the new or edit item menus it opens the form in the frame which could be better, fortunately SharePoint lists can be configured to open forms in a dialog, the option can be found from the list settings on the project site itself (obviously you want to do this on your project site template as well), so open your site project, go to the Risks list, and select site settings -> Advanced settings, at the bottom you will find:
Select yes and Ok, now when you go back to the PDP and click New Item this is what you should see:
Neat huh?
