Added sample for list-driven placeholders

samples/js-application-listdrivenplaceholders/.editorconfig

@@ -0,0 +1,25 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 2

samples/js-application-listdrivenplaceholders/.gitattributes

@@ -0,0 +1 @@
+* text=auto

samples/js-application-listdrivenplaceholders/.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+solution
+temp
+*.sppkg
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

samples/js-application-listdrivenplaceholders/.npmignore

@@ -0,0 +1,14 @@
+# Folders
+.vscode
+coverage
+node_modules
+sharepoint
+src
+temp
+
+# Files
+*.csproj
+.git*
+.yo-rc.json
+gulpfile.js
+tsconfig.json

samples/js-application-listdrivenplaceholders/.yo-rc.json

@@ -0,0 +1,8 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.1.1",
+    "libraryName": "placeholders-extension",
+    "libraryId": "db857a74-fbd9-4a0f-92a4-8a8ed24bc2e2",
+    "environment": "spo"
+  }
+}

samples/js-application-listdrivenplaceholders/README.md

@@ -0,0 +1,70 @@
+# List-Driven Placeholders
+
+## Summary
+This solution deploys a list that allows end users to manage content that will appear in placeholders, via a SharePoint Framework application customizer extension.
+
+<img src='./assets/placeholders.jpg' alt='Working Sample' />
+
+## Used SharePoint Framework Version 
+SPFx Extensions Dev Preview
+
+## Applies to
+
+* [SharePoint Framework](https://dev.office.com/sharepoint)
+* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
+* [PNP JS Core](https://github.com/SharePoint/PnP-JS-Core)
+
+## Prerequisites
+
+* Office 365 Developer tenant with a modern site collection
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+js-application-listdrivenplaceholders | [Matt Jimison](https://mattjimison.com/), [@mjimison](https://twitter.com/mjimison)
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0|July 22, 2017|Initial release
+
+## Disclaimer
+**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.**
+
+---
+
+## Minimal Path to Awesome
+
+- Clone this repository
+- In the command line, navigate to **samples/js-application-listdrivenplaceholders** and run:
+  - `npm install`
+  - Deploy the package to create the SharePoint list
+    - `gulp bundle`
+    - `gulp package-solution`
+    - Visit your developer tenant's app catalog, and upload the SPPKG package located in the sharepoint/solution folder into you "Apps for SharePoint" library
+    - When prompted if you trust the solution, click "Deploy"
+    - Create a new Modern Team Site by selecting the SharePoint app from the app launcher, and click ‘Create site’
+    - Navigate to your new site and select cog -> Add an App
+    - Click 'placeholders-extension-client-side-solution' below in the ‘Apps you can add’ section
+    - Select cog -> Site contents (if not redirected) and refresh the page periodically until the app is no longer grayed out, and shows as installed
+    - Navigate to the new ‘SPFx Placeholders’ list
+      - Create an entry with title 'PageHeader', and add your desired content
+      - Create an entry with title 'PageFooter' and add your desired content
+  - Debug the solution to view the placeholder content dynamically injected
+    - In the command line, run:
+    - `gulp serve --nobrowser`
+    - Browse to your test site and add the below debug script url to a list view within your site
+
+## Debug URL for testing
+Here's a debug URL for testing around this sample. **Updated based on your manifest id for easy testing of the sample**.
+
+```
+?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"b58ca197-a89a-47a9-b283-7c1df361eaf3":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{}}}
+```
+
+## Features
+This solution declaratively deploys a new content type and list that allows an end user to easily add entries that correlate to the available placeholders the SharePoint Framework supports. The application customizer then loads this data (caching with localStorage when available) and injects the content into the page. This solution will allow you to add new placeholders into the 'SPFx Placeholders' list as they become available from Microsoft, without having to make any updates to the actual code.
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-extensions/samples/js-application-listdrivenplaceholders" />

samples/js-application-listdrivenplaceholders/config/config.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    {
+      "entry": "./lib/extensions/placeholdersExtension/PlaceholdersExtensionApplicationCustomizer.js",
+      "manifest": "./src/extensions/placeholdersExtension/PlaceholdersExtensionApplicationCustomizer.manifest.json",
+      "outputPath": "./dist/placeholders-extension.bundle.js"
+    }
+  ],
+  "externals": {},
+  "localizedResources": {
+    "placeholdersExtensionStrings": "extensions/placeholdersExtension/loc/{locale}.js"
+  }
+}

samples/js-application-listdrivenplaceholders/config/copy-assets.json

@@ -0,0 +1,3 @@
+{
+  "deployCdnPath": "temp/deploy"
+}

samples/js-application-listdrivenplaceholders/config/deploy-azure-storage.json

@@ -0,0 +1,6 @@
+{
+  "workingDir": "./temp/deploy/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "placeholders-extension",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/js-application-listdrivenplaceholders/config/package-solution.json

@@ -0,0 +1,24 @@
+{
+  "solution": {
+    "name": "placeholders-extension-client-side-solution",
+    "id": "db857a74-fbd9-4a0f-92a4-8a8ed24bc2e2",
+    "version": "1.0.0.0",
+    "features": [{
+      "title": "Placeholders Extension",
+      "description": "Placeholders Extension",
+      "id": "7d3631fb-aeb8-4fe4-9d5e-eede52446c9d",
+      "version": "1.0.0.0",
+      "assets": {        
+        "elementManifests": [
+          "elements.xml"
+        ],
+        "elementFiles":[
+          "schema.xml"
+        ]
+      }
+    }]
+  },
+  "paths": {
+    "zippedPackage": "solution/placeholders-extension.sppkg"
+  }
+}

samples/js-application-listdrivenplaceholders/config/serve.json

@@ -0,0 +1,9 @@
+{
+  "port": 4321,
+  "initialPage": "https://localhost:5432/workbench",
+  "https": true,
+  "api": {
+    "port": 5432,
+    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
+  }
+}

samples/js-application-listdrivenplaceholders/config/tslint.json

@@ -0,0 +1,45 @@
+{
+  // Display errors as warnings
+  "displayAsWarning": true,
+  // The TSLint task may have been configured with several custom lint rules
+  // before this config file is read (for example lint rules from the tslint-microsoft-contrib
+  // project). If true, this flag will deactivate any of these rules.
+  "removeExistingRules": true,
+  // When true, the TSLint task is configured with some default TSLint "rules.":
+  "useDefaultConfigAsBase": false,
+  // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
+  // which are active, other than the list of rules below.
+  "lintConfig": {
+    // Opt-in to Lint rules which help to eliminate bugs in JavaScript
+    "rules": {
+      "class-name": false,
+      "export-name": false,
+      "forin": false,
+      "label-position": false,
+      "member-access": true,
+      "no-arg": false,
+      "no-console": false,
+      "no-construct": false,
+      "no-duplicate-case": true,
+      "no-duplicate-variable": true,
+      "no-eval": false,
+      "no-function-expression": true,
+      "no-internal-module": true,
+      "no-shadowed-variable": true,
+      "no-switch-case-fall-through": true,
+      "no-unnecessary-semicolons": true,
+      "no-unused-expression": true,
+      "no-unused-imports": true,
+      "no-use-before-declare": true,
+      "no-with-statement": true,
+      "semicolon": true,
+      "trailing-comma": false,
+      "typedef": false,
+      "typedef-whitespace": false,
+      "use-named-parameter": true,
+      "valid-typeof": true,
+      "variable-name": false,
+      "whitespace": false
+    }
+  }
+}

samples/js-application-listdrivenplaceholders/config/write-manifests.json

@@ -0,0 +1,3 @@
+{
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

samples/js-application-listdrivenplaceholders/gulpfile.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const gulp = require('gulp');
+const build = require('@microsoft/sp-build-web');
+
+build.initialize(gulp);