Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/wassim-k/sp-entity

Generate strongly-typed models from SharePoint lists in TypeScript
https://github.com/wassim-k/sp-entity

entity framework list model office365 paging sharepoint spfx typescript

Last synced: 9 months ago
JSON representation

Generate strongly-typed models from SharePoint lists in TypeScript

Awesome Lists containing this project

README 

          
# sp-entity



Generate strongly-typed models from SharePoint lists in TypeScript.



## Table of Contents



* [Prerequisites](#prerequisites)

* [Supported SharePoint Versions](#supported-sharepoint-versions)

* [Installation](#installation)

* [Getting Started](#getting-started)

* [Usage](#usage)

    * [Get](#get)

    * [Create](#create)

    * [Update](#update)

    * [Delete](#delete)

    * [Query](#query)

    * [Query with params](#query-with-params)

    * [Query with $expand](#query-with-expand)

    * [Query with paging](#query-with-paging)

    * [SPFx Web Part](#spfx-web-part)

* [Config](#config)

* [Code Generation](#code-generation)

* [Authentication](#authentication)

* [Node Environment](#node-environment)

* [IE10 Support](#ie10-support)

* [License](#license)



## Prerequisites



* Node 6.9.0+

* NPM 3+



## Supported SharePoint Versions



* SharePoint Online

* SharePoint 2016

* SharePoint 2013



## Installation



Install sp-entity cli globally

```bash

npm install -g @sp-entity/cli

```



Add sp-entity as a dependency in project

```bash

npm install @sp-entity/entity --save

```



## Getting Started



### CLI



```bash

# 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

```

### Code



```typescript

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

});

```



## Usage



The following usage examples are based on [sample generated code](#sample-generated-code) below.



### Get



```typescript

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

    ...

} */

```



### Create



```typescript

dataContext.employee.create({

    active: true,

    title: 'Mr',

    firstName: 'Steve',

    lastName: 'Rogers',

    officeId: 1

});

```



### Update



```typescript

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']

});

```



### Delete



```typescript

dataContext.employee.delete(1);

```



###



### Query



```typescript

dataContext.employee.query().then((employees: Array) => {

    // ...

});

```



### Query with params



```typescript

// 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 = await dataContext.employee.query({

    $select: [id, firstName, lastName],

    $filter: `${active} eq 1`,

    $orderby: { orderBy: created, ascending: false }

});

```



### Query with $expand



```typescript

// office is a property mapped from a lookup field

const { id, firstName, lastName, office } = dataContext.employee.fields;



const employees: Array = 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

});

```



### Query with paging



```typescript

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;



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 = employeesPaged.items;

...

```



### SPFx Web Part



```typescript

import { DataContext } from './dataContext/dataContext'; // generated by sp-entity

import { EmployeeItem } from './dataContext/employee'; // generated by sp-entity



export default class SpEntitySampleWebPart extends BaseClientSideWebPart {



  private employees: Array;



  public async onInit(): Promise {



    // 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) => `
${employee.firstName} ${employee.lastName} works at ${employee.office.city}, ${employee.office.country} office
`)

      .join('')

  }



  ...

}

```



## Config

**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.

```javascript

{

    "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](http://www.spdoctor.net/Home/Article/using-json-light-in-sharepoint-server-2013) for more information.



## Code Generation



Running **spe** command generates a folder for each entity in the config.



The [sample config](#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



### Sample Generated Code



#### employeeFields.ts *(auto-generated)*

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.

```typescript

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'

};

```



#### employeeItem.ts *(auto-generated)*

```typescript

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;

    title: string;

}



```



#### dataContext.ts *(auto-generated)*

```typescript

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;

    public readonly office: SpEntity;



    public constructor(webUrl?: string) {



        this.employee = new SpEntity(employeeListName, employeeFields, webUrl);

        this.office = new SpEntity(officeListName, officeFields, webUrl);

    }

}

```



## Authentication

**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](https://github.com/s-KaiNet/node-sp-auth) by Sergei Sergeev [@s-KaiNet](https://github.com/s-KaiNet)

* [node-sp-auth-config](https://github.com/koltyakov/node-sp-auth-config) by Andrew Koltyakov [@koltyakov](https://github.com/koltyakov)



## Node Environment

In order to use sp-entity in a node environment, a fetch client factory must be provided using **setup** method



Install [pnp-auth](https://github.com/SharePoint-NodeJS/pnp-auth) dependency



```bash

npm install pnp-auth --save

```



Setup sp-entity's **fetchClientFactory**



```typescript

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: 'user@contoso.onmicrosoft.com',

    password: 'password'

};



setup({

    fetchClientFactory: () => {

        return new NodeFetchClient(authOptions, siteUrl) as GlobalFetch;

    }

});



const dataContext: DataContext = new DataContext();

...

```



## IE10 Support

Following polyfills are required for using sp-entity in IE10



* [es6-promise](https://github.com/stefanpenner/es6-promise)

* [whatwg-fetch](https://github.com/github/fetch)



> This is not required for SPFx projects as they include above polyfills by default



## License

MIT