Komponent DOCUMENT TYPE służy do tworzenia formularzy o bardziej rozbudowanych opcjach niż dodawanie, wyświetlanie i uaktualnianie danych. W komponencie Document Type istnieje możliwość zagnieżdżania innych elementów, m.in. takich jak przyciski (buttony) wywołujące określone akcje, czy funkcjonalne zestawienia (gridy).
Dodanie przycisków i zestawień do komponentu Document Type pozwala na rozbudowanie formularza i dostarczenie bardziej zaawansowanych funkcji i możliwości interakcji dla użytkowników. To daje większą elastyczność w projektowaniu i tworzeniu formularzy, które odpowiadają specyficznym potrzebom i wymaganiom biznesowym.
Stworzenie nowego dokumentu wymaga, aby programista musi utworzył w kodzie aplikacji szablon, który następnie wybiera się w polu TEMPLATE. Programista określa funkcjonalności przyszłego formularza, oraz pola w nim zawarte.
Formularz dopisania i edycji Photo Grid
Formularz służy do tworzenia nowych definicji oraz edycji już istniejących rekordów. Składa się on z następujących zakładek:
- BASIC
- VIEW
- SCRIPT
- FIELDS
- DICTIONARIES
- PARAMETERS
- FOOTER BUTTON
- ATTACHMENTS
- HEADER ITEMS
BASIC
Zakładka pozwala określić podstawowe cechy komponentu, wskazać Template w oparciu, o który budowany jest dokument. Można także łatwo aktywować gotowe elementy charakterystyczne dla tego typu komponentu.
Składa się z następujących pól konfiguracyjnych:
- CODE – nazwa dokumentu
- NAME – nazwa konfiguracyjna elementu, po której będzie można wyszukiwać go w innych komponentach
- DESCRIPRION – krótka charakterystyka, opis dokumentu i jego wykorzystania
- USE NOTES – określa czy na formularzu ma się wyświetlać tzw. menu hamburger z możliwością dodawania notatek
- USE FILES – czy na formularzu ma się wyświetlać tzw. menu hamburger z możliwością dodawania flików
- USE PHOTOS – czy na formularzu ma się wyświetlać tzw. menu hamburger z możliwością dodawania zdjęć
- USE ATTACHMENTS – czy na formularzu ma się wyświetlać tzw. menu hamburger z możliwością dodawania załączników
- USE DISSCUSSION – czy na formularzu ma się wyświetlać tzw. menu hamburger z możliwością prowadzenia prostych dyskusji dotyczących wątku
- TEMPLATE – szablon stworzony przez programistę w kodzie aplikacji
- RESET TEMPLATE – resetowanie szablonu
- PRX – kod, który ma za zadanie grupowanie elementów w logicznie lub biznesowo powiązane zbiory
- ACTIVE – oznaczenie czy dokument ma być aktywny, tzn. czy będzie widoczny w innych komponentach,
- SYSTEM – czy dokument ma być systemowy, tzn. czy jest elementem konfiguracji systemu
- LOCK ON USE – zabezpieczenie, która nie pozwala na edycję dokumentu przez dwóch (lub więcej) użytkowników w tym samym czasie
- SHOW CHANGE REASON MODAL – po zapisie dokumentu wyświetla okno wymagające podania powodu wprowadzenia zmian w dokumencie
VIEW
Zakładka odnosi się do ustawień dotyczących wyświetlania formularzy dla różnych trybów. Ustawienia uwzględniają tłumaczenia elementów dokumentu, w zależności od wyboru języku interfejsu użytkownika.
Zakładka składa się z następujących pół konfiguracyjnych:
Pola związane z tytułami:
- PL-PL FROM TITLE (ALL MODES) – tytuł okna dla wszystkich typów formularzy, gdy wybranym językiem aplikacji jest polski
- EN-EN FROM TITLE (ALL MODES) – tytuł okna dla wszystkich typów formularzy, gdy wybranym językiem aplikacji jest angielski
- PL-PL FROM TITLE (MODE: CREATE) –tytuł okna dla formularza tworzenia dokumentu, gdy wybranym językiem aplikacji jest polski
- EN-EN FROM TITLE (MODE: CREATE) – tytuł okna dla formularza tworzenia dokumentu, gdy wybranym językiem aplikacji jest angielski
- PL-PL FROM TITLE (MODE: UPDATE) – tytułokna dla formularza edycji dokumentu, gdy wybranym językiem aplikacji jest polski
- EN-EN FROM TITLE (MODE: UPDATE) – tytuł okna dla formularza edycji dokumentu, gdy wybranym językiem aplikacji jest angielski
- PL-PL FROM TITLE (MODE: VIEW) – tytuł okna dla formularza podglądu dokumentu, gdy wybranym językiem aplikacji jest polski
- EN-EN FROM TITLE (MODE: VIEW) – tytuł okna dla formularza podglądu dokumentu, gdy wybranym językiem aplikacji jest angielski
Pola związane z buttonami:
- PL-PL CUSTOM SAVE BUTTON TEXT – tekst wyświetlony na przycisku zapisu formularza, gdy wybranym językiem aplikacji jest polski
- EN-EN CUSTOM SAVE BUTTON TEXT – tekst wyświetlony na przycisku zapisu formularza, gdy wybranym językiem aplikacji jest angielski
- PL-PL CUSTOM CANCEL BUTTON TEXT – tekst, wyświetlony na przycisku usunięcia danych z formularza i zamknięcia go, gdy wybranym językiem aplikacji jest polski
- EN-EN CUSTOM CANCEL BUTTON TEXT – tekst, wyświetlony na przycisku usunięcia danych z formularza i zamknięcia go, gdy wybranym językiem aplikacji jest angielski
- PL-PL CUSTOM CLOSE BUTTON TEXT – tekst, wyświetlony na przycisku zamykania formularza, gdy wybranym językiem aplikacji jest polski
- EN-EN CUSTOM CLOSE BUTTON TEXT – tekst wyświetlony na przycisku zamykania formularza, gdy wybranym językiem aplikacji jest angielski
SCRIPTS
Dzięki zapisom skryptowym z zakładki „Scripts” można dostosować zachowanie dokumentu do potrzeb aplikacji. Skrypt wpływa głównie na możliwość wykonywania walidacji, czy wywołania określonych akcji.
Zakładka składa się z następujących pół konfiguracyjnych:
SYNC ALL SCRIPTS WITH TEMPLATE – synchronizacja skryptów z szablonem
USE SCRIPT (INITIAL SCRIPT) – użycie podanego skryptu JavaScript przed stworzeniem formularza. Można za jego pomocą np. wyłączyć część pól które mają nie być widoczne od razu po otwarciu formularza
- USE SCRIPT (BEFORE GETDATA C# SCRIPT) – użycie podanego skryptu C# przed pobraniem danych
- USE SCRIPT (AFTER GETDATA C# SCRIPT) – użycie podanego skryptu C# po pobraniu danych
- USE SCRIPT (BEFORE SAVEDATA C# SCRIPT) – użycie podanego skryptu C# przed zapisem danych
- USE SCRIPT (AFTER SAVEDATA C# SCRIPT) – użycie podanego skryptu C# po zapisie danych
FIELDS
Zakładka służy do konfiguracji ustawień poszczególnych kontrolek w formularz i składa się z następujących pól konfiguracyjnych:
TABS
W sekcji TABS dodaje się zakładki do formularza, kliknięcie ikony PLUSA powoduje wyświetlenie modala z polami PL-PL TITLE oraz EN-EN TITLE
- PL-PL TITLE – tytuł zakładki, gdy wybranym językiem aplikacji jest polski; jest widoczny w formularzu gdy istniej więcej niż jedna zakładka
- EN-EN TITLE – tytuł , gdy wybranym językiem aplikacji jest angielski; jest widoczny w formularzu gdy istnieje więcej iż jedna zakładka
FIELDS – aktualizacja pól na postawie Template
- SYNC FIELDS WITH TEMPLATE – synchronizacja pól formularza z polami zawartymi w szablonie stworzonym przez programistę; programista w kodzie definiuje pewne pola, a kliknięcie tego przycisku powoduje automatyczne wygenerowanie, uaktualnienie lub usunięcie ich w konfiguracji
- ADD NEW TEMPLATE FIELDS TO CONFIGURATION – dodanie pól do konfiguracji formularza zgodnie z szablonem
- UPDATE CONFIGURATION FIRLDS WITH TEMPLATE FIELDS – uaktualnienie pól w konfiguracji formularza zgodnie z szablonem
- DELETE CONFIGURATION FIELDS DELETED FROM TEMPLATE – usunięcie pól z konfiguracji formularza, usuniętych wcześniej z szablonu
FIELDS – Sekcja BASIC
- NAME – nazwa pola; jeżeli zostało zdefiniowane w szablonie, to wtedy wartość tego pola będzie taka sama jak nazwa pola zdefiniowanego w kodzie i nie będzie możliwości zmiany tej nazwy w konfiguracji; jeżeli pole zostało dodane w konfiguracji i nie ma go w kodzie, to należy zmienić jego nazwę
- GROUP – nazwa grupy; grupować można elementy, które są w logiczny sposób ze sobą powiązane, dzięki czemu można np. wyłączyć widoczność całej grupy jednym poleceniem
- DEFAULT VALUE – wartość domyślna
- TYPE – typ pola, a dokładniej typ danych jakie pole ma przyjmować
Pola opcjonalne zależne od wyboru TYPE
- MASK – szablon, jak definiuje jakie dane będą mogły być wpisane w formularzu;
- MAX LENGTH – maksymalna długość podana w ilości znaków;
- SHOW DEFAULT COLORS – pokazuje domyślną paletę kolorów;
- SELECT – treść zapytania SQL, pobrane wartości, zostaną umieszczone w rozwijanej liście w formularzu;
- VALUE COLUMN – kolumna z wartością z zapytaniu SQL w polu SELECT; zaleca się pozostawienie domyślnie wartości value o ile w treści zapytania nazwa jest taka sama;
- TEXT COLUMN – kolumna z tekstem z zapytania SQL w polu SELECT; zaleca się pozostawienie domyślnie wartości text o ile w treści zapytania nazwa jest taka sama
- HTML COLUMN – kolumna z kodem HTML; jeżeli w tym polu znajduje się wartość to w zapytaniu SQL z pola SELECT należy pobrać tę wartość z dokładnie taką samą nazwą
- SEARCH COLUMN – kolumna po której następuje filtrowanie; zaleca się pozostawienie wartości domyślnej ___QUERY
- SEARCH TYPE – typ filtrowania; jeżeli szukana wartość ma się zaczynać od podanej frazy należy wybrać StartsWith, a jeżeli ma ją zawierać to Contains;
- COUNTER – licznik;
- RESTRICT DATES RANGE – ograniczenie wyboru daty w kalendarzu pomiędzy:
- MIN DATE OFFSET IN DAYS – ilość dni wstecz, wyznacza najwcześniejszą możliwą datę wyboru
- MAX DATE OFFSET IN DAYS – ilość dni do przodu, wyznacza najpóźniejszą możliwą datę wyboru
- EIGHT [PX] – wysokość grida dodanego jako komponent;
- GRID DETAILS – otwiera możliwość konfiguracji grida dodanego jako element w dokumencie
- DECIMAL SIGNS – ilość znaków po przecinku dodawana automatycznie;
- SIGNED – czy wartość może być ujemna;
- RESTRICT NUMBERS VALUES – czy wartość liczbowa ma być ograniczona do zakresu pomiędzy:
- MIN NUMBER – minimalna wartość jaką można wpisać w pole w formularzu;
- MAX NUMBER – maksymalna wartość jaką można wpisać w pole w formularzu;
- API URL – adres API
- USE AS PRIMARY KEY – czy kolumna reprezentująca dane pole ma być kluczem głównym
- HIDDEN – czy pole ma być ukryte na stałe
Skrypty C#
- USE SCRIPT (HIDDEN – C# SCRIPT) – czy pole ma być ukryte zgodnie z wpisanym poniżej skryptem C#
- DISABLED – czy pole ma być wyłączone na stałe
- USE SCRIPT (DISABLED – C# SCRIPT) – czy pole ma być wyłączone zgodnie z wpisanym poniżej skryptem C#
- VALIDATOR – REQUIRED – czy walidator dla pola jest wymagany
- USE SCRIPT (ADDITIONAL VALIDATORS JS SCRIPT) – czy pole ma używać walidatora zdefiniowanego w poniższym skrypcie JavaScrip
Sekcja VIEW:
- TAB – do jakiej zakładki przynależy dane pole
- WIDTH [1-12] – szerokość kontrolki w skali 1-12, gdzie 12 to szerokość całego formularza;
- BREAK LINE AFTER FIELD – jeżeli pole jest zaznaczone, to kolejne pola zostaną umieszczone w następnej linii;
- FOREIGN FIELD – czy formularz ma zostać zapisany, mimo niepoprawnego wyniku walidacji;
- EN-EN TITLE – nazwa pola w formularzu, jest ustawiana, jeśli wybranym językiem jest angielski
- EN-EN TOOLTIP – treść podpowiedzi wyświetlanej po najechaniu kursorem, jeśli wybranym językiem jest angielski
- PL-PL TITLE – nazwa pola w formularzu, jest ustawiana, gdy wybranym językiem jest polski
- PL-PL TOOLTIP –treść podpowiedzi wyświetlanej po najechaniu kursorem, jeśli wybranym językiem jest polski
DICTIONARIES
Jeżeli programista zdefiniuje w kodzie dodatkowe słowniki, to pojawią się one w tym miejscu w postaci pól. Można im wtedy nadać odpowiednie wartości.
Szczegóły konfiguracji słowników dostępne w instrukcji Dictionary Configuration.
PARAMETERS
Jeżeli programista zdefiniuje w kodzie dodatkowe parametry, to pojawią się one w tym miejscu w postaci pól. Można im wtedy nadać odpowiednie wartości.
Szczegóły konfiguracji słowników dostępne w instrukcji Parameters.
FOOTER BUTTONS
Pozwala dodawać buttony w stopce dokumentu.
W sekcji TABS dodaje się zakładki do formularza, kliknięcie ikony PLUSA powoduje wyświetlenie modala dodawania przycisku, składający się z następujących pół konfiguracyjnych:
- NAME – nazwa konfiguracyjna elementu, po której będzie można wyszukiwać go w innych komponentach
- en-EN TITLE – nazwa jaka pojawi się na przycisku, jeśli językiem użytkownika jest angielski;
- pl-PL TITLE – nazwa jaka pojawi się na przycisku, jeśli językiem użytkownika jest polski;
- THEME – wybór domyślnego tylu przycisku spośród motywów dostępnych w programie;
- BUTTON TYPE – typ przycisku wybierany sposód dostępnych w programie,
- CUSTOM – (check-box) – aktywacja umożliwia personalizację kolorystyki przycisku:
- PREVIEW BUTTON – podgląd skonfigurowanego przycisku;
- Apply to other themes – powoduje zastosowanie konfiguracji przycisku do pozostałych przycisków w formularzu;
- USE BUFFER – (check-box) –
- ACTIVE – (check-box) – oznaczenie aktywności buttonu, zaznaczenie jest konieczne, aby przycisk był widoczny w formularzu;
- TARGET – wybór targetu, do którego nastąpi odniesienie po użyciu buttonu;
- HELP – otwiera podgląd spisu dostępnych w programie targetów;
- WINDOW MODE – określa rodzaj okna w jakim zostanie wywołany target;
W zależności od wybranego targetu w formularzu pojawią się kolejne pola konfiguracyjne powiązane ze wskazanym targetem.
Szczegóły pól konfiguracyjnych poszczególnych targetów w instrukcji Components.
ATTACHEMENTS
Pozwala na dodawanie załączników z dźwiękami do elementu Document Type.
Dodawanie załączników możliwe jest za pomocą zielonego button „Dodaj załącznik”. Następnie należy wskazać plik do załadowania oraz określić jego nazwę.
Możliwe jest warunkowanie użytego dźwięku w zależności od języka kontekstu użytkownika. Aby dodać różne załączniki należy aktywować checkbox „Tłumaczony”, po czym wprowadzić załącznik oraz jego nazwę dla każdego z języków.
Dodając załączniki ważne jest żeby określić Contend ID (po nim będą później włączane pliki w funkcji playValidationErrorSound).
Jeżeli wybierzemy najpierw dodanie pliku z uploadera to Content ID i File name zostanie uzupełnione nazwą pliku.
Usuwanie możliwe jest za pomocą czerwonego button „Usuń załącznik”.
Modyfikacja SCRIPTS
- InitialScrips
Komunikat głosowy podpięty pod wskazany button w dokumencie. Komunikat zostanie wywołany przy użyciu wskazanego buttona, jeśli wystąpił błąd podczas walidacji.
const btn = document.querySelector(".some-button"); btn.addEventListener("click", () => {vm.playValidationErrorSound("beep-01a.mp3"); });
- document.querySelector („. […]”) – należy wskazać nazwę button,
- vm – Kontekst wywoływanego dokumentu, używany do wywołania funkcji (playValidationErrorSound) aktywującej komunikat dźwiękowy,
- Nazwy przekazane do funkcji playValidationErrorSound (items.mp3, beep.mp3) oznaczają nazwę pliku załączonego, pole Content ID z zakładki Attachments.
- Additional On Validation Error JS Script
Komunikat głosowy, jako skutek dodatkowej akcji JSowej po wystąpieniu błędu walidacji.
Pozwala na warunkowanie dźwięku w zależności od kontrolki w jakiej wystąpił błąd. Nie warunkując w zależności od nazwy pola z Fields każdorazowo wystąpi ten sam plik dźwiękowy, używając zmiennej firstInvalidField dostajemy przeliczoną po wystąpieniu błędu nazwę pola, w której jest błąd i możemy w zależności od pola włączać różne komunikaty głosowe (także tłumaczone, zależne od aktualnego języka).
- vm – Kontekst wywoływanego dokumentu, używany do wywołania funkcji (playValidationErrorSound) aktywującej komunikat dźwiękowy,
- firstInvalidField – Pierwsze odnalezione pole w którym wystąpił błąd. Tutaj przekazywane do obsługi komunikatów głosowych są nazwy pól z zakładki FIELDS,
- Nazwy przekazane do funkcji playValidationErrorSound (items.mp3, beep.mp3) oznaczają nazwę pliku załączonego, pole Content ID z zakładki Attachments.
return (vm, firstInvalidField) => { if (firstInvalidField == "Items") vm.playValidationErrorSound("items.mp3"); else vm.playValidationErrorSound("beep.mp3"); } W powyższym przykładzie kiedy wystąpi błąd w polu „Items” z zakładki FIELDS zostanie wywołany komunikat z pliku „items.mp3”, przy wystąpieniu błędu w jakimkolwiek innym polu zostanie wywołany komunikat pliku „beep.mp3”.
HEADER ITEMS
Funkcjonalność zawarta w tej zakładce pozwala skonfigurować dane nagłówkowe, widoczne w górnym pasku formularza.
W celu skonfigurowania elementu należy uzupełnić następujące pola:
- ICON – określa jaka ikona ma znajdować się przy wyświetlanej wartości;
- VALUE COLUMN – określa jaka wartość ma zostać wyświetlon. Możliwe jest dodanie podglądu domyślnych danych takich jak: numer referencyjny (REFNO), datę powstania dokumentu, a także typ oraz podtyp dokumentu, jak również dowolnego pola z zakładki FIELDS;
- PREVIEW – zwraca podgląd wybranej ikony oraz kolumny z wyświetlaną wartością;
- ACTIVE – (check-box) – oznaczenie aktywności elementu Header Items, zaznaczenie jest konieczne, aby wartość była widoczna w nagłówku formularza;
- Label – pl-PL – etykieta elementu w języku polskim, wyświetlana w postaci tooltip po najechaniu na wartość nagłówkową jeśli językiem kontekstu użytkownika jest j.polski;
- Label – en-EN – etykieta elementu w języku angielskim, wyświetlana w postaci tooltip po najechaniu na wartość nagłówkową jeśli językiem kontekstu użytkownika jest j.angielski.
* W przypadku elementów przygotowanych przed wprowadzeniem rozwiązania, pojawienie się wartości Header Items może wymagać odświeżenia konfiguracji elementów toolbarmenu. W takim przypadku konieczne jest odszukanie konfiguracji toolbaarmenu, do których podpięty został wskazany DT (np. dodaj, edycja, podgląd) otwarcie formularza edycji elementu i dokonanie zapisu.
Szczegóły konfiguracji podpięcia definicji dostępne w instrukcji Components.