�ݺ�ߣ

Sharepoint framework nivel avanzado

@levalencia - luisevalencia.com

SharePoint UX – Evolving cross versions
2009
SharePoint
Server 2010
2006
Office SharePoint
Server 2007
2003
SharePoint
Portal Server 2003
2001
SharePoint
Portal Server 2001
2012
SharePoint
Server 2013
2016 …
SharePoint
Server 2016, SPO

No
In similar ways as with SharePoint Add-in
model, server side development is needed for
back end services
SharePoint Framework concentrates on user
interface, not on fundamentals around the API
usage

IIS Express
Project Templates
MSBuild C#

https://www.npmjs.com/

http://yeoman.io

http://gulpjs.com/

https://www.typescriptlang.org/

Fonts, icons Colors

https://www.eliostruyf.com/automate-publishing-of-
your-sharepoint-framework-scripts-to-office-365-
public-cdn/

https://localhost
https://<your-sharepoint-site>/_layouts/workbench.aspx

import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps';
export default class HelloWorldWebPart extends
BaseClientSideWebPart<IHelloWorldWebPartProps>
{
// code omitted
}

export interface IHelloWorldWebPartProps {
description: string;
}

{
"$schema": "../../../node_modules/@microsoft/sp-module-
interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"id": "318dd20d-0c02-4c3d-acc5-e2c0fa84cf3f",
"alias": "HelloWorldWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"preconfiguredEntries": [{
"groupId": "318dd20d-0c02-4c3d-acc5-e2c0fa84cf3f",
"group": { "default": "Under Development" },
"title": { "default": "HelloWorld" },
"description": { "default": "HelloWorld description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "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);
}

/* tslint:disable */
require('./HelloWorld.module.css');
const styles = {
helloWorld: 'helloWorld_68b3b0f6',
container: 'container_68b3b0f6',
row: 'row_68b3b0f6',
listItem: 'listItem_68b3b0f6',
button: 'button_68b3b0f6',
label: 'label_68b3b0f6',
};
export default styles;
/* tslint:enable */

• Contains information about your bundle(s), any external
dependencies, localized resources
• Specifies the AMD script libraries used in the web part
{
"entries": [
{
"entry": "./lib/webparts/helloWorld/HelloWorldWebPart.js",
"manifest": "./src/webparts/helloWorld/HelloWorldWebPart.manifest.json",
"outputPath": "./dist/hello-world.bundle.js"
}
],
"externals": {
“jquery": "node_modules/jquery/dist/jquery.min.js"
},
"localizedResources": {
"helloWorldStrings": "webparts/helloWorld/loc/{locale}.js"
}
}

this.context.statusRenderer.displayLoadingIndicator(this.domElement, "message");
this.context.statusRenderer.clearLoadingIndicator(this.domElement);

this.context.statusRenderer.renderError(this.domElement, err);
this.context.statusRenderer.clearError(this.domElement);

import { DisplayMode } from '@microsoft/sp-core-library';
const pageMode : string = this.displayMode === DisplayMode.Edit ?
'You are in edit mode' : 'You are in read mode';
<p class="ms-font-l ms-fontColor-white">${pageMode}</p>

<p class='ms-font-l ms-fontColor-white'>
Loading from ${this.context.pageContext.web.title}
</p>

web part in the SharePoint Workbench, a modern, or a classic page

import { EnvironmentType } from '@microsoft/sp-core-library';
const environmentType : string = EnvironmentType.Local ? 'You are in local environment' :
'You are in sharepoint environment';
<p class="ms-font-l ms-fontColor-white">${environmentType}</p>

import { Log } from '@microsoft/sp-client-base';
Log.info('HelloWorld', 'Info message',
this.context.serviceScope);
Log.warn('HelloWorld', 'Warn message',
Log.error('HelloWorld', new Error('Error message'),
Log.verbose('HelloWorld', 'Verbose message',

export interface ISPList {
Title: string;
Id: string;
}

import { ISPList } from './ISPList';
export default class MockHttpClient {
private static _items: ISPList[] = [
{ Title: 'Mock List 1', Id: '1' },
{ Title: 'Mock List 2', Id: '2' },
];
public static get(restUrl: string, options?: any): Promise<ISPList[]> {
return new Promise<ISPList[]>((resolve) => {
resolve(MockHttpClient._items);
});
}
}

import MockHttpClient from './MockHttpClient';
private _getMockListData(): Promise<ISPList[]> {
return MockHttpClient.get(this.context.pageContext.web.absoluteUrl)
.then((data: ISPList[]) => {
return data;
});
}
if (this.context.environment.type === EnvironmentType.Local) { this._getMockListData() }

private _getSharePointListData(): Promise<ISPList[]> {
return this.context.
spHttpClient.get(this.context.pageContext.web.absoluteUrl +
`/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
.then(response => {
return response.json();
})
.then(json => {
return json.value
}) as Promise<ISPList[]>;
}

private _getListData(): Promise<ISPList[]> {
if(Environment.type === EnvironmentType.Local) {
return this._getMockListData();
}
else {
return this._getSharePointListData();
}
}

{
"cdnBasePath": ""
}

https://publiccdn.sharepointonline.com/<TENANCY>.sharepoint.com/<your-CDN-origin-Id>
{
"cdnBasePath": "https://publiccdn.sharepointonline.com/<TENANCY>.sharepoint.com/<your-CDN-origin-Id>"
}

protected get getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
}),
PropertyPaneLabel('labelField', {
text: 'Label text'
})
]
}
]
}
]
};
}

{
"$schema": "../../../node_modules/@microsoft/sp-module-
interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"id": "b64ff4a0-5f1c-4cd9-b959-613a0a6d95c9",
"alias": "HelloWorldWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"preconfiguredEntries": [{
"groupId": "b64ff4a0-5f1c-4cd9-b959-613a0a6d95c9",
"group": { "default": "Under Development" },
"title": { "default": "HelloWorld" },
"description": { "default": "HelloWorld description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "HelloWorld"
}
}]
}

public render(): void {
const element: React.ReactElement<IHelloWorldWebPartProps> = React.createElement(HelloWorldComponent, {
description: this.properties.description
});
ReactDom.render(element, this.domElement);
}

public componentDidMount(): void {
this.doSomething(this.props.description);
}
public componentDidUpdate(prevProps: IHelloWorldWebPartProps, prevState: IHelloWorldWebPartState):
void {
if (this.props.description !== prevProps.description) {
this.doSomething(this.props.description);
}
}
private doSomething(description: string): void {
// Do something with the property
}

built with the React framework.
• Reusable patterns
• Used in Office products
http://dev.office.com/fabric#/components

Fabric React
Robust, up-to-date
components built
with the React
framework.
Fabric JS
Simple, visuals-
focused components
that you can extend,
rework, and build on.
ngFabric
Community-driven
project to build
components for
Angular-based apps.
Fabric iOS
Native Swift colors,
type ramp, and
components for
building iOS apps.

https://github.com/OfficeDev/Office-UI-Fabric-React/releases
https://github.com/OfficeDev/Office-UI-Fabric-React

http://dev.office.com/fabric#/get-started#react
https://github.com/OfficeDev/Office-UI-Fabric-React

Install the Fabric React NPM package
npm --save install office-ui-fabric-react
Import components
import {
Button,
ButtonType
} from 'office-ui-fabric-react';
Use components in the Render method
public render(): JSX.Element {
return (
<Button buttonType={ ButtonType.primary }>ADD NEW ACTIVITY</Button>

Type Styles for text elements
<span className="ms-fontColor-neutralDark ms-font-xxl ms-fontWeight-
semibold">ACTIVITIES</span>
Icons
const contextualMenuItems: Array<IContextualMenuItem> = [];
contextualMenuItems.push({
key: 'Sort',
name: 'Sort',
icon: 'sortLines',

.menubutton{
display: none;
position: relative;
border-width: 1px;
border-style: solid;
padding: 16px 20px;
margin-bottom: 9px;
}
.menubutton > i{
position: absolute;
right: 10px;
top: 13px;
}
<div className={css("ms-fontColor-neutralSecondaryAlt ms-font-xl ms-fontWeight-semibold",
styles.menubutton)}>

�ݺ�ߣ

Sharepoint framework nivel avanzado

More Related Content

Sharepoint framework nivel avanzado

Editor's Notes