Dotyczy wersji 2020.1.3.x autor: Agnieszka Burda

 

Wprowadzenie

Poniższy artykuł stanowi rozszerzenie do artykułu Atrybut typu HTML dostępnego pod linkiem: https://kb.webcon.pl/atrybut-typu-html/.

Kontrolki HTML to rozwiązanie dostępne od wersji WEBCON BPS 2020.1.3. Pozwalają one na wykorzystanie wszelkich znaczników przewidzianych dla języka HTML. Po dodaniu nowego atrybutu tego typu, w jego konfiguracji zaawansowanej należy wpisać kod, który chcielibyśmy zobaczyć na stronie.

Rys.1. Konfiguracja zaawansowana kontrolki HTML

 

W oknie konfiguracji w sekcji Values dostępne są gotowe funkcje JavaScript. Nie wszystkie są widoczne od razu. Pojawiają się dopiero wtedy, gdy do procesu zostanie dodany atrybut, którego dotyczą. Przykładowo, jeśli nie mamy na formularzu żadnej grupy atrybutów, to funkcje jej dotyczące nie będą widoczne do wyboru.

W poniższym artykule przedstawiono kilka podstawowych funkcji JavaScript, za pomocą których można skonfigurować działanie kontrolki. Są to:

• Ustaw i Pobierz
• Ukryj i Pokaż
• Zablokuj i Odblokuj
• Zwiń i Rozwiń

Każda z nich jest wykonywana w momencie kliknięcia utworzonego przycisku.

 

Funkcje Ustaw i Pobierz

Jedne z podstawowych funkcji JavaScript, jakie mamy do wyboru podczas konfigurowania kontrolki HTML, to Ustaw i Pobierz. Zazwyczaj wykorzystuje się je razem, pobierając wartość z jednego pola i ustawiając ją w innym.

Funkcje te możemy wykorzystać np. w przypadku dublowania się adresu odbiorcy i adresu rachunku w procesie Orders. Zamiast wpisywać dwa razy te same dane można skorzystać ze skonfigurowanego w tym celu przycisku.

Rys.2. Kontrolka Ustaw/Pobierz

 

Po kliknięciu przycisku Set as recipent, wartość pola Name and Surname w sekcji Billing address zostanie automatycznie przepisana do pola Name and Surname w sekcji Delivery address.

Rys. 3.Działanie kontrolki Ustaw/Pobierz

 

W celu utworzenia takiego przycisku, w Studio dodano nowy atrybuty typu kontrolka HTML, który skonfigurowano następująco:

Rys.4. Konfiguracja kontrolki Ustaw/Pobierz

 

Jak widać na powyższym zrzucie ekranu, w momencie kliknięcia przycisku (onclick) wykonywana jest akcja SetValue, która ustawia wartość pola Name and surname w sekcji Delivery address, jako pobraną wartość (GetValue) z pola Name and surname z sekcji Billing address.

Warto wiedzieć, że istnieje także możliwość wykorzystania ww. funkcji do uzupełniania większej liczby pól.

Rys.5. Kontrolka Ustaw/Pobierz dla wielu pól

 

Jeśli adres odbiorcy jest identyczny jak adres, na który wystawiany jest rachunek, to po kliknięciu przycisku Set as Delivery address odpowiednie pola zostają przepisane.

Rys.6. Działanie kontrolki Ustaw/Pobierz dla wielu pól

 

Od strony Studio, w konfiguracji kontrolki dodano kilka funkcji SetValue oddzielonych znakiem średnika.

Rys. 7. Konfiguracja kontrolki Ustaw/Pobierz dla wielu pól

 

Funkcje Ukryj i Pokaż

Kolejne przydatne funkcje, jakie może spełniać kontrolka HTML to ukrywanie i pokazywanie atrybutów lub grup. Przykładowo, gdy domyślnie widoczna sekcja z adresem odbiorcy będzie zawierać identyczne dane jak sekcja z adresem rachunku, to może ona zostać ukryta. Dzięki temu unikniemy powielania tych samych informacji i formularz będzie czytelniejszy.

Rys. 8. Kontrolka Ukryj adres odbiorcy

 

Na zrzucie powyżej widoczne są ww. sekcje oraz przycisk Hide Delivery address. Po jego naciśnięciu sekcja po prawej stronie zostanie ukryta. Funkcję można także wykorzystać do pojedynczych pól.

Rys. 9. Działanie kontrolki Ukryj adres odbiorcy

 

W Studio, w konfiguracji przycisku, dodano funkcję HideGroup, która wykonywana jest na kliknięcie.

Rys.10. Konfiguracja kontrolki Ukryj adres odbiorcy

 

Gdyby funkcja miała ukrywać pojedyncze pole zamiast funkcji HideGroup należałoby wykorzystać funkcję HideField.

W przypadku, gdy sekcja Adres odbiorcy jest ukryta, ale różni się on od adresu rachunku, należy stworzyć kontrolkę Show Delivery address.

Rys. 11. Kontrolka Pokaż adres odbiorcy

 

Po kliknięciu jej, ukryta wcześniej sekcja znów będzie widoczna.

Rys.12. Działanie kontrolki Pokaż adres odbiorcy

 

W Studio, w konfiguracji przycisku, dodano funkcję ShowGroup, która wykonywana jest w momencie kliknięcia.

Rys.13. Konfiguracja kontrolki Pokaż adres odbiorcy

 

Gdyby funkcja miała pokazać pojedyncze pole zamiast funkcji ShowGroup należałoby wykorzystać funkcję ShowField.

 

Funkcje Zablokuj i Odblokuj

Kolejne przydatne funkcje, jakie oferują nam kontrolki HTML to blokowanie i odblokowywanie pól. Blokowanie może być wykorzystywane w sytuacji, gdy użytkownik nie chce, by dany atrybut był w trybie edycji, a jedynie w trybie tylko do odczytu.

Rys.14. Działanie kontrolki Zablokuj Adres odbiorcy

 

W Studio, w konfiguracji kontrolki HTML wykorzystano funkcję DisableControl.

Rys.15. Konfiguracja kontrolki Zablokuj Adres odbiorcy

 

Odwrotne działanie przyniesie wykorzystanie funkcji odblokowania, dzięki której pola w trybie tylko do odczytu będzie można edytować.

Rys.16. Działanie kontrolki Odblokuj Adres odbiorcy

 

W Studio, w konfiguracji kontrolki HTML wykorzystano funkcję EnableControl.

Rys.17. Konfiguracja kontrolki Odblokuj Adres odbiorcy

 

Funkcje Zwiń i Rozwiń grupę

Kolejnym ciekawym rozwiązaniem jest możliwość zwijania i rozwijania grup. Pierwszą z tych funkcji można wykorzystać w omówionej już w punkcie 2 i 3 sytuacji, tj.: w przypadku dublowania się danych w różnych sekcjach. Dzięki ukryciu grupy formularz staje się bardziej czytelny i przejrzysty. Ponadto zawiera jedynie najpotrzebniejsze informacje.

Rys.18. Kontrolka Zwiń Adres odbiorcy

 

Po kliknięciu kontrolki Collapse Delivery address, atrybuty sekcji nie będą widoczne. Pozostanie jedynie sama nazwa, co będzie dla użytkownika sygnałem, że jest jeszcze jedna grupa, którą ewentualnie można uzupełnić.

Rys.19. Działanie kontrolki Zwiń Adres odbiorcy

 

W konfiguracji sekcji istnieje także możliwość ukrycia nazwy wyświetlanej. W takim przypadku, podczas zwijania jej z wykorzystaniem kontrolki HTML, nazwa także nie będzie widoczna.

W celu skonfigurowania przycisku dodano w jego Konfiguracji zaawansowanej funkcję CollapseGroup, która wykonywana jest w momencie kliknięcia.

Rys.20. Konfiguracja kontrolki Zwiń Adres odbiorcy

 

W sytuacji, gdy lista jest domyślnie zwinięta lub została zwinięta za pomocą przycisku, ale jednak wymaga uzupełnienia należy wykorzystać funkcję Rozwiń grupę.

Rysunek 21 – Kontrolka Rozwiń Adres odbiorcy

 

Po kliknięciu dedykowanego przycisku, zwinięta uprzednio sekcja zostanie rozwinięta.

Rys.22. Działanie kontrolki Rozwiń Adres odbiorcy

 

W Studio, w konfiguracji kontrolki HTML wykorzystano funkcję ExpandGroup.

Rys.23. Konfiguracja kontrolki Rozwiń Adres odbiorcy

 

Warto pamiętać, że aby sterować rozwijaniem i zwijaniem sekcji, należy w jej konfiguracji zaawansowanej ustawić odpowiedni Tryb działania. Jeżeli pozostawimy domyślnie ustawiony Brak zwijania, to kontrolka HTML nie będzie działać.

Rys.24. Konfiguracja grupy atrybutów

 

Podsumowanie

Wymienione w artykule funkcje JavaScript dla kontrolki HTML nie są jedynymi, a jedynie najbardziej podstawowymi, jakie oferuje nam WEBCON BPS.  Pozwalają one w łatwy i szybki sposób kontrolować to, co dzieje się na formularzu. Warto także zauważyć, że dodanie takich przycisków sprawia, że formularz uzyskuje dużo ciekawszy wygląd.