Updates for RC0 and tenant-scoped deployment.

config/config.json

@@ -1,13 +1,18 @@
 {
-  "entries": [
-    {
-      "entry": "./lib/extensions/headerFooter/HeaderFooterApplicationCustomizer.js",
-      "manifest": "./src/extensions/headerFooter/HeaderFooterApplicationCustomizer.manifest.json",
-      "outputPath": "./dist/header-footer.bundle.js"
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "header-footer-bundle": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/headerFooter/HeaderFooterApplicationCustomizer.js",
+          "manifest": "./src/extensions/headerFooter/HeaderFooterApplicationCustomizer.manifest.json"
+        }
+      ]
     }
-  ],
-  "externals": {},
+  },
   "localizedResources": {
-    "headerFooterStrings": "extensions/headerFooter/loc/{locale}.js"
-  }
-}
+    "headerFooterStrings": "lib/extensions/headerFooter/loc/{locale}.js"
+  },
+  "externals": {}
+}

config/package-solution.json

@@ -2,18 +2,8 @@
   "solution": {
     "name": "sp-fx-header-footer-client-side-solution",
     "id": "7ce85f8b-5996-4138-8b54-89f4d7ad2f14",
-    "version": "1.0.0.0",
-    "features": [{
-      "title": "SPFx HeaderFooter Application Extension - Deployment of custom action",
-      "description": "Deploys a custom action with ClientSideComponentId association",
-      "id": "bee23cf7-87d7-4bc6-8c83-81c5fd72e484",
-      "version": "1.0.0.0",
-      "assets": {        
-        "elementManifests": [
-          "elements.xml"
-        ]
-      }
-    }]
+    "version": "1.1.0.0",
+    "skipFeatureDeployment": true
   },
   "paths": {
     "zippedPackage": "solution/sp-fx-header-footer.sppkg"

package.json

@@ -7,17 +7,17 @@
   },
   "dependencies": {
     "@microsoft/sp-application-base": "1.1.1",
-    "@microsoft/sp-core-library": "~1.1.0",
+    "@microsoft/sp-core-library": "~1.2.0",
     "@microsoft/sp-listview-extensibility": "0.1.1",
-    "@microsoft/sp-webpart-base": "~1.1.1",
+    "@microsoft/sp-webpart-base": "~1.2.0",
     "@types/webpack-env": ">=1.12.1 <1.14.0",
     "jquery": "^3.2.1",
     "sp-pnp-js": "^2.0.6"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.1.0",
-    "@microsoft/sp-module-interfaces": "~1.1.0",
-    "@microsoft/sp-webpart-workbench": "~1.1.0",
+    "@microsoft/sp-build-web": "~1.2.0",
+    "@microsoft/sp-module-interfaces": "~1.2.0",
+    "@microsoft/sp-webpart-workbench": "~1.2.0",
     "gulp": "~3.9.1",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/mocha": ">=2.2.33 <2.6.0"

src/extensions/headerFooter/HeaderFooterApplicationCustomizer.ts

@@ -2,7 +2,8 @@ import { override } from '@microsoft/decorators';
 import { Log } from '@microsoft/sp-core-library';
 import {
   BaseApplicationCustomizer,
-  Placeholder
+  PlaceholderContent,
+  PlaceholderName
 } from '@microsoft/sp-application-base';
 
 import * as strings from 'headerFooterStrings';
@@ -27,8 +28,8 @@ export interface IHeaderFooterApplicationCustomizerProperties {
 export default class HeaderFooterApplicationCustomizer
   extends BaseApplicationCustomizer<IHeaderFooterApplicationCustomizerProperties> {
 
-  private _headerPlaceholder: Placeholder;
-  private _footerPlaceholder: Placeholder;
+  private _headerPlaceholder: PlaceholderContent | undefined;
+  private _footerPlaceholder: PlaceholderContent | undefined;
 
   @override
   public onInit(): Promise<void> {
@@ -54,6 +55,11 @@ export default class HeaderFooterApplicationCustomizer
           this.properties.Footer = "<div id='customFooter' class='ms-dialogHidden' style='background-color:" + r.AllProperties.CustomSiteFooterBgColor + ";color:" + r.AllProperties.CustomSiteFooterColor + ";padding:3px;text-align:center;font-family:Segoe UI'><b>" + r.AllProperties.CustomSiteFooterText + "</b></div>";
         }
 
+        // Added to handle possible changes on the existence of placeholders
+        this.context.placeholderProvider.changedEvent.add(this, this.onRender);
+        // Call render method for generating the needed HTML elements
+        this.onRender();
+
         resolve();
       });
     });
@@ -63,19 +69,19 @@ export default class HeaderFooterApplicationCustomizer
   public onRender(): void {
     console.log('CustomHeader.onRender()');
     console.log('Available placeholders: ',
-      this.context.placeholders.placeholderNames.join(', '));
+      this.context.placeholderProvider.placeholderNames.map(name => PlaceholderName[name]).join(', '));
 
     // Handling the header placeholder
     if (!this._headerPlaceholder) {
-      this._headerPlaceholder = this.context.placeholders.tryAttach(
-        'PageHeader',
+      this._headerPlaceholder = this.context.placeholderProvider.tryCreateContent(
+        PlaceholderName.Top,
         {
           onDispose: this._onDispose
         });
 
       // The extension should not assume that the expected placeholder is available.
       if (!this._headerPlaceholder) {
-        console.error('The expected placeholder (PageHeader) was not found.');
+        console.error('The expected placeholder (Top) was not found.');
         return;
       }
 
@@ -86,15 +92,15 @@ export default class HeaderFooterApplicationCustomizer
 
     // Handling the footer placeholder
     if (!this._footerPlaceholder) {
-      this._footerPlaceholder = this.context.placeholders.tryAttach(
-        'PageFooter',
+      this._footerPlaceholder = this.context.placeholderProvider.tryCreateContent(
+        PlaceholderName.Bottom,
         {
           onDispose: this._onDispose
         });
 
       // The extension should not assume that the expected placeholder is available.
       if (!this._footerPlaceholder) {
-        console.error('The expected placeholder (PageFooter) was not found.');
+        console.error('The expected placeholder (Bottom) was not found.');
         return;
       }