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?
Awesome !
excellent.loving JavaScript more everyday.
I could not get it to work. Changed the script with the part /PWA/ to /PWA_Erik/ (because that’s the name for my instance).
But I get an error:
Cannot retrieve the URL specified in the Content Link property. For more assistance, contact your site administrator.
When manually entering the projectsite and adding /Lists/Risks/AllItems.aspx?isdlg=1 all looks fine, what am I doing wrong?
I’m on Project Online, and I have all the rights.
Thanks for any reply,
Erik
Hi Erik,
I think that error is due to using a full URL, so https://blah/PWA rather than just /PWA, this is due to the cross site scripting protection in most browsers. Change the URL to be relative to the site (/pwa_erik/… in your case?) and that should fix it.
Otherwise / also try another browser to confirm as I noticed myself that IE acts differently to Chrome in this configuration, but both worked with the relative url as they should.
HTH,
Martin
Hi Martin,
Thanks for the reply.
I got it working by
1: Changing the script to use the full URL
2: switch the content editor to relative link like you said
3: Provide the JQuery file in my own siteassets lib.
Great solution! Would be awesome to get it working with spaces in Project Names (happens alot in my environment).
Erik
Hi Erik,
Glad to hear you got it working!
Also with the spaces it should work actually, you can see in my screenshot the project name there has many spaces. What is not supported is “renamed” projects as the project name and the site URL do not match.
Regards,
Hi,
I try to do this when am creating the PDP its showing i added this PDP to our workflow stage but its showing ‘The webpage cannot be found’ in each projects.
Hi Iqbal,
You need to check the URL in the script, on line 11 you can see part of the address ‘/PWA’ and ‘/Lists/Risks/AllItems.aspx?isdlg=1’ is hard coded, so if your site uses a different path (or the risks list has a different name?) then it will not work.
Hi,
Now its working fine. I added the script again .
Thank you ..
Excellent …
Hi Martin,
I tried to show custom list on PDP but it is not showing.
Hi Martin, Nice post…
My PWA site is on Port 81, and the script isnt working !!
Does your script work even when the server is not connected to the internet?
If No, can you suggest any work around !!
Thanks in advance
Hi,
Please check the first line of the script, it references an online copy of jQuery, so you could modify that and point it to a copy uploaded on your site collection. Though this is not likely to be the cause as it is in the end user browser where the script is run from.
I’d suggest reviewing the previous comments as I have also found that the URL is important, specifically the URL used in the web part and also the URL used in line 11 of the script.
HTH,
Hi martin ,
I just wanted to know can the logic be used on a custom List on a Project Site which filers the item based on Project UID , I am not using a default Risks List as shown in your Example rather i am using a All Issues List which on the PWA site, i tried but i am a error when used the code in project Site and changed the name of default Risks List with Custom list but i got a error saying this list is not found, could please if we can do that and can you please help with this, i am new in Sharepoint
Hi Martin,
Thank you for sharing your script! Do you also have a solution for the issue that the “Share” dialog in the item context is not showing the whole form. As Long as you load the list in an iFrame. So if you click on share on a document you can’t see the People Picker and add People.
Regards Gerd
I had some issues with this because my Test-project name started with an underscore [_] and this is not included in the URL.
Other than that it seems to work flawlessly so far.
Thanks for the great tute and script Mark. I got it to work fine, but I am wondering if it is possible to show only the list web part rather than the whole page?
We have some images embedded on the risk and issue pages that are unsuitable for the PDP page.
Hi Michael,
Yes it actually should already just show the list and not the rest of the page content, this is done via the following part of the URL used;
?isdlg=1
When that is appended to the string the dialog view of the list is shown, ie just the list! Check your script it should be at the end of line 11.
Martin