Sample showing how to provision SharePoint assets using feature framework

samples/README-template.md

@@ -5,10 +5,13 @@ Short summary on functionality and used technologies.
 
 [picture of the web part in action]
 
+## Used SharePoint Framework Version 
+![drop](https://img.shields.io/badge/version-GA-green.svg)
+
 ## Applies to
 
-* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
+* [SharePoint Framework](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/)
+* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
 
 > Update accordingly as needed.
 
@@ -39,7 +42,6 @@ Version|Date|Comments
 - Clone this repository
 - in the command line run:
   - `npm install`
-  - `tsd install`
   - `gulp serve`
 
 > Include any additional steps as needed.

samples/react-feature-framework/.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/react-feature-framework/.gitattributes

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

samples/react-feature-framework/.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/react-feature-framework/.npmignore

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

samples/react-feature-framework/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "vsicons.presets.angular": false
+}

samples/react-feature-framework/.yo-rc.json

@@ -0,0 +1,8 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "libraryName": "react-feature-framework",
+    "framework": "react",
+    "version": "1.0.0",
+    "libraryId": "54302acc-03bb-465a-81ba-4d14603b4154"
+  }
+}

samples/react-feature-framework/README.md

@@ -0,0 +1,66 @@
+# Deployment of SharePoint assets as part of SPFx package
+
+## Summary
+Simplistic solution demonstrating how to provision SharePoint assets using Feature Framework elements when SharePoint Framework solution is being deployed to a SharePoint site. 
+
+![screenshot](assets/screenshot.png)
+
+Demonstrated assets getting deployed to SharePoint site are following
+
+- Fields
+- Content Type
+- List with custom schema
+
+When you install SPFx so site, web scoped feature is activated and associated element.xml files are being processed. Technically you could also provision SharePoint assets using JavaScript, but it is limited to context of the current user using that component. If the user doesn't have sufficient permissions to create or modify SharePoint items, the JavaScript code will not provision those items. 
+
+More details on the capability is available from following article
+
+* [Provision SharePoint assets with your solution package](https://dev.office.com/sharepoint/docs/spfx/toolchain/provision-sharepoint-assets)
+
+## Used SharePoint Framework Version 
+![drop](https://img.shields.io/badge/version-GA-green.svg)
+
+## Applies to
+
+* [SharePoint Framework](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/)
+* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
+
+## Prerequisites
+ 
+None.
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+react-feature-framework | Vesa Juvonen
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0|February 27, 2017|Initial sample
+
+## 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 repositoru
+- Move to /samples/react-feature-framework folder
+- in the command line run:
+  - `npm install`
+  - `gulp bundle`
+  - `gulp package-solution`
+- Install `react-feature-framework.sppkg` from /sharepoint/solution to app catalog in your tenant
+- Install solution to SharePoint site
+
+Following items are being provisioned
+
+- SPFxAmount and SPFxCostCenter fields under 'SPFx Columns' group - visible in the Site Column Gallery
+- Cost Center content type using 'SPFx Content Types' group using custom fields - visible in Site Content Types Gallery
+- List called 'SPFx List' using custom schema.xml file using custom content tyep - visible in site contents page
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-feature-framework" />

samples/react-feature-framework/config/config.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    {
+      "entry": "./lib/webparts/listProvisioning/ListProvisioningWebPart.js",
+      "manifest": "./src/webparts/listProvisioning/ListProvisioningWebPart.manifest.json",
+      "outputPath": "./dist/list-provisioning.bundle.js"
+    }
+  ],
+  "externals": {},
+  "localizedResources": {
+    "listProvisioningStrings": "webparts/listProvisioning/loc/{locale}.js"
+  }
+}

samples/react-feature-framework/config/copy-assets.json

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

samples/react-feature-framework/config/deploy-azure-storage.json

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

samples/react-feature-framework/config/package-solution.json

@@ -0,0 +1,23 @@
+{
+  "solution": {
+    "name": "react-feature-framework-client-side-solution",
+    "id": "54302acc-03bb-465a-81ba-4d14603b4154",
+    "version": "1.0.0.0",
+    "features": [{
+      "title": "hello-world-client-side-solution",
+      "description": "hello-world-client-side-solution",
+      "id": "d46cd9d6-87fc-473b-a4c0-db9ad9162b64",
+      "assets": {        
+        "elementManifests": [
+          "elements.xml"
+        ],
+        "elementFiles":[
+          "schema.xml"
+        ]
+      }
+    }]
+  },
+  "paths": {
+    "zippedPackage": "solution/react-feature-framework.sppkg"
+  }
+}

samples/react-feature-framework/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/react-feature-framework/config/tslint.json

@@ -0,0 +1,46 @@
+{
+  // 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,
+      "prefer-const": true
+    }
+  }
+}

samples/react-feature-framework/config/write-manifests.json

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

samples/react-feature-framework/gulpfile.js

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

samples/react-feature-framework/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-feature-framework",
+  "version": "0.0.1",
+  "private": true,
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "dependencies": {
+    "@microsoft/sp-client-base": "~1.0.0",
+    "@microsoft/sp-core-library": "~1.0.0",
+    "@microsoft/sp-webpart-base": "~1.0.0",
+    "@types/react": "0.14.46",
+    "@types/react-addons-shallow-compare": "0.14.17",
+    "@types/react-addons-test-utils": "0.14.15",
+    "@types/react-addons-update": "0.14.14",
+    "@types/react-dom": "0.14.18",
+    "@types/webpack-env": ">=1.12.1 <1.14.0",
+    "react": "15.4.2",
+    "react-dom": "15.4.2"
+  },
+  "devDependencies": {
+    "@microsoft/sp-build-web": "~1.0.0",
+    "@microsoft/sp-module-interfaces": "~1.0.0",
+    "@microsoft/sp-webpart-workbench": "~1.0.0",
+    "gulp": "~3.9.1",
+    "@types/chai": ">=3.4.34 <3.6.0",
+    "@types/mocha": ">=2.2.33 <2.6.0"
+  },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test"
+  }
+}

samples/react-feature-framework/sharepoint/assets/elements.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
+
+    <Field ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}"
+            Name="SPFxAmount"
+            DisplayName="Amount"
+            Type="Currency"
+            Decimals="2"
+            Min="0"
+            Required="FALSE"
+            Group="SPFx Columns" />
+
+    <Field ID="{943E7530-5E2B-4C02-8259-CCD93A9ECB18}"
+            Name="SPFxCostCenter"
+            DisplayName="Cost Center"
+            Type="Choice"
+            Required="FALSE"
+            Group="SPFx Columns">
+        <CHOICES>
+        <CHOICE>Administration</CHOICE>
+        <CHOICE>Information</CHOICE>
+        <CHOICE>Facilities</CHOICE>
+        <CHOICE>Operations</CHOICE>
+        <CHOICE>Sales</CHOICE>
+        <CHOICE>Marketing</CHOICE>
+        </CHOICES>
+    </Field>
+
+    <ContentType ID="0x010042D0C1C200A14B6887742B6344675C8B" 
+            Name="Cost Center" 
+            Group="SPFx Content Types" 
+            Description="Sample content types from web part solution">
+        <FieldRefs>
+            <FieldRef ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}" /> 
+            <FieldRef ID="{943E7530-5E2B-4C02-8259-CCD93A9ECB18}" />
+        </FieldRefs>
+    </ContentType> 
+
+    <ListInstance 
+            CustomSchema="schema.xml"
+            FeatureId="00bfea71-de22-43b2-a848-c05709900100"
+            Title="SPFx List" 
+            Description="SPFx List"
+            TemplateType="100"
+            Url="Lists/SPFxList">
+    </ListInstance>
+
+</Elements>

samples/react-feature-framework/sharepoint/assets/schema.xml

@@ -0,0 +1,31 @@
+<List xmlns:ows="Microsoft SharePoint" Title="Basic List" EnableContentTypes="TRUE" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/Basic List" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/">
+  <MetaData>
+    <ContentTypes>
+      <ContentTypeRef ID="0x010042D0C1C200A14B6887742B6344675C8B" />
+    </ContentTypes>
+    <Fields></Fields>
+    <Views>
+      <View BaseViewID="1" Type="HTML" WebPartZoneID="Main" DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="AllItems.aspx">
+        <XslLink Default="TRUE">main.xsl</XslLink>
+        <JSLink>clienttemplates.js</JSLink>
+        <RowLimit Paged="TRUE">30</RowLimit>
+        <Toolbar Type="Standard" />
+        <ViewFields>
+          <FieldRef Name="LinkTitle"></FieldRef>
+          <FieldRef Name="SPFxAmount"></FieldRef>
+          <FieldRef Name="SPFxCostCenter"></FieldRef>
+        </ViewFields>
+        <Query>
+          <OrderBy>
+            <FieldRef Name="ID" />
+          </OrderBy>
+        </Query>
+      </View>
+    </Views>
+    <Forms>
+      <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
+      <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
+      <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
+    </Forms>
+  </MetaData>
+</List>

samples/react-feature-framework/src/webparts/listProvisioning/IListProvisioningWebPartProps.ts

@@ -0,0 +1,3 @@
+export interface IListProvisioningWebPartProps {
+  description: string;
+}

samples/react-feature-framework/src/webparts/listProvisioning/ListProvisioningWebPart.manifest.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
+
+  "id": "2974d722-31d9-42e2-a18a-1b212b03dc8a",
+  "alias": "ListProvisioningWebPart",
+  "componentType": "WebPart",
+  "version": "0.0.1",
+  "manifestVersion": 2,
+
+  "preconfiguredEntries": [{
+    "groupId": "2974d722-31d9-42e2-a18a-1b212b03dc8a",
+    "group": { "default": "Under Development" },
+    "title": { "default": "ListProvisioning" },
+    "description": { "default": "Web part showing how to provisioning list as part of the package deployment to sites" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "description": "ListProvisioning"
+    }
+  }]
+}

samples/react-feature-framework/src/webparts/listProvisioning/ListProvisioningWebPart.ts

@@ -0,0 +1,53 @@
+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 'listProvisioningStrings';
+import ListProvisioning from './components/ListProvisioning';
+import { IListProvisioningProps } from './components/IListProvisioningProps';
+import { IListProvisioningWebPartProps } from './IListProvisioningWebPartProps';
+
+export default class ListProvisioningWebPart extends BaseClientSideWebPart<IListProvisioningWebPartProps> {
+
+  public render(): void {
+    const element: React.ReactElement<IListProvisioningProps > = React.createElement(
+      ListProvisioning,
+      {
+        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
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}

samples/react-feature-framework/src/webparts/listProvisioning/components/IListProvisioningProps.ts

@@ -0,0 +1,3 @@
+export interface IListProvisioningProps {
+  description: string;
+}

samples/react-feature-framework/src/webparts/listProvisioning/components/ListProvisioning.module.scss

@@ -0,0 +1,52 @@
+.helloWorld {
+  .container {
+    max-width: 700px;
+    margin: 0px auto;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .row {
+    padding: 20px;
+  }
+
+  .listItem {
+    max-width: 715px;
+    margin: 5px auto 5px auto;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .button {
+    // Our button
+    text-decoration: none;
+    height: 32px;
+
+    // Primary Button
+    min-width: 80px;
+    background-color: #0078d7;
+    border-color: #0078d7;
+    color: #ffffff;
+
+    // Basic Button
+    outline: transparent;
+    position: relative;
+    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+    -webkit-font-smoothing: antialiased;
+    font-size: 14px;
+    font-weight: 400;
+    border-width: 0;
+    text-align: center;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0 16px;
+
+    .label {
+      font-weight: 600;
+      font-size: 14px;
+      height: 32px;
+      line-height: 32px;
+      margin: 0 4px;
+      vertical-align: top;
+      display: inline-block;
+    }
+  }
+}

samples/react-feature-framework/src/webparts/listProvisioning/components/ListProvisioning.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import styles from './ListProvisioning.module.scss';
+import { IListProvisioningProps } from './IListProvisioningProps';
+import { escape } from '@microsoft/sp-lodash-subset';
+import { Placeholder } from '@microsoft/sp-webpart-base';
+
+export default class ListProvisioning extends React.Component<IListProvisioningProps, void> {
+  public render(): React.ReactElement<IListProvisioningProps> {
+    return (
+      <div className={styles.helloWorld}>
+        <div className={styles.container}>
+          <Placeholder
+              icon={'ms-Icon--CustomList'}
+              iconText={'SharePoint asset provisioning'}
+              description={'No actual functionality - Sample shows how to provisioning SharePoint assets using feature xml elemenents. See package.json and sharepoint/asset folder. Assets are deployed when web part is installed to a site.'} />
+        </div>
+      </div>
+    );
+  }
+}

samples/react-feature-framework/src/webparts/listProvisioning/loc/en-us.js

@@ -0,0 +1,7 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "Description",
+    "BasicGroupName": "Group Name",
+    "DescriptionFieldLabel": "Description Field"
+  }
+});

samples/react-feature-framework/src/webparts/listProvisioning/loc/mystrings.d.ts

@@ -0,0 +1,10 @@
+declare interface IListProvisioningStrings {
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  DescriptionFieldLabel: string;
+}
+
+declare module 'listProvisioningStrings' {
+  const strings: IListProvisioningStrings;
+  export = strings;
+}

samples/react-feature-framework/src/webparts/listProvisioning/tests/ListProvisioning.test.ts

@@ -0,0 +1,9 @@
+/// <reference types="mocha" />
+
+import { assert } from 'chai';
+
+describe('ListProvisioningWebPart', () => {
+  it('should do something', () => {
+    assert.ok(true);
+  });
+});

samples/react-feature-framework/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "forceConsistentCasingInFileNames": true,
+    "module": "commonjs",
+    "jsx": "react",
+    "declaration": true,
+    "sourceMap": true,
+    "types": [
+      "es6-promise",
+      "es6-collections",
+      "webpack-env"
+    ]
+  }
+}

samples/react-feature-framework/typings/@ms/odsp.d.ts

@@ -0,0 +1,8 @@
+// Type definitions for Microsoft ODSP projects
+// Project: ODSP
+
+/* Global definition for UNIT_TEST builds
+   Code that is wrapped inside an if(UNIT_TEST) {...}
+   block will not be included in the final bundle when the
+   --ship flag is specified */
+declare const UNIT_TEST: boolean;

samples/react-feature-framework/typings/tsd.d.ts

@@ -0,0 +1 @@
+/// <reference path="@ms/odsp.d.ts" />