Atrybut typu Obrazek

WEBCON Redaktor Atrybuty,Formularze
Facebooktwitterpinterestlinkedinmail
Dotyczy wersji 2020.1.x; autor: Franciszek Sakławski

 

Wstęp

Podczas konfiguracji procesów biznesowych istnieje możliwość dodania do formularza logo lub obrazka – służy do tego atrybut typu Obrazek.

Konfiguracja atrybutu

W celu dodania obrazka na formularzu należy wybrać atrybut typu „Obrazek”:

Rys. 1. Konfiguracja atrybutu typu "Obrazek"

 

Dodawanie obrazka do dokumentu w WEBCON BPS jest proste i intuicyjne. Zgodnie z poniższym zrzutem ekranu wciśnięcie przycisku „Upload” skutkuje otwarciem okna wyboru pliku z dysku:

Rys.2 Dodawanie obrazka do formularza

 

Przedstawiony powyżej sposób jest jednym z trzech możliwości dodania obrazka:

  1. Wciśnięcie przycisku „Upload” oraz wybranie w oknie pliku ze swoim obrazem (Rysunek 2).
  2. Przeciągnięcie pliku w pole obrazka („Drag and drop”).
  3. Kliknięcie w pole oraz użycie skrótu klawiszowego Ctrl + V (pod warunkiem, że nasz obrazek jest w schowku).

Usunięcie dodanego obrazu jest możliwe za pomocą przycisku „Remove”. Należy wspomnieć, iż dodanie oraz usunięcie obrazka jest możliwe jedynie w przypadku gdy pole jest edycyjne. W przeciwnym wypadku przyciski „Upload” oraz „Remove” nie będą widoczne.

W konfiguracji zaawansowanej można ustawić cechy wyświetlanego obrazka:

Rys. 3. Konfiguracja zaawansowana

 

W ten sposób istnieje możliwość na przykład, zmniejszyć wielkość wyświetlanego obrazka:

Rys. 4. Zmiana wielkości obrazka

 

Dynamiczne wyświetlanie obrazka

WEBCON BPS Portal daje możliwość wyliczenia wartości obrazki w czasie rzeczywistym (bez potrzeby zapisu dokumentu).

W tym celu zdefiniowano obieg słownikowy przechowujący dane obrazka:

Rys. 5. Formatka słownika przechowującego dane obrazka

 

Należy tu wspomnieć, iż pole „Picture” jest wypełnione wartością base64 naszego obrazka. Base64 jest metodą kodowania transportowego, każdy obraz może być w ten sposób zakodowany. Wartość base64 obrazka można znaleźć w bazie danych, odwołując się do kolumny, w której przechowywany jest obrazek:

Rys. 6. Zapytanie wywołujące kod base64 obrazka

 

W wyżej opisany sposób dodano dwa elementy obiegu słownikowego, z czego każdy przechowuje logo naszej firmy. Jeden logo z czarną ramką a drugi bez ramki.

Rys. 7. Raport przechowujący elementy procesu słownikowego

 

Kiedy mamy już skonfigurowany obieg słownikowy, można przejść do uzupełniania pola.

W tym celu zdefiniowano na formularzu dwa pola:

  1. „Picture” – Pole przechowujące obrazek
  2. „Picture selection” – Pole wyboru z zestawem danych w postaci naszego obiegu słownikowego

W konfiguracji pola „Picture selection” wybieramy „Choice field”:

Rys. 8. Konfiguracja pola "Picture selection" – lewy panel

 

Następnie z prawej strony okna konfiguracji w polu „Data source” wybieramy „Data sources” -> „Dictionaries” -> Nasz wcześniej zdefiniowany słownik (w moim przypadku „Picture”).

W prawej dolnej części w polu „Behavior” wybieramy opcje „Autocomplete” oraz zaznaczamy tak jak na obiegu słownikowym pole „Value change will cause default values to be refreshed”:

Rys. 9. Konfiguracja pola "Picture selection" – prawy panel

 

Należy tu zaznaczyć, iż pole nie będzie odświeżało wszystkich ustawionych wartości domyślnych. Aby pole było brane pod uwagę, musi spełnić dwa warunki:

  1. Pole musi być puste – jeżeli w pole wpisana jest wartość, nie będzie rozpatrywane.
  2. Pole musi mieć zaznaczony checkbox „Set when refreshing default values”.

O wartościach domyślnych można więcej przeczytać w już opublikowanym artykule pod adresem: https://kb.webcon.pl/sposoby-konfiguracji-wartosci-domyslnych-atrybutow/

Biorąc pod uwagę powyższe, możemy skonstruować schemat działania naszego pola:

Rys. 10. Schemat działania pola "Picture selection"

 

Skonfigurujmy więc pole „Picture selection” w ten sposób, aby czyścił wartość pola „Picture”. W tym celu wejdźmy na zakładkę „Style and behavior” i w polu „Form rule to be executed on value change” wpiszmy niżej zdefiniowaną regułę:

Rys. 11. Reguła formularza zerująca pole "Obrazek"

 

Następnie należy przejść do konfiguracji pola „Picture”, aby ustalić wartość domyślną i zaznaczyć checkbox – „Set when refreshing default values”:

Rys. 12. Konfiguracja pola "Picture" – lewy panel

 

Korzystając z ikony trzech poziomych kropek, otwieramy edytor. W edytorze przejdź na zakładkę funkcji i z listy „Integration” wybierz opcję „SQL COMMAND”. Następnie umieść w nim poniższe zapytanie:

Rys. 13. Edytor zapytania SQL

 

W klauzuli SELECT należy wybrać pole, które przechowuje kod naszego obrazka, natomiast w klauzuli WHERE odnajdujemy element obiegu słownikowego, który odpowiada wybranej wartości z pola „Wybór obrazka”. Jak można zauważyć, powiązanie z elementem osiągam poprzez powiązanie numeru GUID (Global Unique Identifier). Jest to unikalny ciąg 32 znaków. Każdy element w systemie posiada swój własny GUID.

Przejdźmy więc na formularz i zweryfikujmy działanie:

Rys. 14. Prezentacja dynamicznego wypełniania

 

Pole z obrazkiem zmienia wartość, w zależności od tego, co wybrane jest w polu wyboru obrazka, co oznacza, że akcja została skonfigurowana prawidłowo.

Prezentacja obrazka na raporcie

W celu zamieszczenia obrazka na raporcie należy zdefiniować dodatkowe pole, w którym będzie umieszczony link do obrazka przechowującego jego cechy wyświetlania oraz zakodowaną wartość base64.

Przykładowy link można zobaczyć poniżej:

<img class="fit-width" src="TUTAJ BASE64 Z WARTOŚCIĄ OBRAZKA" alt="" title=""style="max-width:50%; max-height:50%;">

Przeanalizujmy pokrótce składowe linku:

  1. class="fit-width" – oznacza, że obrazek ma dopasować szerokość do kontenera, w którym jest przechowywany
  2. src="TUTAJ BASE64 Z WARTOŚCIĄ OBRAZKA" – src – source (źródło obrazu), w cudzysłowie zamieścimy wartość base64 naszego obrazka
  3. alt="" – służy do alternatywnego wyświetlenia wartości obrazka – jeżeli coś pójdzie nie tak przy wyświetlaniu właściwej zawartości. Zostawiamy puste, ponieważ wiemy, że w naszym przypadku obrazek na pewno się wyświetli.
  4. title="" – Po najechaniu na obrazek po krótkiej chwili wyświetli się tytuł obrazka – zostawiamy puste, ponieważ nie potrzebujemy takiej funkcjonalności.
  5. style="max-width:50%; max-height:50%;" – opisuje maksymalną wielkość obrazka na raporcie. W naszym przypadku zostawiamy 50% zarówno wertykalnie, jak i horyzontalnie.

Skoro wiemy, co oznaczają poszczególne parametry linku, można przejść do wypełnienia pola wartością. W tym celu należy utworzyć dodatkowe pole na obiegu słownikowym, w które po wybraniu obrazka wpiszę się nasz link.

Następnie należy przejść do WEBCON BPS Designer Studio i utwórz pole typu wiele wierszy tekstu, a następnie zdefiniuj regułę formularza wypełniającą go wartością linku. Na formularzu słownikowym zdefiniowano pole o nazwie „Picture – link”, następnie w polu „Picture” zdefiniowano regułę wykonywaną na zmianę wartości pola.

W edycji pola przechowującego obrazek należy przejść na zakładkę „Style and behavior”, a następnie zdefiniować regułę. Pamiętajmy, że tworząc reguły, możemy dodawać do siebie ciągi znaków poprzez użycie znaku „+” tak jak na poniższym screenie. Dodatkowo użyto wbudowanej funkcji „SET”, która pozwala na dynamiczne wypełnienie pola wartością.

Rys. 15. Reguła formularza

 

Dzięki wyżej zdefiniowanej regule, za każdym razem, gdy wartość pola „Picture” zostanie zmieniona, pole „Picture – link” zostanie wypełnione linkiem obrazu.

Rys. 16. Wypełnienie pola z linkiem

 

Gdy pole zostało poprawnie wypełnione, można przejść do konfiguracji raportu. Więcej o tworzeniu raportów można przeczytać w już istniejącym artykule https://kb.webcon.pl/raporty-konfiguracja-widoki-edycja/.

Gdy raport zostanie stworzony, należy do niego dodać kolumnę przechowującą nasz link.

Rys. 17. Konfiguracja raportu

 

Dla powyższej konfiguracji raport prezentuje się następująco:

Rys. 18. Raport z wylistowanym obrazkiem

 

Jak widzimy, obrazek wyświetlił się prawidłowo. Jeżeli chcielibyśmy by nasz obrazek był mniejszy, wystarczy w linku zmienić człon „style”:

Rys. 19. Zmiana członu "style"

 

Jak widać obrazek na raporcie zmniejszył swoje rozmiary.

Rys. 20. Raport ze zmniejszonym obrazkiem

 

Warto zauważyć, iż dynamicznie pole zostało wypełnione dwukrotnie – raz pole z obrazkiem, a raz z linkiem obrazka. W każdym przypadku posłużyliśmy się inną funkcjonalnością – w pierwszym przypadku wartością domyślną, zaś w drugim zdefiniowaniem reguły formularza przy zmianie wartości pola. Pokazuje to jak w różnorodne sposoby można podejść do podobnego problemu.

Podsumowanie

Dzięki poprawnie skonfigurowanym regułom formularza można w łatwy sposób manipulować obrazkami. Pomoże to uporządkować raporty i wpłynąć na przejrzystość prezentowanych danych.