Wyślij zapytanie Dołącz do Sii

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.

Ryc. 1 Edycja ustawień pola dla kontrolki na formularzu
Ryc. 1 Edycja ustawień pola dla kontrolki na formularzu

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.

Ryc. 2 Kontrolka niestandardowa w Model Driven App
Ryc. 2 Kontrolka niestandardowa w Model Driven App

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).

Ryc. 3 Kontrolka niestandardowa w Canvas App
Ryc. 3 Kontrolka niestandardowa w Canvas App
Ryc. 4 Kontrolka niestandardowa w Power App Portal
Ryc. 4 Kontrolka niestandardowa w Power App Portal

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.

  1. Uruchom Visual Studio Code i przejdź do folderu dla kontrolki na swoim lokalnym dysku
  2. 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.

  1. 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.
  2. Zatrzymaj proces debugowania komendą Ctrl+C wywołaną z konsoli.

Wklej do pliku ControlManifest.Input.xml poniższy skrypt:

kod 1 - Komponenty niestandardowe w Power Apps

  1. Wklej do pliku index.ts poniższy kod odpowiedzialny za logikę kontrolkikod 2 - Komponenty niestandardowe w Power AppsKod 3 1 - Komponenty niestandardowe w Power Apps
  1. Zapisz wszystkie zmiany, a następnie utwórz nowy folder o nazwie „css” w lokalizacji LinearInputControl.
    Kod 5 - Komponenty niestandardowe w Power AppsKod 6 - Komponenty niestandardowe w Power Apps

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.

  1. 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.
Ryc. 5 Podgląd wersji roboczej kontrolki
Ryc. 5 Podgląd wersji roboczej kontrolki

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.

Ocena:
Autor
Avatar
Tomasz Michałowski

Na co dzień w programista w prawdopodobnie najlepszym zespole Microsoft Dynamics CRM w Polsce. Swoją przygodę z programowaniem rozpoczął od .Net. Mimo back-endowych korzeni, bardzo dobrze czuje się w pracy z Javascript, React i CSS. Uwielbia naprawianie i szukanie rozwiązań. Busy bee, który zrobi wszystko, aby tylko się nie nudzić. Poza pracą lubi długie wędrówki, naturę, jazdę na rowerze, naukę języków, kaletnictwo, dobry film i gotowanie.

Twój adres e-mail nie zostanie opublikowany.

Może Cię również zainteresować

Pokaż więcej postów

Bądź na bieżąco

Zapisz się do naszego newslettera i otrzymuj najświeższe informacje ze świata Sii.

Otrzymaj ofertę

Jeśli chcesz dowiedzieć się więcej na temat oferty Sii, skontaktuj się z nami.

Wyślij zapytanie Wyślij zapytanie

Get an offer

Natalia Competency Center Director

Dołącz do Sii

Znajdź idealną pracę – zapoznaj się z naszą ofertą rekrutacyjną i aplikuj.

APLIKUJ APLIKUJ

Join Sii

Paweł Process Owner

ZATWIERDŹ

This content is available only in one language version.
You will be redirected to home page.

Are you sure you want to leave this page?