@cleavelandprice/sharepoint NPM

@cleavelandprice/sharepoint

Sharepoint is an Angular 12+ library providing foundational functionality to Cleaveland/Price applications. The library facilitates the consumption of SharePoint data within Angular applications. However, the actual work of communicating directly with SharePoint servers is accomplished in backend server APIs. This library calls server APIs that, in turn, communicate with SharePoint to read/write the appropriate data and return it to the consuming application.

Installation

To install this library, run:

$ npm install @cleavelandprice/sharepoint

Consuming Sharepoint

After installing the Sharepoint package, the sharepoint module must be imported in your AppModule file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { SharepointModule } from '@cleavelandprice/sharepoint';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    SharepointModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The SharePointModule provides a service that can be used to retrieve data from SharePoint. Built-in methods allow for quick retrieval of employee photos, people (employees with SharePoint accounts), and customer visits. Photos and customer visits come directly from SharePoint lists. Methods are provided to retrieve them because they are commonly needed in many applications. However, you can retrieve data from any list on any SharePoint site by constructing a SharePointList request value and passing it to the getListItems() method.

import { SharePointService,
  SharePointList,
  SharePointPerson,
  SharePointPicture,
  SharePointEmployeePicture,
  SharePointCustomerVisit,
  SharePointListItem
} from '@cleavelandprice/sharepoint';

@Component({
  selector: 'app-sharepoint',
  template: `
<div *ngIf="documents">
  <h1>Documents</h1>
    <div *ngFor="let doc of documents">
      <div>{{ doc.ows_Title }}</div>
    </div>
</div>

<div *ngIf="visits">
  <h1>Customer Visits</h1>
  <div *ngFor="let visit of visits">
    <div>{{ visit.ows_Title }}</div>
    {{ visit.ows_EventDate | date:'shortDate' }}
  </div>
</div>

<div *ngIf="people">
  <h1>People on SharePoint</h1>
  <div *ngFor="let person of people">
    <div>{{ person.displayName }}</div>
    <div>{{ person.department }} </div>
    <div>{{ person.accountName }}</div>
  </div>
</div>

<div *ngIf="photos">
  <h1>Employee Photos from SharePoint - with hover tooltips</h1>
  <img *ngFor="let photo of photos" [src]="photo | sharePointPhotoUrl" alt="" [title]="photo.ows_Title">
</div>

  `
})
export class SharePointComponent implements OnInit {
  photos: SharePointEmployeePicture[];
  people: SharePointPerson[];
  visits: SharePointCustomerVisit[];
  documents: SharePointListItem[]; // retrieved via a custom request

  // Inject the SharePointService into this component
  constructor(private sharepointService: SharePointService) { }

  ngOnInit() {
    this.getCustomerVisits();
    this.getPeople();
    this.getPhotos();
    this.getDocuments();
  }

  private getCustomerVisits(): void {
    this.sharepointService.getCustomerVisits()
      .subscribe(data => this.visits = data);
  }

  private getPeople(): void {
    this.sharepointService.getPeople(true)
      .subscribe(data => this.people = data);
  }

  private getPhotos(): void {
    this.sharepointService.getPhotos(true)
      .subscribe(data => this.photos = data);
  }

  private getDocuments(): void {
    // Define a SharePointList to be used in the request
    // NOTE: the 'site' property is only needed if the library exists in a subsite (different Url than the one used to configure the service)
    const list: SharePointList = {
      list: 'Documents',
      view: 'All Documents',
      site: 'http://MySharePointSiteUrl'
    };

    this.sharepointService.getListItems(list)
      .subscribe(data => this.documents = data);
  }
}