added some webparts and extensions

config/config.json

@@ -9,10 +9,46 @@
           "manifest": "./src/webparts/helloWorld/HelloWorldWebPart.manifest.json"
         }
       ]
+    },
+    "hello-world-2-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/helloWorld2/HelloWorld2WebPart.js",
+          "manifest": "./src/webparts/helloWorld2/HelloWorld2WebPart.manifest.json"
+        }
+      ]
+    },
+    "hello-world-extension-application-customizer": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/helloWorldExtension/HelloWorldExtensionApplicationCustomizer.js",
+          "manifest": "./src/extensions/helloWorldExtension/HelloWorldExtensionApplicationCustomizer.manifest.json"
+        }
+      ]
+    },
+    "hello-world-3-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/helloWorld3/HelloWorld3WebPart.js",
+          "manifest": "./src/webparts/helloWorld3/HelloWorld3WebPart.manifest.json"
+        }
+      ]
+    },
+    "hello-world-2-extension-application-customizer": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/helloWorld2Extension/HelloWorld2ExtensionApplicationCustomizer.js",
+          "manifest": "./src/extensions/helloWorld2Extension/HelloWorld2ExtensionApplicationCustomizer.manifest.json"
+        }
+      ]
     }
   },
   "externals": {},
   "localizedResources": {
-    "HelloWorldWebPartStrings": "lib/webparts/helloWorld/loc/{locale}.js"
+    "HelloWorldWebPartStrings": "lib/webparts/helloWorld/loc/{locale}.js",
+    "HelloWorld2WebPartStrings": "lib/webparts/helloWorld2/loc/{locale}.js",
+    "HelloWorldExtensionApplicationCustomizerStrings": "lib/extensions/helloWorldExtension/loc/{locale}.js",
+    "HelloWorld3WebPartStrings": "lib/webparts/helloWorld3/loc/{locale}.js",
+    "HelloWorld2ExtensionApplicationCustomizerStrings": "lib/extensions/helloWorld2Extension/loc/{locale}.js"
   }
 }

config/package-solution.json

@@ -4,7 +4,20 @@
     "name": "spfx-gulpfile-hack-client-side-solution",
     "id": "980666fc-c172-4b17-b1d0-2137bac62b97",
     "version": "1.0.0.0",
-    "includeClientSideAssets": true
+    "includeClientSideAssets": true,
+    "features": [
+      {
+        "title": "Application Extension - Deployment of custom action.",
+        "description": "Deploys a custom action with ClientSideComponentId association",
+        "id": "f190f1dc-a251-4ad7-b763-20a9e9c3c183",
+        "version": "1.0.0.0",
+        "assets": {
+          "elementManifests": [
+            "elements.xml"
+          ]
+        }
+      }
+    ]
   },
   "paths": {
     "zippedPackage": "solution/spfx-gulpfile-hack.sppkg"

config/serve.json

@@ -6,5 +6,40 @@
   "api": {
     "port": 5432,
     "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
+  },
+  "serveConfigurations": {
+    "default": {
+      "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
+      "customActions": {
+        "59ecf2f4-974d-4974-a341-d83c27f0fd62": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {
+            "testMessage": "Test message"
+          }
+        }
+      }
+    },
+    "helloWorldExtension": {
+      "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
+      "customActions": {
+        "59ecf2f4-974d-4974-a341-d83c27f0fd62": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {
+            "testMessage": "Test message"
+          }
+        }
+      }
+    },
+    "helloWorld2Extension": {
+      "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
+      "customActions": {
+        "512b1a0a-1300-421d-b99c-c5ceffb7e921": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {
+            "testMessage": "Test message"
+          }
+        }
+      }
+    }
   }
 }

package.json

@@ -19,7 +19,10 @@
     "@microsoft/sp-webpart-base": "~1.4.0",
     "@microsoft/sp-lodash-subset": "~1.4.0",
     "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
-    "@types/webpack-env": ">=1.12.1 <1.14.0"
+    "@types/webpack-env": ">=1.12.1 <1.14.0",
+    "@microsoft/decorators": "~1.4.0",
+    "@microsoft/sp-dialog": "~1.4.0",
+    "@microsoft/sp-application-base": "~1.4.0"
   },
   "devDependencies": {
     "@microsoft/sp-build-web": "~1.4.0",

sharepoint/assets/elements.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
+    <CustomAction
+        Title="HelloWorldExtension"
+        Location="ClientSideExtension.ApplicationCustomizer"
+        ClientSideComponentId="59ecf2f4-974d-4974-a341-d83c27f0fd62"
+        ClientSideComponentProperties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
+    </CustomAction>
+</Elements>

src/extensions/helloWorld2Extension/HelloWorld2ExtensionApplicationCustomizer.manifest.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-extension-manifest.schema.json",
+
+  "id": "512b1a0a-1300-421d-b99c-c5ceffb7e921",
+  "alias": "HelloWorld2ExtensionApplicationCustomize",
+  "componentType": "Extension",
+  "extensionType": "ApplicationCustomizer",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false
+}

src/extensions/helloWorld2Extension/HelloWorld2ExtensionApplicationCustomizer.ts

@@ -0,0 +1,39 @@
+import { override } from '@microsoft/decorators';
+import { Log } from '@microsoft/sp-core-library';
+import {
+  BaseApplicationCustomizer
+} from '@microsoft/sp-application-base';
+import { Dialog } from '@microsoft/sp-dialog';
+
+import * as strings from 'HelloWorld2ExtensionApplicationCustomizerStrings';
+
+const LOG_SOURCE: string = 'HelloWorld2ExtensionApplicationCustomizer';
+
+/**
+ * If your command set uses the ClientSideComponentProperties JSON input,
+ * it will be deserialized into the BaseExtension.properties object.
+ * You can define an interface to describe it.
+ */
+export interface IHelloWorld2ExtensionApplicationCustomizerProperties {
+  // This is an example; replace with your own property
+  testMessage: string;
+}
+
+/** A Custom Action which can be run during execution of a Client Side Application */
+export default class HelloWorld2ExtensionApplicationCustomizer
+  extends BaseApplicationCustomizer<IHelloWorld2ExtensionApplicationCustomizerProperties> {
+
+  @override
+  public onInit(): Promise<void> {
+    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
+
+    let message: string = this.properties.testMessage;
+    if (!message) {
+      message = '(No properties were provided.)';
+    }
+
+    Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`);
+
+    return Promise.resolve();
+  }
+}

src/extensions/helloWorld2Extension/loc/en-us.js

@@ -0,0 +1,5 @@
+define([], function() {
+  return {
+    "Title": "HelloWorld2ExtensionApplicationCustomizer"
+  }
+});

src/extensions/helloWorld2Extension/loc/myStrings.d.ts

@@ -0,0 +1,8 @@
+declare interface IHelloWorld2ExtensionApplicationCustomizerStrings {
+  Title: string;
+}
+
+declare module 'HelloWorld2ExtensionApplicationCustomizerStrings' {
+  const strings: IHelloWorld2ExtensionApplicationCustomizerStrings;
+  export = strings;
+}

src/extensions/helloWorldExtension/HelloWorldExtensionApplicationCustomizer.manifest.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-extension-manifest.schema.json",
+
+  "id": "59ecf2f4-974d-4974-a341-d83c27f0fd62",
+  "alias": "HelloWorldExtensionApplicationCustomizer",
+  "componentType": "Extension",
+  "extensionType": "ApplicationCustomizer",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false
+}

src/extensions/helloWorldExtension/HelloWorldExtensionApplicationCustomizer.ts

@@ -0,0 +1,39 @@
+import { override } from '@microsoft/decorators';
+import { Log } from '@microsoft/sp-core-library';
+import {
+  BaseApplicationCustomizer
+} from '@microsoft/sp-application-base';
+import { Dialog } from '@microsoft/sp-dialog';
+
+import * as strings from 'HelloWorldExtensionApplicationCustomizerStrings';
+
+const LOG_SOURCE: string = 'HelloWorldExtensionApplicationCustomizer';
+
+/**
+ * If your command set uses the ClientSideComponentProperties JSON input,
+ * it will be deserialized into the BaseExtension.properties object.
+ * You can define an interface to describe it.
+ */
+export interface IHelloWorldExtensionApplicationCustomizerProperties {
+  // This is an example; replace with your own property
+  testMessage: string;
+}
+
+/** A Custom Action which can be run during execution of a Client Side Application */
+export default class HelloWorldExtensionApplicationCustomizer
+  extends BaseApplicationCustomizer<IHelloWorldExtensionApplicationCustomizerProperties> {
+
+  @override
+  public onInit(): Promise<void> {
+    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
+
+    let message: string = this.properties.testMessage;
+    if (!message) {
+      message = '(No properties were provided.)';
+    }
+
+    Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`);
+
+    return Promise.resolve();
+  }
+}

src/extensions/helloWorldExtension/loc/en-us.js

@@ -0,0 +1,5 @@
+define([], function() {
+  return {
+    "Title": "HelloWorldExtensionApplicationCustomizer"
+  }
+});

src/extensions/helloWorldExtension/loc/myStrings.d.ts

@@ -0,0 +1,8 @@
+declare interface IHelloWorldExtensionApplicationCustomizerStrings {
+  Title: string;
+}
+
+declare module 'HelloWorldExtensionApplicationCustomizerStrings' {
+  const strings: IHelloWorldExtensionApplicationCustomizerStrings;
+  export = strings;
+}

src/webparts/helloWorld2/HelloWorld2WebPart.manifest.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "7ef3fa53-d0d6-4922-a090-d459fbe742b7",
+  "alias": "HelloWorld2WebPart",
+  "componentType": "WebPart",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "HelloWorld2" },
+    "description": { "default": "HelloWorld2 description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "description": "HelloWorld2"
+    }
+  }]
+}

src/webparts/helloWorld2/HelloWorld2WebPart.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { Version } from '@microsoft/sp-core-library';
+import {
+  BaseClientSideWebPart,
+  IPropertyPaneConfiguration,
+  PropertyPaneTextField
+} from '@microsoft/sp-webpart-base';
+
+import * as strings from 'HelloWorld2WebPartStrings';
+import HelloWorld2 from './components/HelloWorld2';
+import { IHelloWorld2Props } from './components/IHelloWorld2Props';
+
+export interface IHelloWorld2WebPartProps {
+  description: string;
+}
+
+export default class HelloWorld2WebPart extends BaseClientSideWebPart<IHelloWorld2WebPartProps> {
+
+  public render(): void {
+    const element: React.ReactElement<IHelloWorld2Props > = React.createElement(
+      HelloWorld2,
+      {
+        description: this.properties.description
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneTextField('description', {
+                  label: strings.DescriptionFieldLabel
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}