Added section background examples

This commit is contained in:
Erwin van Hunen 2019-03-13 12:11:37 +01:00
parent 4c3854748d
commit 71b03b4db2
27 changed files with 576 additions and 0 deletions

32
samples/section-backgrounds/.gitignore vendored Normal file
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,13 @@
{
"@microsoft/generator-sharepoint": {
"plusBeta": true,
"isCreatingSolution": true,
"environment": "spo",
"version": "1.7.1",
"libraryName": "section-background",
"libraryId": "6e12f297-a6bf-43c8-98b3-250220ae905f",
"packageManager": "npm",
"isDomainIsolated": false,
"componentType": "webpart"
}
}

View File

@ -0,0 +1,53 @@
# Supporting section backgrounds in your web parts
## Summary
These samples show how to implement support for section backgrounds in your web parts.
There are 3 web parts in this solution showing how to implement support for a background and 1 web part that shows what the fallback scenario looks like.
For more details on the implementation, check out the documentation at https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/supporting-section-backgrounds
## A basic web part
This basic (no framework) web part implements support for backgrounds.
![Basic Web Part](./assets/webpartexample1.png)
In the 2 column section above we defined a background color and inserted the first example web part in the left column. It picks up the background color and uses the right foreground color for text.
## A React based web part
This React based web part implements support for backgrounds, alike the basic the web part.
![React Web Part](./assets/webpartexample2.png)
## A web part using the Office UI Framework
This web part implements a Office UI button which is inheriting its colors correctly from the theme
![Office UI Component Web Part](./assets/webpartexample3.png)
## Building the code
- Clone the repository
- ```npm install```
- ```gulp build```
- ```gulp serve --nobrowser```
- Open a browser, navigate to the workbench (https://yourtenant.sharepoint.com/_layouts/workbench.aspx), add a section, change the background color and add the web parts.
## 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)
## Solution
Solution|Author(s)
--------|---------
section-background-examples|Microsoft
## Version history
Version|Date|Comments
-------|----|--------
1.0.0|March 13, 2019|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.**

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -0,0 +1,29 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"basic-react-section-background-example-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/basicReactSectionBackgroundExample/BasicReactSectionBackgroundExampleWebPart.js",
"manifest": "./src/webparts/basicReactSectionBackgroundExample/BasicReactSectionBackgroundExampleWebPart.manifest.json"
},
{
"entrypoint": "./lib/webparts/basicPlainSectionBackgroundExample/BasicPlainSectionBackgroundExampleWebPart.js",
"manifest": "./src/webparts/basicPlainSectionBackgroundExample/BasicPlainSectionBackgroundExampleWebPart.manifest.json"
},
{
"entrypoint": "./lib/webparts/basicPlainWithFallbackExample/BasicPlainWithFallbackExampleWebPart.js",
"manifest": "./src/webparts/basicPlainWithFallbackExample/BasicPlainWithFallbackExampleWebPart.manifest.json"
},
{
"entrypoint": "./lib/webparts/officeUIFabricSectionBackgroundExample/OfficeUIFabricSectionBackgroundExampleWebPart.js",
"manifest": "./src/webparts/officeUIFabricSectionBackgroundExample/OfficeUIFabricSectionBackgroundExampleWebPart.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
}
}

View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

View File

@ -0,0 +1,7 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "section-background",
"accessKey": "<!-- ACCESS KEY -->"
}

View File

@ -0,0 +1,13 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "section-background-client-side-solution",
"id": "6e12f297-a6bf-43c8-98b3-250220ae905f",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": false
},
"paths": {
"zippedPackage": "solution/section-background.sppkg"
}
}

View File

@ -0,0 +1,10 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

View File

@ -0,0 +1,7 @@
'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.initialize(gulp);

View File

@ -0,0 +1,41 @@
{
"name": "section-background",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"office-ui-fabric-react": "6.0.0",
"react": "16.3.2",
"react-dom": "16.3.2",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.5",
"@microsoft/sp-component-base": "1.7.1-plusbeta",
"@microsoft/sp-core-library": "1.7.1-plusbeta",
"@microsoft/sp-webpart-base": "1.7.1-plusbeta",
"@microsoft/sp-lodash-subset": "1.7.1-plusbeta",
"@microsoft/sp-office-ui-fabric-core": "1.7.1-plusbeta",
"@types/webpack-env": "1.13.1",
"@types/es6-promise": "0.0.33",
"@uifabric/utilities": "6.0.0"
},
"resolutions": {
"@types/react": "16.4.2"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.7.1-plusbeta",
"@microsoft/sp-tslint-rules": "1.7.1-plusbeta",
"@microsoft/sp-module-interfaces": "1.7.1-plusbeta",
"@microsoft/sp-webpart-workbench": "1.7.1-plusbeta",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}
}

View File

@ -0,0 +1 @@
// A file is required to be in the root of the /src directory by the TypeScript compiler

View File

@ -0,0 +1,27 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "30e558fb-1d1b-4c5d-9ee3-eb5fcdf2fe54",
"alias": "BasicPlainSectionBackgroundExample",
"componentType": "WebPart",
"supportsThemeVariants": true,
// 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": "BasicPlainSectionBackgroundExample" },
"description": { "default": "BasicPlainSectionBackgroundExample description" },
"officeFabricIconFontName": "Page",
"properties": {
}
}]
}

View File

@ -0,0 +1,40 @@
import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme, ISemanticColors } from '@microsoft/sp-component-base';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
export default class BasicPlainSectionBackgroundExampleWebPart extends BaseClientSideWebPart<void> {
private readonly _textContent: string = 'This web part has support for section backgrounds and will inherit its background from the section';
private _themeProvider: ThemeProvider;
private _themeVariant: IReadonlyTheme | undefined;
public render(): void {
// See https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming
const semanticColors: Readonly<ISemanticColors> | undefined = this._themeVariant && this._themeVariant.semanticColors;
const style: string = ` style="color:${semanticColors.bodyText}"`;
this.domElement.innerHTML = `<p${'' || (this._themeProvider && style)}>${this._textContent}</p>`;
}
protected onInit(): Promise<void> {
// Consume the new ThemeProvider service
this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
// If it exists, get the theme variant
this._themeVariant = this._themeProvider.tryGetTheme();
// Register a handler to be notified if the theme variant changes
this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
return super.onInit();
}
/**
* Update the current theme variant reference and re-render.
*
* @param args The new theme
*/
private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
this._themeVariant = args.theme;
this.render();
}
}

View File

@ -0,0 +1,25 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "12f07ee4-ffcf-40ce-ae8c-516c96ce36eb",
"alias": "BasicPlainWithFallbackExample",
"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": "BasicPlainWithFallbackExample" },
"description": { "default": "BasicPlainWithFallbackExample description" },
"officeFabricIconFontName": "Page",
"properties": {
}
}]
}

View File

@ -0,0 +1,10 @@
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
export default class BasicPlainSectionBackgroundExampleWebPart extends BaseClientSideWebPart<void> {
private readonly _textContent: string = 'This webpart has no support for section backgrounds and will fall back to the default behavior';
public render(): void {
this.domElement.innerHTML = `<p style="color: black">${this._textContent}</p>`;
}
}

View File

@ -0,0 +1,28 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "724a9a44-80c4-4e45-9e18-57e74fe79be8",
"alias": "BasicReactSectionBackgroundExample",
"componentType": "WebPart",
// Removes the fallback treatment
"supportsThemeVariants": true,
// 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": "BasicReactSectionBackgroundExample" },
"description": { "default": "BasicReactSectionBackgroundExample description" },
"officeFabricIconFontName": "Page",
"properties": {
}
}]
}

View File

@ -0,0 +1,49 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import BasicSectionBackgroundExample, { IBasicSectionBackgroundExampleProps } from './components/BasicSectionBackgroundExample';
export default class OUIFRSectionBackgroundExampleWebPart extends BaseClientSideWebPart<void> {
private _themeProvider: ThemeProvider;
private _themeVariant: IReadonlyTheme | undefined;
public render(): void {
const element: React.ReactElement<IBasicSectionBackgroundExampleProps > = React.createElement(
BasicSectionBackgroundExample,
{
themeVariant: this._themeVariant
}
);
ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected onInit(): Promise<void> {
// Consume the new ThemeProvider service
this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
// If it exists, get the theme variant
this._themeVariant = this._themeProvider.tryGetTheme();
// Register a handler to be notified if the theme variant changes
this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
return super.onInit();
}
/**
* Update the current theme variant reference and re-render.
*
* @param args The new theme
*/
private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
this._themeVariant = args.theme;
this.render();
}
}

View File

@ -0,0 +1,19 @@
import * as React from 'react';
import { IReadonlyTheme } from '@microsoft/sp-component-base';
export interface IBasicSectionBackgroundExampleProps {
themeVariant: IReadonlyTheme | undefined;
}
export default class BasicSectionBackgroundExample extends React.Component<IBasicSectionBackgroundExampleProps, {}> {
public render(): React.ReactElement<IBasicSectionBackgroundExampleProps> {
// See https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming
const { semanticColors }: IReadonlyTheme = this.props.themeVariant;
return (
<div style={{color: semanticColors.bodyText}}>
<p>This React web part has support for section backgrounds and will inherit its background from the section</p>
</div>
);
}
}

View File

@ -0,0 +1,28 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "45a39de7-057e-4d82-92bd-59eeeff65156",
"alias": "OfficeUIFabricSectionBackgroundExample",
"componentType": "WebPart",
// Removes the fallback treatment
"supportsThemeVariants": true,
// 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": "OfficeUIFabricSectionBackgroundExample" },
"description": { "default": "OfficeUIFabricSectionBackgroundExample description" },
"officeFabricIconFontName": "Page",
"properties": {
}
}]
}

View File

@ -0,0 +1,49 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import OfficeUIFabricSectionBackgroundExample, { IOfficeUIFabricSectionBackgroundExampleProps } from './components/OfficeUIFabricSectionBackgroundExample';
export default class OfficeUIFabricSectionBackgroundExampleWebPart extends BaseClientSideWebPart<void> {
private _themeProvider: ThemeProvider;
private _themeVariant: IReadonlyTheme | undefined;
public render(): void {
const element: React.ReactElement<IOfficeUIFabricSectionBackgroundExampleProps > = React.createElement(
OfficeUIFabricSectionBackgroundExample,
{
themeVariant: this._themeVariant
}
);
ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected onInit(): Promise<void> {
// Consume the new ThemeProvider service
this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
// If it exists, get the theme variant
this._themeVariant = this._themeProvider.tryGetTheme();
// Register a handler to be notified if the theme variant changes
this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
return super.onInit();
}
/**
* Update the current theme variant reference and re-render.
*
* @param args The new theme
*/
private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
this._themeVariant = args.theme;
this.render();
}
}

View File

@ -0,0 +1,23 @@
import * as React from 'react';
import { Customizer } from '@uifabric/utilities/lib/Customizer';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { IReadonlyTheme } from '@microsoft/sp-component-base';
export interface IOfficeUIFabricSectionBackgroundExampleProps {
themeVariant: IReadonlyTheme | undefined;
}
export default class OfficeUIFabricSectionBackgroundExample extends React.Component<IOfficeUIFabricSectionBackgroundExampleProps, {}> {
public render(): React.ReactElement<IOfficeUIFabricSectionBackgroundExampleProps> {
// Customizer will set a scoped theme for all OUIFR components that use `customizable` in the subtree
return (
<div>
<p>This web part implements an Office UI Framework component which inherits the background and correct colors</p>
<Customizer settings={{ theme: this.props.themeVariant }}>
<PrimaryButton>Click me</PrimaryButton>
</Customizer>
</div>
);
}
}

View File

@ -0,0 +1,34 @@
{
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
]
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
]
}

View File

@ -0,0 +1,30 @@
{
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"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-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-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}