Hide PWA web components except Ribbon & Schedule Webpart

Hi Readers !

Thanks for reading this blog, here I’m going to discuss about how to hide PWA web components without using SP designer.

Recently have integrated Project Online with an internal project management web application, so as part of this, customer wanted to engage project online specifically  for the schedule management (Rest all they are managing within their  internal web app).

The requirement here is, they wanted to have a seamless experience with internal web application and they don’t want to specifically login to PWA for the schedule management. So what I have done was have integrated PWA with their web app.  Here I would require to hide all the components of the PWA except Ribbon and Schedule web part so that end user can utilize all the PWA ribbon option and can wok with schedule in a focus mode. Project Online doesn’t allow developers to make master pages customization using share point designer, hence have used CSS to hide the components. Below is the piece of code which does the job. Add the below code in .js file and upload it to the PWA site then link the URL to a web part of the Project center and schedule page etc,, wherever you required.

<div>
<div><script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script></div>
<div><style></div>
<div>#RibbonContainer-TabRowRight,#sideNavBox, #DeltaTopNavigation,#s4-titlerow,#DeltaSiteLogo {</div>
<div>display:none !important ;</div>
<div>}</div>
<div>#contentBox {</div>
<div>margin-left:20px;</div>
<div>}</div>
<div>//#Ribbon\.WebPartPage\.Edit\.Edit-Large</div>
<div></style></div>
<div>