Remove components from SharePoint page in SPFX

Question

I want to build a single page application in SharePoint online using SPFX. Is there any way to remove the left navigation, header component from the page. Please see the image for the highlighted components that i want to remove. I know we can use custom css to remove those components but is there any way in SPFX to override / remove it instead of using css ?

This is kind of urgent so quick reply will be highly appreciated.

Regards, Tayyab

Thank you for your response @Rune Sperre. I have also looked for other options but did not find any so far. The only drawback i see in CSS approach is in case MS roll out an updates and change the css, the hidden components will appear again on the page. — CloudEngineer, Apr 29 '20 at 05:40
Yes, that is a good thing to keep in mind. I found a quite alternative solution now - I will post it as an answer. — Rune Sperre, Apr 29 '20 at 06:29
You can look into single app part pages. A couple of other similar questions like here, here and here. — Naveen, Apr 29 '20 at 16:56
Does this answer your question? Minimal Page - remove navigation list and the headers — Naveen, Apr 29 '20 at 16:57

score 0 · Answer 1 · answered Apr 29 '20 at 07:00

This is a workaround at best.

This solution feels quite dirty and just wrong, but I am posting it in case it can lead to even more interesting approaches.

When displaying a modern page in an iframe, the navigation and header is hidden for us.

Create a classic page (you might have to enable the publishing features to do this), and add a script web part with an iframe that points to your application page.

Sprinkle on some jQuery and css (on classic pages, these classes won't change - so it should be safer to play with that), and now you can access this page by adding ?IsDlg=1 in the URL.

Result:

The code I used for the script web part:

<iframe id="embedframe" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%" frameborder="0" src="https://contoso.sharepoint.com/sites/Playground/SitePages/Embed-this.aspx"></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("reallyhide");

function reallyhide(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") > 0){
   $("#s4-ribbonrow").hide();
   $("#embedframe").css({"position":"absolute","top":"0","left":"0"});
 }
}
</script>
<style>
#s4-bodyContainer {height:2000px;}
</style>

Thanks @Rune Sperre for sharing this workaround, will keep this option in mind. — CloudEngineer, May 05 '20 at 11:52

Remove components from SharePoint page in SPFX

1 Answers1