Possible to create site collection disclaimer pop-up with SPFx?

[Deleted]

Hi,

I'm just getting started with SPFx and development and was wondering if you had any pointers for me regarding the following:

In SPO, we require some sort of disclaimer pop-up overlay (not simple js alert) that appears as soon as a user visits a certain site collection.

Can something like this be achieved with SPFx? On https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/overview-extensions there's a note stating that there is a known bug with list and library extension support in the classic experiences.

Thanks for your help getting me started.

[#2 · Accepted solution]

It is possible - I've done something similar (a cookie consent popup) within our organisation which requires us to display a popup overlay in the middle of the screen, notifying our users about our End User Policy, there's a link within the popup as well which takes them to that policy page.

In the Classic site days, we had the code embedded within the Master Page, sadly that's not really an option with Modern Team Sites, so I refactored the code into an SPFx Web Part instead and what I did was to deploy it to all team sites via the App Catalog and the "skipFeatureDeployment" switch in the package file, which then made it easier for me to deploy it via PnP framework.

There are two dependencies in the cookieconsent JS and CSS files that need to be included (happy to send these to you) and I've included a chunk of the TS code as well.

I've not tested it, but you could set the cookieconsent part to 0 days (from the cookieconsent JS file) to ensure the popup comes up all the time I think. It might not be the best way to achieve your objective, but hopefully it's enough to get you started.

  public render(): void {
      require('./cookieconsent.min.js');
      require('./cookieconsent-min.css');

    this.domElement.innerHTML = `
      <div class="${ styles.enduserPolicy }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">End User Policy</span>
              <p class="${ styles.subTitle }">REQUIRED - PLEASE DO NOT REMOVE</p>
            </div>
          </div>      
        </div> 
      </div>`;

      window.addEventListener("load", function(){
        window["cookieconsent"].initialise({
          "palette": {
            "popup": {
              "background": "#00728f",
              "text": "#ffffff"
            },
            "button": {
              "background": "transparent",
              "text": "#ffffff",
              "border": "#ffffff"
            }
          },
          "position": "bottom-left",
          "content": {
            "message": "Here's some text about policy stuff.",
            "dismiss": "Understood!",
            "link": "End User Policy",
            "href": "link here"
          }
        })})
  }

[#3]

@Steve Johnson  that sounds really interesting! I need a pop-up on an entry-site ("I declare I don't do this and that..."). Can you send me (or post) the files you mentioned as well?