1

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. enter image description here 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

Improve this question
5
  • Unfortunately I think css is your only option here
    – Rune Sperre
    Commented Apr 28, 2020 at 20:44
  • 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
    Commented Apr 29, 2020 at 5: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
    Commented Apr 29, 2020 at 6:29
  • You can look into single app part pages. A couple of other similar questions like here, here and here.
    – Naveen
    Commented Apr 29, 2020 at 16:56
  • Does this answer your question? Minimal Page - remove navigation list and the headers
    – Naveen
    Commented Apr 29, 2020 at 16:57

1 Answer 1

Reset to default
0

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:

enter image description here

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>
Improve this answer
1
  • Thanks @Rune Sperre for sharing this workaround, will keep this option in mind.
    – CloudEngineer
    Commented May 5, 2020 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.