New SPFx assets advanced sample and minor readme fix (#243)

* react-provision-assets sample added. provides advanced techniques for provisioning lists, libraries, fields and more.

* README drop icon changed to GA

I updated the drop icon from drop4 to GA so not to cause confusion when someone is looking at the README.

* README file updated
This commit is contained in:
Velin Georgiev 2017-06-18 16:07:24 +01:00 committed by Vesa Juvonen
parent 5859d3417b
commit 5ca1a89c85
36 changed files with 8708 additions and 2 deletions

View File

@ -11,7 +11,7 @@ Sample poll web part allowing users to vote and view the results.
![Poll web part built on the SharePoint Framework using React](./assets/poll-preview.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-drop4-red.svg)
![drop](https://img.shields.io/badge/drop-GA-green.svg)
## Applies to

View File

@ -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

View File

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

View File

@ -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

View File

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

View File

@ -0,0 +1,8 @@
{
"@microsoft/generator-sharepoint": {
"version": "1.1.1",
"libraryName": "react-provision-assets-webpart",
"libraryId": "e64d001b-d6c7-4326-8d5f-965a7a086266",
"environment": "spo"
}
}

View File

@ -0,0 +1,69 @@
# Provision SharePoint Assets with the SPFx solution package #
## Summary
This sample shows how we can provision Document Library, Custom List, Web and List PropertyBag properties, Site Columns, Content Types, Images, Site Page with the SFPx Client side webpart and even prepopulated list and library items along with the SPFx solution package. All of the components can be deployed at once with the SPFx webpart when the app is added to a SharePoint site. It also contains custom list and document library xml schemas.
![The yammer search web part displayed in SharePoint online](./assets/spfx-provision-assets.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
## Applies to
* [SharePoint Framework](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)
** The SPFx webpart will work in local workbench, but not the assets. They can be provisioned only when the app is deployed since they are SharePoint specific.
## Prerequisites
- Office 365 subscription with SharePoint Online.
- SharePoint Framework [development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) already set up.
- Tenant admin access to the Office 365 subscription and [App Catalog](https://support.office.com/en-ie/article/Use-the-App-Catalog-to-make-custom-business-apps-available-for-your-SharePoint-Online-environment-0b6ab336-8b83-423f-a06b-bcc52861cba0) already setup.
## Solution
Solution|Author(s)
--------|---------
react-provision-assets | Velin Georgiev ([@VelinGeorgiev](https://twitter.com/velingeorgiev))
## Version history
Version|Date|Comments
-------|----|--------
0.0.1|June 17, 2017 | Initial commit
## 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.
- Open the command line, navigate to the web part folder and execute:
- `npm i`
- `gulp serve --nobrowser`
- `gulp package-solution`
- [Deploy the package](https://dev.office.com/sharepoint/docs/spfx/enterprise-guidance#management-capabilities-of--sharepoint-framework-solutions) to the app catalog
- [Add the app](https://support.office.com/en-ie/article/Add-an-app-to-a-site-ef9c0dbd-7fe1-4715-a1b0-fe3bc81317cb?ui=en-US&rs=en-IE&ad=IE) to a site
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework:
- SPFx provisioning based on the following Elements.xml nodes:
- Custom List Instance with custom list schema.
- Document Library Instance with custom list schema.
- Content Types.
- Fields.
- Module with Images.
- Module with Site Page.
- PropertyBag properties.
- Pre-populated List Data Rows in the Elements.xml.
- Onet.xml specific tokens.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-provision-assets" />

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

View File

@ -0,0 +1,13 @@
{
"entries": [
{
"entry": "./lib/webparts/reactProvisionAssets/ReactProvisionAssetsWebPart.js",
"manifest": "./src/webparts/reactProvisionAssets/ReactProvisionAssetsWebPart.manifest.json",
"outputPath": "./dist/react-provision-assets.bundle.js"
}
],
"externals": {},
"localizedResources": {
"reactProvisionAssetsStrings": "webparts/reactProvisionAssets/loc/{locale}.js"
}
}

View File

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

View File

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

View File

@ -0,0 +1,28 @@
{
"solution": {
"name": "react-provision-assets-client-side-solution",
"id": "e64d001b-d6c7-4326-8d5f-965a7a086267",
"version": "1.0.0.0",
"features": [{
"title": "react-provision-assets-client-side-solution",
"description": "react-provision-assets-client-side-solution",
"id": "523fe887-ced5-4036-b564-8dad5c6c6e22",
"version": "1.0.0.0",
"assets": {
"elementManifests": [
"elements.xml"
],
"elementFiles":[
"listSchema.xml",
"librarySchema.xml",
"Image1.jpg",
"Image2.png",
"WebPartSitePage.aspx"
]
}
}]
},
"paths": {
"zippedPackage": "solution/react-provision-assets.sppkg"
}
}

View File

@ -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/"
}
}

View File

@ -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
}
}
}

View File

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

View File

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

View File

@ -0,0 +1,33 @@
{
"name": "react-provision-assets",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-core-library": "~1.1.0",
"@microsoft/sp-webpart-base": "~1.1.1",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"@types/react": "0.14.46",
"@types/react-dom": "0.14.18",
"@types/react-addons-shallow-compare": "0.14.17",
"@types/react-addons-update": "0.14.14",
"@types/react-addons-test-utils": "0.14.15"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.1.0",
"@microsoft/sp-module-interfaces": "~1.1.0",
"@microsoft/sp-webpart-workbench": "~1.1.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"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,13 @@
<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebControls.ClientSidePage, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head>
<!--[if gte mso 9]><SharePoint:CTFieldRefs runat=server Prefix="mso:" FieldList="FileLeafRef,ClientSideApplicationId,PageLayoutType,CanvasContent1,BannerImageUrl,BannerImageOffset,PromotedState,FirstPublishedDate,LayoutWebpartsContent"><xml>
<mso:CustomDocumentProperties>
<mso:PageLayoutType msdt:dt="string">Article</mso:PageLayoutType>
<mso:CanvasContent1 msdt:dt="string">&lt;div&gt;&lt;div data-sp-canvascontrol=&quot;&quot; data-sp-canvasdataversion=&quot;1.0&quot; data-sp-controldata=&quot;&amp;#123;&amp;quot;controlType&amp;quot;&amp;#58;3,&amp;quot;webPartId&amp;quot;&amp;#58;&amp;quot;e89b5ad5-9ab5-4730-a66b-e1f68994598c&amp;quot;,&amp;quot;id&amp;quot;&amp;#58;&amp;quot;8bba86eb-3174-4917-b2b8-417af1102351&amp;quot;&amp;#125;&quot;&gt;&lt;div data-sp-webpart=&quot;&quot; data-sp-webpartdataversion=&quot;1.0&quot; data-sp-webpartdata=&quot;&amp;#123;&amp;quot;id&amp;quot;&amp;#58;&amp;quot;e89b5ad5-9ab5-4730-a66b-e1f68994598c&amp;quot;,&amp;quot;instanceId&amp;quot;&amp;#58;&amp;quot;8bba86eb-3174-4917-b2b8-417af1102351&amp;quot;,&amp;quot;title&amp;quot;&amp;#58;&amp;quot;ReactProvisionAssets&amp;quot;,&amp;quot;description&amp;quot;&amp;#58;&amp;quot;ReactProvisionAssets description&amp;quot;,&amp;quot;dataVersion&amp;quot;&amp;#58;&amp;quot;1.0&amp;quot;,&amp;quot;properties&amp;quot;&amp;#58;&amp;#123;&amp;quot;description&amp;quot;&amp;#58;&amp;quot;ReactProvisionAssets&amp;quot;&amp;#125;&amp;#125;&quot;&gt;&lt;div data-sp-componentid=&quot;&quot;&gt;e89b5ad5-9ab5-4730-a66b-e1f68994598c&lt;/div&gt;&lt;div data-sp-htmlproperties=&quot;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</mso:CanvasContent1>
<mso:ContentTypeId msdt:dt="string">0x0101009D1CB255DA76424F860D91F20E6C4118</mso:ContentTypeId>
<mso:ClientSideApplicationId msdt:dt="string">b6917cb1-93a0-4b97-a84d-7cf49975d4ec</mso:ClientSideApplicationId>
<mso:PromotedState msdt:dt="string">0</mso:PromotedState>
<mso:BannerImageUrl msdt:dt="string">/_layouts/15/images/sitepagethumbnail.png, /_layouts/15/images/sitepagethumbnail.png</mso:BannerImageUrl>
</mso:CustomDocumentProperties>
</xml></SharePoint:CTFieldRefs><![endif]-->
<title>WebPartSitePage</title></head>

View File

@ -0,0 +1,154 @@
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<!-- List of possible elements expected:
'CustomAction, ClientWebPart, ClientSideComponent,
Field, ContentType, ListInstance, Module, PropertyBag'
-->
<!-- Upload Site Page with SPFx webpart -->
<Module Name="WebPartSitePage" Url="SitePages">
<File Path="WebPartSitePage.aspx" Url="WebPartSitePage.aspx" Type="GhostableInLibrary" >
</File>
</Module>
<!-- SPFxDescription Site Column -->
<Field ID="{0ad9d45c-b110-4635-b149-2890aa3a2513}"
Name="SPFxDescription"
DisplayName="Description"
StaticName="SPFxDescription"
Group="SPFx Site Columns"
Type="Note"
Required="FALSE"
EnforceUniqueValues="FALSE"
Indexed="FALSE"
NumLines="8"
RichText="TRUE"
RichTextMode="FullHtml"
IsolateStyles="TRUE"
Sortable="FALSE"
/>
<!-- SPFxImage Site Column -->
<Field ID="{f4e5dd71-448f-40e2-b991-35874a0d7fd6}"
Name="SPFxImage"
DisplayName="Image"
StaticName="SPFxImage"
Group="SPFx Site Columns"
Type="URL"
Required="FALSE"
EnforceUniqueValues="FALSE"
Indexed="FALSE"
Format="Hyperlink"
/>
<!-- Parent ContentType: Item (0x0100) -->
<ContentType ID="0x0100CEADAD40C6630B489BDF172555628DA0"
Name="SPFxItem"
Group="SPFx Content Types"
Description=""
Inherits="FALSE"
Version="0"
Hidden="FALSE"
Sealed="FALSE"
>
<FieldRefs>
<!-- SPFxDescription Site Column -->
<FieldRef ID="{f4e5dd71-448f-40e2-b991-35874a0d7fd6}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
<!-- SPFxImage Site Column -->
<FieldRef ID="{0ad9d45c-b110-4635-b149-2890aa3a2513}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
</FieldRefs>
</ContentType>
<!-- Parent ContentType: Document (0x0101) -->
<ContentType ID="0x0101A33D9AD9805788419BDAAC2CCB37500F"
Name="SPFxDocument"
Group="SPFx Content Types"
Description=""
Inherits="FALSE"
Version="0"
Hidden="FALSE"
Sealed="FALSE"
>
<FieldRefs>
<!-- SPFxDescription Site Column -->
<FieldRef ID="{f4e5dd71-448f-40e2-b991-35874a0d7fd6}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
<!-- SPFxImage Site Column -->
<FieldRef ID="{0ad9d45c-b110-4635-b149-2890aa3a2513}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
</FieldRefs>
<DocumentTemplate TargetName="/_layouts/15/upload.aspx"/>
</ContentType>
<!-- List (TemplateType 100) -->
<ListInstance
CustomSchema="listSchema.xml"
FeatureId="00bfea71-de22-43b2-a848-c05709900100"
Title="SPFx List"
Description=""
TemplateType="100"
Url="Lists/SPFxList"
Hidden="FALSE">
<!-- Add default data with the list -->
<!-- Note: Deactivating and activating the feature will
duplicate the data, so remove or comment if no initial data needed
-->
<Data>
<Rows>
<Row>
<Field Name="Title">Title 1</Field>
<Field Name="SPFxDescription">Description 1</Field>
<!-- Usage of Special Tokens (~site and ~sitecollection)
Source: https://dev.office.com/sharepoint/docs/general-development/urls-and-tokens-in-sharepoint -->
<Field Name="SPFxImage">~site/SitePages/Forms/ByAuthor.aspx, URL Title1</Field>
</Row>
<Row>
<Field Name="Title">Title 2</Field>
<Field Name="SPFxDescription">Description 2</Field>
<!-- Usage of Special Tokens (~site and ~sitecollection)
Source: https://dev.office.com/sharepoint/docs/general-development/urls-and-tokens-in-sharepoint -->
<Field Name="SPFxImage">~site/SitePages/Forms/ByAuthor.aspx, URL Title2</Field>
</Row>
</Rows>
</Data>
</ListInstance>
<!-- Document Library (TemplateType 101) -->
<ListInstance
CustomSchema="librarySchema.xml"
FeatureId="00bfea71-e717-4e80-aa17-d0c71b360101"
Title="SPFx Document Library"
Description=""
TemplateType="101"
Url="SPFxDocumentLibrary"
Hidden="FALSE">
</ListInstance>
<!-- Upload files to the SPFxDocumentLibrary -->
<Module Name="Files" Url="SPFxDocumentLibrary">
<!-- ISSUE: For some reason `gulp package-solution` breaks the .jpg, .png images.
Workaround is to open the .sppkg with winrar and add the images manually. -->
<File Path="Image1.jpg" Url="Image1.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >
</File>
<File Path="Image2.png" Url="CustomFolder/Image2.png" Type="GhostableInLibrary" ReplaceContent="TRUE">
</File>
</Module>
<!-- Web PropertyBag Properties -->
<!-- PropertyBag: https://msdn.microsoft.com/en-us/library/office/gg491706.aspx -->
<PropertyBag ParentType="Web" RootWebOnly="FALSE">
<!-- Property: https://msdn.microsoft.com/en-us/library/office/gg491703.aspx -->
<Property Name="SPFxName1" Value="SPFxValue1" Type="string"/>
<Property Name="SPFxName2" Value="1" Type="int"/>
</PropertyBag>
<!-- List PropertyBag Properties -->
<!-- PropertyBag: https://msdn.microsoft.com/en-us/library/office/gg491706.aspx -->
<PropertyBag ParentType="Folder" RootWebOnly="FALSE" Url="Lists/SPFxList">
<!-- Property: https://msdn.microsoft.com/en-us/library/office/gg491703.aspx -->
<Property Name="SPFxListName1" Value="SPFxListValue1" Type="string"/>
<Property Name="SPFxListName2" Value="1" Type="int"/>
</PropertyBag>
</Elements>

View File

@ -0,0 +1,86 @@
<List xmlns:ows="Microsoft SharePoint"
Title="Library Schema"
Name="LibrarySchema"
Direction="$Resources:Direction;"
Url="LibrarySchema"
BaseType="1"
EnableContentTypes="TRUE"
VersioningEnabled="TRUE"
MajorVersionLimit="100"
EnableMinorVersions="FALSE"
MajorWithMinorVersionsLimit="0"
DisableAttachments="FALSE"
FolderCreation="TRUE"
RootWebOnly="FALSE">
<MetaData>
<Fields></Fields>
<ContentTypes>
<!-- Folder Content Type (0x0120) -->
<ContentTypeRef ID="0x0120" />
<!-- Document Content Type (0x0101) -->
<!--<ContentTypeRef ID="0x0101" />-->
<!--
I could not make the required fields work
by just specifying <ContentTypeRef ID="0x0101A33D9AD9805788419BDAAC2CCB37500F" />.
If ContentTypeRef used, it creates new 'Document' ContentType that inherits from SPFxDocument (0x0101A33D9AD9805788419BDAAC2CCB37500F)
but this removes the Required="TRUE" rule from the fields this is why I came with bellow solution.
See: https://msdn.microsoft.com/en-us/library/office/aa543822(v=office.14).aspx.
-->
<ContentType ID="0x0101A33D9AD9805788419BDAAC2CCB37500F"
Name="SPFxDocument"
Group="SPFx Content Types"
Description=""
Version="0"
Hidden="FALSE"
Sealed="FALSE"
>
<FieldRefs>
<!--Title Site Column -->
<FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Required="TRUE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
<!-- SPFxDescription Site Column -->
<FieldRef ID="{f4e5dd71-448f-40e2-b991-35874a0d7fd6}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
<!-- SPFxImage Site Column -->
<FieldRef ID="{0ad9d45c-b110-4635-b149-2890aa3a2513}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
</FieldRefs>
<DocumentTemplate TargetName="/_layouts/15/upload.aspx"/>
</ContentType>
</ContentTypes>
<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="Forms/AllItems.aspx"
ContentTypeID="0x">
<XslLink Default="TRUE">main.xsl</XslLink>
<JSLink>clienttemplates.js</JSLink>
<RowLimit Paged="TRUE">30</RowLimit>
<Toolbar Type="Standard" />
<Aggregations Value="Off" />
<ViewFields>
<!-- Name is the InternalName -->
<FieldRef Name="DocIcon" />
<FieldRef Name="LinkFilename"></FieldRef>
<FieldRef Name="Title"></FieldRef>
<FieldRef Name="SPFxDescription"></FieldRef>
<FieldRef Name="SPFxImage"></FieldRef>
</ViewFields>
<Query>
<OrderBy>
<FieldRef Name="FileLeafRef" />
</OrderBy>
</Query>
</View>
</Views>
<Forms>
<Form Type="DisplayForm" Url="Forms/DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
<Form Type="EditForm" Url="Forms/EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
<Form Type="NewForm" Url="Forms/Upload.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
</Forms>
</MetaData>
</List>

View File

@ -0,0 +1,75 @@
<List xmlns:ows="Microsoft SharePoint"
Title="List Schema"
Name="ListSchema"
Direction="$Resources:Direction;"
Url="Lists/ListSchema"
BaseType="0"
EnableContentTypes="TRUE"
FolderCreation="FALSE"
VersioningEnabled="TRUE"
MajorVersionLimit="100"
EnableMinorVersions="FALSE"
MajorWithMinorVersionsLimit="0"
DisableAttachments="FALSE"
xmlns="http://schemas.microsoft.com/sharepoint/"
RootWebOnly="FALSE">
<MetaData>
<ContentTypes>
<!-- ContentType: SPFxItem -->
<!--
I could not make the required fields work
by just specifying <ContentTypeRef ID="0x0100CEADAD40C6630B489BDF172555628DA0" />.
If ContentTypeRef used, it creates new 'Item' ContentType that inherits from SPFxItem (0x0100CEADAD40C6630B489BDF172555628DA0)
but this removes the Required="TRUE" rule from the fields this is why I came with bellow solution.
See: https://msdn.microsoft.com/en-us/library/office/aa543822(v=office.14).aspx.
-->
<ContentType ID="0x0100CEADAD40C6630B489BDF172555628DA0"
Name="SPFxItem"
Group="SPFx Content Types"
Description="">
<FieldRefs>
<!--Title Site Column -->
<FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Required="TRUE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
<!-- SPFxDescription Site Column -->
<FieldRef ID="{f4e5dd71-448f-40e2-b991-35874a0d7fd6}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
<!-- SPFxImage Site Column -->
<FieldRef ID="{0ad9d45c-b110-4635-b149-2890aa3a2513}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
</FieldRefs>
</ContentType>
</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>
<!-- Name is the InternalName -->
<FieldRef Name="LinkTitle"></FieldRef>
<FieldRef Name="SPFxDescription"></FieldRef>
<FieldRef Name="SPFxImage"></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>

View File

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

View File

@ -0,0 +1,26 @@
{
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"id": "e89b5ad5-9ab5-4730-a66b-e1f68994598c",
"alias": "ReactProvisionAssetsWebPart",
"componentType": "WebPart",
"version": "*", // The "*" signifies that the version should be taken from the package.json
"manifestVersion": 2,
/**
* This property should only be set to true if it is certain that the webpart does not
* allow arbitrary scripts to be called
*/
"safeWithCustomScriptDisabled": false,
"preconfiguredEntries": [{
"groupId": "e89b5ad5-9ab5-4730-a66b-e1f68994598c",
"group": { "default": "Under Development" },
"title": { "default": "ReactProvisionAssets" },
"description": { "default": "ReactProvisionAssets description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "ReactProvisionAssets"
}
}]
}

View File

@ -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 'reactProvisionAssetsStrings';
import ReactProvisionAssets from './components/ReactProvisionAssets';
import { IReactProvisionAssetsProps } from './components/IReactProvisionAssetsProps';
import { IReactProvisionAssetsWebPartProps } from './IReactProvisionAssetsWebPartProps';
export default class ReactProvisionAssetsWebPart extends BaseClientSideWebPart<IReactProvisionAssetsWebPartProps> {
public render(): void {
const element: React.ReactElement<IReactProvisionAssetsProps > = React.createElement(
ReactProvisionAssets,
{
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
})
]
}
]
}
]
};
}
}

View File

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

View File

@ -0,0 +1,52 @@
.reactProvisionAssets {
.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;
}
}
}

View File

@ -0,0 +1,25 @@
import * as React from 'react';
import styles from './ReactProvisionAssets.module.scss';
import { IReactProvisionAssetsProps } from './IReactProvisionAssetsProps';
import { escape } from '@microsoft/sp-lodash-subset';
export default class ReactProvisionAssets extends React.Component<IReactProvisionAssetsProps, void> {
public render(): React.ReactElement<IReactProvisionAssetsProps> {
return (
<div className={styles.reactProvisionAssets}>
<div className={styles.container}>
<div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
<div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
<span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
<p className="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
<p className="ms-font-l ms-fontColor-white">{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={styles.button}>
<span className={styles.label}>Learn more</span>
</a>
</div>
</div>
</div>
</div>
);
}
}

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,11 @@
// 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;
/* Global defintion for SPO builds */
declare const DATACENTER: boolean;

View File

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

File diff suppressed because it is too large Load Diff