Dotyczy wersji 2020.1.x; autor: Michał Kastelik
Wprowadzenie
Rozszerzenia SharePoint Framework są komponentami występującymi po stronie klienta, które działają w kontekście strony SharePoint. Można je wdrażać w środowisku SharePoint Online, a do ich tworzenia wykorzystywać narzędzia i biblioteki JavaScript.
Poniższy artykuł przedstawia metody uruchamiania obiegu WEBCON BPS z biblioteki SharePoint z wykorzystaniem rozszerzenia „ListView Command Set”.
Przygotowanie narzędzi
W pierwszym kroku należy przygotować środowisko developerskie (w instrukcji opisano konfigurację w systemie Windows 10). Istnieje możliwość instalacji opisanych poniżej narzędzi także w systemie Mac OS X.
Minimalne, wymagane elementy potrzebne do instalacji to:
- NodeJS LTS version 10 – najwyższa aktualnie wersja wspierana przez SharePoint Framework (rozwiązanie działa tylko z tą wersją)
- Visual Studio Code – lub dowolny inny zaawansowany edytor kodu
- Yeoman oraz gulp
- Yeoman SharePoint generator
Po pobraniu oraz zainstalowaniu NodeJS, rozszerzenie gulp, Yeoman oraz SharePoint generator można zainstalować wykorzystując komendy w PowerShell:
npm install -g yo gulp
npm install -g @microsoft/generator-sharePoint
Wygenerowanie szablonu rozszerzenia
Pierwszym krokiem jest wygenerowanie szablonu rozwiązania. Należy utworzyć folder rozwiązania (np. c:\StartBPS) i uruchomić w tym folderze generator Yeoman za pomocą komendy:
PS C:\StartBPS> yo @microsoft/sharePoint
Zostanie wyświetlony komunikat początkowy generatora oraz pierwsze pytanie.
Poniżej przedstawiono wszystkie pytania i wymagane domyślne odpowiedzi:
| What is your solution name? | StartBPS (dowolna nazwa) |
| Which baseline packeges do you want to target for your component(s)” | SharePoint Online only (latest) |
| Where do you want to place the files? | Use the current folder |
| Do you want to allow the tenant admin to choice the choice of being able to deploy the soluton to all sites immediately without running any feature deployment or adding apps in sites? | N |
| Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? | N |
| Which type of client-side component to create? | Extension\ListView Command Set |
| What is your Command Set name? | StartBPS |
| What is your Command Set description? | (dowolny opis) |
Całość procesu generowania kodu trwa kilkadziesiąt sekund, a jego zakończenie zostanie potwierdzone przez komunikat „Solution is created”.
Konfiguracja oraz testy dodatku
Na początku należy uruchomić edytor kodu za pomocą komendy:
PS C:\StartBPS> code .
Wygenerowany szablon rozwiązania należy podłączyć do własnego środowiska SharePoint Online.
Całość katalogu rozwiązania zostanie wyświetlona po lewej stronie edytora. Przejdź do folderu config i otwórz plik serve.json. W zmiennej „pageURL” wprowadź (w dwóch miejscach) adres listy SharePoint w której rozszerzenie ma być zainstalowane.
Następnie należy usunąć trzy pierwsze linijki tego pliku i zapisać zmiany. Aby przetestować wstępną konfigurację i wprowadzone zmiany, należy uruchomić terminal w edytorze i wpisać komendę:
PS C:\StartBPS> gulp serve
Zostanie otwarta domyślna przeglądarka internetowa w systemie oraz wyświetlony komunikat o zgodzie na uruchomienie skryptów. Potwierdź komunikat „Load debug scripts”.
Na wskazanej przez nas w konfiguracji liście SharePoint zostaną wyświetlone wygenerowane w szablonie komendy „Command One” oraz „Command Two”. „Command Two” jest wyświetlana zawsze, druga tylko po zaznaczeniu elementy listy.
Definiowanie startowania obiegu WEBCON BPS oraz przycisk otwierający portal WEBCON BPS
Do tej pory w wygenerowanym szablonie rozwiązania dokonano zmiany jedynie w jednym pliku serve.json i potwierdzono działanie wstępnej konfiguracji w środowisku SharePoint Online. W dalszej części artykułu opisano jak zmienić konfigurację komend na inne.
Aby dokonać zmian nazw wyświetlanych w menu należy zmodyfikować plik StartBpsCommandSet.manifest.json.
Element „COMMAND_1” jest wyświetlany po wybraniu elementu listy, w omawianym scenariuszu został on zmieniony na nazwę „Start workflow”. Drugi element „COMMAND_2” będzie pełnił rolę linka otwierającego WEBCON BPS Portal.
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/command-set-extension-manifest.schema.json",
"id": "d345c29f-e63d-41d0-81e6-4f140daae807",
"alias": "StartBpsCommandSet",
"componentType": "Extension",
"extensionType": "ListViewCommandSet",
"version": "*",
"manifestVersion": 2,
"requiresCustomScript": false,
"items": {
"COMMAND_1": {
"title": { "default": "Start workflow" },
"iconImageUrl": "icons/request.png",
"type": "command"
},
"COMMAND_2": {
"title": { "default": "WEBCON BPS Portal" },
"iconImageUrl": "icons/cancel.png",
"type": "command"
}
}
}
Kod jaki jest wykonywany po kliknięciu tych elementów jest zdefiniowany w pliku StartBpsCommandSet.ts w sekcji onExecute() znajdującej się na końcu pliku.
@override
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
switch (event.itemId) {
case 'COMMAND_1':
// Start workflow
// Generate Document Link
const absoluteUrl:string = this.context.pageContext.site.absoluteUrl;
const docBPSName:string = event.selectedRows[0].getValueByName('FileLeafRef');
const docBPSID:string = event.selectedRows[0].getValueByName('ID')
const docRelativeUrl:string = event.selectedRows[0].getValueByName('FileRef');
const docShareUrl = absoluteUrl + docRelativeUrl
//
window.open("https://presentation.webconbps.com/BPSPortal/db/1/app/71/start/wf/145/dt/148/form?com_id=2&AttText1=" + docBPSName + "&AttText4=" + docBPSID + "&AttText3=" + docShareUrl);
break;
case 'COMMAND_2':
// Open WEBCON BPS Portal
window.open("https://presentation.webconbps.com/BPSPortal/");
break;
default:
throw new Error('Unknown command');
}
}
}
Po uruchomieniu kodu rozszerzenia na wskazanej w konfiguracji bibliotece SharePoint pojawi się opcja „Start workflow”, która startuje zdefiniowany wcześniej elektroniczny obieg dokumentów po wybraniu elementu listy.
Oprócz tego będzie widoczny element „WEBCON BPS Portal” otwierająca stronę główną platformy.
Po zaznaczeniu dokumentu oraz wybraniu „Start workflow”, w nowej zakładce przeglądarki pojawi się wystartowany obieg dokumentów wraz z uzupełnionymi polami zawierającymi nazwę pliku (w polu Name) , ID elementu (w polu ID) oraz pełną ścieżkę do pliku (w polu Item URL).
Całość rozwiązania opisana w artykule przedstawia wycinek możliwości wykorzystania SharePoint Framework Extensions. Posiadając jednak nawet podstawowe umiejętności programistyczne oraz modyfikując zaledwie 3 pliki można rozszerzyć możliwości listy SharePoint Online i powiązać je z WEBCON BPS.
Więcej informacji na temat rozwiązania można znaleźć pod następującym linkiem:
