Tworzenie własnego WebPartu w SharePoint Online: Kompletny przewodnik SPFx

Standardowe funkcje SharePoint Online Cię ograniczają? Czas przestać polegać na gotowcach i zacząć tworzyć inteligentne rozwiązania skrojone pod Twój biznes przy użyciu SharePoint Framework (SPFx).

W dzisiejszym IT personalizacja to podstawa. Przenosząc ten artykuł, skupiłem się na pokazaniu, jak w prosty sposób wyciągnąć dane zalogowanego użytkownika, korzystając z potężnej biblioteki PnPjs. Dzięki temu Twój WebPart będzie wyglądał nowocześnie i dynamicznie reagował na to, kto go przegląda.

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.

Krok 1: Parametry projektu

Podczas generowania projektu w terminalu (PowerShell lub CMD) za pomocą yo @microsoft/sharepoint, wybierz następujące ustawienia:

• Nazwa projektu: webpart-witaj
• Typ komponentu: WebPart
• Nazwa webparta: WitajUser
• Framework: No JavaScript Framework

Krok 2: Serce WebPartu – Metoda render()

W pliku WitajUserWebPart.ts implementujemy logikę pobierania danych użytkownika. Wykorzystujemy bibliotekę PnPjs, która drastycznie upraszcza komunikację z API SharePoint.

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
    });
  }
}

Krok 3: Instalacja PnPjs

Aby powyższy kod zadziałał, musisz doinstalować niezbędne pakiety. Uruchom w PowerShell lub Wierszu Polecenia następującą komendę:

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

Krok 4: Testowanie (gulp serve)

Czas sprawdzić efekty pracy w lokalnym środowisku. Wpisz w terminalu:

gulp serve

System otworzy przeglądarkę z adresem Twojego SharePointa, który skonfigurowałeś w pliku config/serve.json (zmienna initialPage). Adres Workbench wygląda następująco:

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

Krok 5: Kompilacja i przygotowanie paczki

Aby przygotować paczkę do wdrożenia w SharePoint Online, wykonaj w terminalu poniższe polecenia:

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

Gotowy 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 Online. Korzystanie z PnPjs oraz PowerShella/CMD do zarządzania projektem to fundament pracy nowoczesnego dewelopera M365.

Potrzebujesz profesjonalnego wsparcia przy wdrożeniu SharePoint?

Skonsultuj się ze mną – zoptymalizuję Twój biznes w chmurze