W 2019 Microsoft zaproponował użytkownikom tworzenie własnych kontrolek znanych pod nazwą PCF (PowerApps Component Framework) lub Custom Components. Początkowo były obecne tylko w Model-Driven Apps, aktualnie są już dostępne w Canvas App oraz portalach (preview).
Niestandardowe kontrolki
Zastosowanie
Niestandardowe kontrolki mogą zostać użyte do zastąpienia domyślnych kontrolek na formularzach lub listach. Na przykład zamiast tradycyjnego pola na formularzu, w którym użytkownik powinien wpisać wartość liczbową w zakresie od 1 do 100, kontrolka użytkownika umożliwia wyświetlenie suwaka (slider), a więc rozwiązania znanego z aplikacji mobilnych. Więcej przykładów i możliwych zastosowań znajdziesz na stronie PCF Gallery.
Wyświetlanie na urządzeniach
Microsoft daje administratorom wybór na jakich urządzeniach ma zostać wyświetlona nowa wersja kontrolki.
W przypadku przeglądarki może być to standardowe pole, ale dla urządzeń mobilnych i tabletów możemy chcieć wyświetlić wspomniany slider.
Dostępność
Kontrolki dostępne są obecnie tylko w środowiskach online dla Unified Interface. Klienci wersji on-premises muszą na ten moment zadowolić się standardowymi kontrolkami lub dostarczonymi przez deweloperów skryptami (web resources).
Powody, dla których warto skorzystać z niestandardowych kontrolek
Dlaczego nie pozostać zatem przy tradycyjnych i sprawdzonych Web Resources? Oto kilka powodów:
- Czas renderowania – kontrolki niestandardowe ładowane są w tym samym czasie, co pozostałe kontrolki i w ramach tego samego kontekstu. Web Resources ładowane są później.
- Uniwersalność – odpowiednio przygotowana kontrolka może być użyta wielokrotnie w różnych formularzach i narzędziach (model-driven app, portals). Web Resources ograniczają się tylko do formularzy, natomiast nic nie stoi na przeszkodzie, aby wykorzystać kontrolkę przy renderowaniu listy rekordów (np. listy kontaktów).
- Zarządzanie – kontrolka importowana jest do środowiska jako rozwiązanie (zarządzane lub niezarządzane). Kiedy następuje moment przeniesienia dostosowań na środowisko testowe lub produkcyjne, wszystkie elementy składowe kontrolki takie jak Javascript, CSS, HTML są już zawarte w dostarczonym przez dewelopera rozwiązaniu.
- UX – kiedy do budowy kontrolki zostanie wykorzystany React, warto skorzystać z komponentów dostarczonych przez Fluent UI, na których opiera się nowa wersja Model-Driven Apps zwana Unified Interface. Zapewnia to spójność UX, przy jednoczesnym skróceniu czasu dewelopmentu.
Od czego zacząć?
Budowa podstawowych kontrolek nie jest skomplikowana, a dokumentacja Microsoft dostarcza kilka gotowych przykładów, które ułatwią deweloperowi rozpoczęcie pracy z PCF. Niezbędne jest przy tym pobranie aplikacji konsolowej Microsoft Power Platform CLI oraz wybór edytora tekstowego do dalszej pracy.
Wyborem naszego zespołu jest Visual Studio Code, natomiast każdy popularny edytor tekstowy powinien sobie poradzić.
Niestandardowa kontrolka budowana jest z wykorzystaniem języka Javascript i w zasadzie to wystarczy do tworzenia prostych kontrolek. Jednak w przypadku bardziej rozbudowanych i skomplikowanych zadań, warto skorzystać z pomocy React. React jest biblioteką, która przyspiesza pracę dewelopera poprzez zastosowanie gotowych komponentów i łatwiejsze zarządzenie stanem.
Prosta kontrolka – krok po kroku
Zainstaluj środowisko uruchomieniowe node.js – rekomendowana wersja LTS.
Pobierz Microsoft Power Platform CLI. To prosta aplikacja konsolowa do zarządzania komponentami Power Platform takimi jak rozwiązania, portale oraz kontrolki.
- Uruchom Visual Studio Code i przejdź do folderu dla kontrolki na swoim lokalnym dysku
- W oknie Terminal uruchom polecenie:
pac pcf init --namespace CustomerLinearInputControl --name LinearInputControl --template field
Powyższa komenda utworzy podstawową strukturę projektu, doda referencje do wymaganych bibliotek oraz wywoła polecenie npm install instalujące wymagane biblioteki w folderze node_modules.
- Wpisz komendę „npm start run”, aby wyświetlić podgląd komponentu w przeglądarce. Na tym etapie zobaczymy jedynie pusty ekran oraz pola do wprowadzania wartości początkowych.
- Zatrzymaj proces debugowania komendą Ctrl+C wywołaną z konsoli.
Wklej do pliku ControlManifest.Input.xml poniższy skrypt:
- Wklej do pliku index.ts poniższy kod odpowiedzialny za logikę kontrolki
- Zapisz wszystkie zmiany, a następnie utwórz nowy folder o nazwie „css” w lokalizacji LinearInputControl.
W tym nowym folderze utwórz plik LinearInputControl.css i wklej do niego poniższy kod, który będzie odpowiedzialny za wygląd kontrolki.
- Po zapisaniu zmian uruchom polecenia „npm run build” i „npm start watch”. Pierwsza komenda kompiluje i optymalizuje kod źródłowy oraz generuje kod wyjściowy w pliku bundle.js. Druga komenda uruchamia kontrolkę w trybie debugowania w oknie przeglądarki. Parametr „watch” sprawia po wprowadzeniu i zapisaniu zmian w kodzie podgląd kontroli w przeglądarce zostanie automatycznie odświeżony.
Podsumowanie
I tak oto powstała nasza pierwsza kontrolka. W następnym wpisie omówię strukturę projektu i role poszczególnych elementów.
***
Jeśli interesuje Cię dodawanie znaczników meta w standardowym nagłówku strony na Power Apps Portals, zajrzyj koniecznie do tego artykułu.
Zostaw komentarz