Featured

Własny webpart w SharePoint online

Sharepoint Hits: 307

Moim ostatnim wyzwaniem w pracy było stworzenie webparta dla SharePointa Online. Udało się i chciałbym podzielić się tym z Wami. Czasami prosty komunikat potrafi zmienić doświadczenie użytkownika. Pokażę Ci, jak stworzyć własny webpart w SharePoint Framework (SPFx), który przywita użytkownika po imieniu, np. „Witaj Jan Kowalski”.

Wymagania wstępne

  • Node.js (zalecana wersja LTS)
  • Yeoman i generator SPFx: 
    npm install -g yo @microsoft/generator-sharepoint
  • SharePoint Online lub środowisko deweloperskie
  • Visual Studio Code

1. Tworzenie projektu

yo @microsoft/sharepoint

Ustawienia:

  • Nazwa projektu: webpart-witaj
  • Typ: WebPart
  • Nazwa webparta: WitajUser
  • Framework: No JavaScript Framework (dla prostoty)

2. Edycja pliku WitajUserWebPart.ts

Zamień metodę render() na:

import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { sp } from "@pnp/sp/presets/all";

export interface IWitajUserWebPartProps {}

export default class WitajUserWebPart extends BaseClientSideWebPart<IWitajUserWebPartProps> {

  public async render(): Promise<void> {
    await this.loadPnP();

    const user = await sp.web.currentUser.get();
    const name = user.Title;

    this.domElement.innerHTML = `
      <div style="font-size: 24px; font-weight: bold;">
        Witaj ${name}!
      </div>`;
  }

  private async loadPnP(): Promise<void> {
    sp.setup({
      spfxContext: this.context
    });
  }
}

3. Instalacja PnPjs

npm install @pnp/sp @pnp/logging @pnp/common @pnp/odata

4. Testowanie

gulp serve

Otworzy się strona Twojego sharepointa, którą skonfigurujesz w \config\serve.json w zmiennej initialPage.

https://twojadomena.sharepoint.com/sites/twojastrona/_layouts/15/workbench.aspx

5. Kompilacja i przygotowanie paczki

Aby przygotować paczkę do wdrożenia w SharePoint Online:

gulp bundle --ship
gulp package-solution --ship

Plik .sppkg znajdziesz w folderze sharepoint/solution. Wdróż go do App Catalog i dodaj webpart do swojej strony SharePoint.

Podsumowanie

Masz już gotowy webpart, który wita użytkownika po imieniu. To świetna baza do tworzenia bardziej zaawansowanych, spersonalizowanych elementów interfejsu w SharePoint.