Kolumny wyświetlane za pomocą widoku tabeli mogą zawierać różne rodzaje (typy) kolumn. Jednym ze sposobów wyświetlania danych jest kolumna typu HyperLink.
Kolumna wyświetla link do wskazanej strony. Prezentacja danych jest za pomocą tekstu z podkreśleniem jak na zwykłych tradycyjnych stronach www.
Program StudioSystem pozwala jednak doprecyzować konfigurację tak aby w tabeli były wyświetlane dane w formie przycisków (button) po kliknięciu na który użytkownik zostanie przekierowany na dowolną inną stronę internetową.
Chcemy w tabeli wyświetlić kolumnę zawierającą numer listu przewozowego firmy kurierskiej, ale informacja ma być przyciskiem po kliknięciu którego użytkownikowi wyświetli się strona www kuriera z informacją na temat przesyłki.
Konfiguracja
W ustawieniu tabeli dla kolumny numer listu ustawiamy typ kolumny jako: HyperLink
W ten sposób uzyskamy następujący efekt
W celu modyfikacji sposobu wyświetlania w konfiguracji w kolumnie PARAMETRY wpisujemy jaki obiekt i jak formatowany chcemy wyświetlić.
<a href='http://www.dhl.com.pl/sledzenieprzesylkikrajowej/szukaj.aspx?m=0&sn=@REFNO' target='_blank' class='art-button art-buttonSiberia' style='width:180px;'>@REFNO</a>
Powyższy przykład oznacza że w kolumnie w każdym wierszy będzie wyświetlony obiekt hyperlinku <a> z następującymi tagami:
- href – wskazuje jaka strona www ma zostać wyświetlona po kliknięciu myszką – parametr obowiązkowy
- target – wskazuje nazwę okna w jakim ma być wyświetlona nowa strona. Parametr opcjonalny, brak oznacza otwarcie w bieżącym oknie. Wartość _blank oznacza otwarcie strony w nowym oknie – zakładce przeglądarki
- class – nazwy klas CSS3 formatujących danych obiekt, w naszym przykładzie używamy klas art-button, która zamienia link na przycisk oraz art-buttonSiberia, która zmienia kolor z domyślnego na bladoniebieski. Parametr opcjonalny
- style – pozwala na użycie dowolnych formatowań CSS3, parametr opcjonalny tu odpowiedzialny za ustawienie stałej szerokości przycisku na 180pikseli.
- @REFNO – zmienna która zostaje zastąpiona wartościami odczytanymi z bazy danych dla danej kolumny. W naszym wypadku @REFNO to wartość odczytana z kolumny NRLISTU.
Kliknięcie wywołuje funkcje
Powyższy przykład świetnie nadaje się do przekierowania na inną transakcję w ramach okna lub w nowym oknie, jednak często chcemy aby użytkownik pozostał w oknie z gridem, a nowe informacje szczegółowe były wyświetlane w okno ponad tabelą.
Przygotujemy więc kolumnę wyświetlającą ikonkę w każdym rekordzie, a po jej kliknięciu otworzy się okno z nową transakcją.
W gridzie ustawiłem kolumnę PODGLĄD, gdzie z bazy danych odczytuje numer dokumentu jako wartość i podstawiam pod typ HyperLink
W kolumnie PARAMETRY ustawiam następujący wpis:
<div style='text-align:center; width:90%; padding:5px;'><img src='/images_v/24x24/document_zoom_in.png' class='art-buttonImg' onclick='PokazOknoDialog(\"cTytulDialogBox\", \"/role_sys/j_tab.aspx?widok=XYZ&refno=@REFNO\",\"normal\",\"\")'/></div>
gdzie:
- ustawiam obiekt DIV ustawiony na szerokość 90% i wycentrowany
- Wewnątrz umieszczam obiekt IMG który
- podstawiam ikonkę src=’/images_v/24×24/document_zoom_in.png’
- ustawiam klasę formatującą obiekt class=’art-buttonImg’
- ustawiam zdarzenie na kliknięcie przez użytkownika onclick=’PokazOknoDialog(\”Okno podglądu\”, \”/role_sys/j_tab.aspx?widok=XYZ&refno=@REFNO\”,\”normal\”,\”\”)’
W powyższym przykładzie uruchamiam polecenie na klik o nazwie PokazOknoDialog, ale może być to dowolna dostępna funkcja javascript. Funkcja PokazOknoDialog wymaga podania 4 parametrów:
- Nazwa okna np Okno podglądu
- Transakcja docelowa – wskazanie co ma być wyświetlone w nowo otwartym oknie
- rozmiar otwieranego okna np. normal
- czy grid ma być odświeżany po zamknięciu okna, domyślnie nie jest, ale jeżeli podamy wartość True to dane zostaną pobrane ponownie.
Zmienna @REFNO oznacza że w danym miejscu program podstawi wartość odczytaną z kolumny bazy SQL w tym wypadku kolumna PODGLAD.
