Generate strongly-typed models from SharePoint lists in TypeScript.
- Prerequisites
- Supported SharePoint Versions
- Installation
- Getting Started
- Usage
- Config
- Code Generation
- Authentication
- Node Environment
- IE10 Support
- License
- Node 6.9.0+
- NPM 3+
- SharePoint Online
- SharePoint 2016
- SharePoint 2013
Install sp-entity cli globally
npm install -g @sp-entity/cli
Add sp-entity as a dependency in project
npm install @sp-entity/entity --save
# login to sharepoint site
spe login
# generate dataContext folder with default sp-entity config
cd {project folder}/src
spe init
# generate entity classes
spe ./dataContext/spe.config.json
import { DataContext } from './dataContext/dataContext'; // generated by sp-entity
import { EmployeeItem } from './dataContext/employee'; // generated by sp-entity
// initialize dataContext with default params (webUrl: _spPageContextInfo.webAbsoluteUrl)
const dataContext: DataContext = new DataContext();
dataContext.employee.get(1).then((employee: EmployeeItem) => {
console.log(`${employee.firstName} ${employee.lastName}`); // Steve Rogers
});
The following usage examples are based on sample generated code below.
dataContext.employee.get(1).then((employee: EmployeeItem) => {
console.log(employee);
});
/* Output
{
id: 1,
title: 'Mr',
firstName: 'Steve',
lastName: 'Rogers',
officeId: 1,
active: false,
skills: ['TypeScript', 'SharePoint'],
created: '2018-01-01T00:00:00Z',
createdById: 6
...
} */
dataContext.employee.create({
active: true,
title: 'Mr',
firstName: 'Steve',
lastName: 'Rogers',
officeId: 1
});
const employee: EmployeeItem = await dataContext.employee.get(1);
employee.officeId = 5; // update office lookup
employee.skills = ['TypeScript', 'SharePoint']; // update skills
dataContext.employee.update(employee); // commit changes
// or
dataContext.employee.update({
id: 1, // id property is required for updates
officeId: 5,
skills: ['TypeScript', 'SharePoint']
});
dataContext.employee.delete(1);
dataContext.employee.query().then((employees: Array<EmployeeItem>) => {
// ...
});
// entity.fields property holds a map to list fields' internal names
// using es6's object destructuring to get a reference to fields used in code
const { id, firstName, lastName, active, created } = dataContext.employee.fields;
const employees: Array<EmployeeItem> = await dataContext.employee.query({
$select: [id, firstName, lastName],
$filter: `${active} eq 1`,
$orderby: { orderBy: created, ascending: false }
});
// office is a property mapped from a lookup field
const { id, firstName, lastName, office } = dataContext.employee.fields;
const employees: Array<EmployeeItem> = await dataContext.employee.query({
// $select: ['Id','First_x0020_Name','Last_x0020_Name','Office/City','Office/Country']
$select: [id, firstName, lastName, office.city, office.country],
// $expand: ['Office']
$expand: [office.$name] // $name property holds a lookup's internal name
});
import { SpEntityPaged } from '@sp-entity/entity';
import { DataContext } from './dataContext/dataContext';
import { EmployeeFields, EmployeeItem } from './dataContext/employee';
const dataContext: DataContext = new DataContext();
const { active } = dataContext.employee.fields;
let employeesPaged: SpEntityPaged<EmployeeFields, EmployeeItem>;
employeesPaged = await dataContext.employee.queryPaged({ $filter: `${active} eq 1`, $top: 5 /* page size */ });
console.log(employeesPaged.page); // 0
employeesPaged = await employeesPaged.getNext();
console.log(employeesPaged.page); // 1
employeesPaged = await employeesPaged.getNext();
console.log(employeesPaged.page); // 2
employeesPaged = await employeesPaged.getPrev();
console.log(employeesPaged.page); // 1
employeesPaged = await employeesPaged.getPrev();
console.log(employeesPaged.page); // 0
const employees: Array<EmployeeItem> = employeesPaged.items;
...
import { DataContext } from './dataContext/dataContext'; // generated by sp-entity
import { EmployeeItem } from './dataContext/employee'; // generated by sp-entity
export default class SpEntitySampleWebPart extends BaseClientSideWebPart<ISpEntitySampleWebPartProps> {
private employees: Array<EmployeeItem>;
public async onInit(): Promise<void> {
// initialize dataContext with spfx context web url
const dataContext: DataContext = new DataContext(this.context.pageContext.web.absoluteUrl);
this.employees = await dataContext.employee.query();
}
private renderEmployees(): string {
return this.employees
.map((employee: EmployeeItem) => `<div>${employee.firstName} ${employee.lastName} works at ${employee.office.city}, ${employee.office.country} office</div>`)
.join('')
}
...
}
spe init command generates an spe.config.json file with all visible SharePoint lists in currently logged in site. Update config file to only include lists required in project and update their entityName if necessary, e.g.
{
"entities": [
{
"entityName": "Employee",
"listName": "Employees"
},
{
"entityName": "Office",
"listName": "Offices"
}
}
An odataVerbose flag is automatically added to generated config and set to true for all sp2013 environments. You may remove this flag if your 2013 environment is updated to SP1 and supports JSON light. Read this post for more information.
Running spe command generates a folder for each entity in the config.
The sample config above generates the following folder structure:
- dataContext
- employee
- employeeFields.interface.ts
- employeeFields.ts
- employeeItem.ts
- office
- officeFields.interface.ts
- officeFields.ts
- officeItem.ts
- dataContext.ts
- spe.config.json
- employee
An {entityName}Fields.ts file is generated with mappings for default fields in the list returned by SharePoint's rest API. You may modify the file by adding/removing field mappings, updating property names and adding/removing expand fields for lookups (e.g. office.city and office.country).
Make sure to run spe tool after modifying this file to automatically update related interfaces.
import { EmployeeFields } from './employeeFields.interface';
export const employeeFields: EmployeeFields = {
active: 'Active',
created: 'Created',
// each lookup field in the list is mapped to two properties:
// an expand property with id and title mappings by default
createdBy: { $name: 'Author', id: 'Id', title: 'Title' },
// and an id property
createdById: 'AuthorId',
firstName: 'First_x0020_Name',
id: 'Id',
lastName: 'Last_x0020_Name',
// city and country mappings have been added manually here
office: { $name: 'Office', id: 'Id', title: 'Title', city: 'City', country: 'Country' },
officeId: 'OfficeId',
picture: 'Picture',
permissions: 'EffectiveBasePermissions',
skills: 'Skills',
title: 'Title'
};
import { iso8601Date, SpBasePermissions, SpUrlValue } from '@sp-entity/entity';
export interface EmployeeItem {
active: boolean;
readonly created: iso8601Date;
readonly createdBy: { id: number, title: string };
readonly createdById: number;
firstName: string;
readonly id: number;
lastName: string;
readonly office: { city: string, country: string, id: number, title: string };
officeId: number;
readonly permissions: SpBasePermissions;
picture: SpUrlValue;
skills: Array<string>;
title: string;
}
import { SpEntity } from '@sp-entity/entity';
import { EmployeeFields, employeeFields, EmployeeItem, employeeListName } from './employee';
import { OfficeFields, officeFields, OfficeItem, officeListName } from './office';
export class DataContext {
public readonly employee: SpEntity<EmployeeFields, EmployeeItem>;
public readonly office: SpEntity<OfficeFields, OfficeItem>;
public constructor(webUrl?: string) {
this.employee = new SpEntity(employeeListName, employeeFields, webUrl);
this.office = new SpEntity(officeListName, officeFields, webUrl);
}
}
spe login and spe logout commands can be used to store/delete encrypted credentials for context sharepoint site. Using spe cli without logging in first will prompt for credentials every time.
Login wizard is provided by the following awesome libraries:
- node-sp-auth by Sergei Sergeev @s-KaiNet
- node-sp-auth-config by Andrew Koltyakov @koltyakov
In order to use sp-entity in a node environment, a fetch client factory must be provided using setup method
Install pnp-auth dependency
npm install pnp-auth --save
Setup sp-entity's fetchClientFactory
import { setup } from '@sp-entity/entity';
import { IAuthOptions } from 'node-sp-auth';
import NodeFetchClient from 'pnp-auth/lib/NodeFetchClient';
const siteUrl: string = 'https://contoso.sharepoint.com/sites/example';
const authOptions: IAuthOptions = {
username: '[email protected]',
password: 'password'
};
setup({
fetchClientFactory: () => {
return new NodeFetchClient(authOptions, siteUrl) as GlobalFetch;
}
});
const dataContext: DataContext = new DataContext();
...
Following polyfills are required for using sp-entity in IE10
This is not required for SPFx projects as they include above polyfills by default
MIT