With the Modern Pages, majority of the screen's viewport is occupied by the Suite Bar and Header, which doesnt show the actual content of any intranet site.
This application customizer adds a toggle button on all the Modern Pages which will toggle (show/hide) the Site Header, pulling the content to the top and giving more reading space for the users.
| Solution | Author(s) |
|---|---|
| js-application-header-toggler | Ram Prasad Meenavalli |
| Version | Date | Comments |
|---|---|---|
| 1.0 | Sep 19, 2019 | Initial release |
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
- Clone this repository
- in the command line run:
npm install- update serve.json pointing to your site collection home page
gulp serve
This sample illustrates the following concepts on top of the SharePoint Framework:
- Adding clickable elements in the application customizer placeholders
- Using the data attributes to hide certain elements on the modern page using CSS
Here's a debug URL for testing around this sample. Updated based on your manifest id for easy testing of the sample.
?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&customActions={"44d11daa-2628-4618-8f0b-0a6cdb71b040":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Test message"}}}