dashboard.aspx - personalizowany pulpit

Autor: Adam Siemiątkowski, SoftwareStudio Group Sp. z o.o.

Platforma StudioSystem to niesamowicie elastyczne rozwiązanie pozwalające projektować tzw pulpity menadżerskie (kokpity - dashboards). Pulpit składa się z dowolnej ilości mniejszych okienek (położenie i rozmiar każdego z nich jest osobno definiowany), która zawierają każde inną transakcję wyświetlającą interesujące użytkownika informacje.

Wyświetlona może być dowolna transakcja w ramach programu StudioSystem, jak i każda inna dowolna strona internetowa np. kursy walut.

Transakcja dashboard.aspx

Transakcja /role_sys/dashboard.aspx odpowiada za personalizowany pulpit użytkownika w systemie StudioSystem. W zależności od roli użytkownika ładowane są odpowiednie moduły, które są wyświetlane jako dynamiczne okna. Mechanizm wykorzystuje bazy danych, sesje użytkownika oraz technologie frontendowe (CSS, JavaScript, jQuery, iframe), aby dostarczyć interaktywny i elastyczny interfejs.

Poniżej przedstawiono uruchomiony ekran transakcji role_sys/dashboard.aspx zawierający zdefiniowane jedno okno na pulpicie. Okno wyświetlane jest w określonym miejscu i rozmiarze zaprojektowanym przez administratora, jednak użytkownik może swobodnie zmieniać rozmiar okna, minimalizując je lub maksymalizując na ekranie.

Okno na tablicy

Ponadto okno można swobodnie przesuwać na ekranie w dowolne miejsce w ramach okna głównego aplikacji - patrz ekran programu poniżej.

Pulpit może zawierać dowolną ilość okien, przykładowo dodajemy drugie okno

Mając zdefiniowane 2 okna, otrzymamy pulpit

Wyświetlania raportów w tabeli za pomocą transakcji div_grid.aspx

W okienku na pulpicie można wyświetlać krótki i szybkie syntetyczne raporty w celu zaprezentowania ogólnej informacji np. tendencje i zmiany w czasie, planowane wizyty itp.

Zaprojektowanie takiego zapytania do raportu przygotowuje się w standardowy sposób wykorzystując konfigurację zapytań SQL np, w folderze RAPORTY dodajemy zapytania dla dwóch raportów:

DSB_DPHAN_MONTH - zwracający miesięcznie ilości sprzedaży zarejestrowanej w systemie.
DSB_WIZYTY_PLANOWANE - zwracający listę zaplanowanych w programie pokazując planowaną datę spotkania, kontrahenta i miejscowość.

Zapytania można wykonać i wyświetlić za pomocą standardowej transakcji x_grid.aspx, jednak jest to mocno rozbudowana transakcja, dlatego można skorzystać z transakcji zwracającej prostą tabelę sformatowaną za pomocą znaczników <DIV>. Zaletą jest szybkość tworzenia widoku tabeli z otrzymanymi danymi.

Konfiguracja

Moduł programu KONFIGURACJA pozwala definiować okna jakie mają znaleźć się na pulpicie menadżerskim (dashboard).

Wprowadzamy następujące informacje:

ROLA - nazwa roli dla jakiej dany zapis będzie przypisany, filtr na podstawie roli zalogowanego użytkownika;
GRUPA - dowolne, wymagane oznaczenie pozwalające grupować okna dzięki czemu możemy projektować dowolnie wiele różnych pulpitów. Wartość dla pola GRUPA musi być przekazana jako parametr przy uruchamianiu transakcji dashboard.aspx;
KOLEJNOŚĆ - powoduje, że okna są umieszczane na pulpicie wg wskazanej kolejności;
NAZWA - unikalna, dowolna nazwa okna na pulpicie;
TEKST - informacja wyświetlana jako tytuł okna;
TRANSAKCJA DO URUCHOMIENIA -
PARAMETRY TRANSAKCJI - wskazanie jaki plik lub strona internetowa ma być umieszczona w oknie na pulpicie;
WSPÓŁRZĘDNE podajemy w pikselach odległość od górnego lewego narożnika okna aplikacji;
ROZMIAR okna, podajemy w pikselach szerokość i wysokość okna.
WIDOCZNE - ustawione domyślne na TAK oznacza że okno wyświetla się jako rozwinięte, jeżeli ustawimy na NIE (false) to okno wyświetla się w formie zminimalizowanej.

Zapisane okna wyświetlane są w rejestrze oznaczonym kodem prx=DSB (tabela _menu)

Parametry

Wymagane jest podanie parametru grupa, wg którego filtrowane są pozycje okien.

Uruchamianie

Transakcja może być uruchamiana na starcie po zalogowaniu użytkownika np.

role_sys/dashboard.aspx?grupa=AAA

Opis działania transakcji /role_sys/dashboard.aspx

Transakcja dashboard.aspx w systemie StudioSystem służy do wyświetlania pulpitu nawigacyjnego użytkownika, który zawiera dynamicznie generowane okna z danymi dostosowanymi do roli użytkownika. Jej działanie można podzielić na kilka istotnych etapów:

1. Inicjalizacja strony (Page_PreInit)

Podczas inicjalizacji sprawdzana jest autoryzacja użytkownika (User.Identity.IsAuthenticated).
Jeśli użytkownik jest zalogowany, pobierane są jego parametry sesyjne:
- pUserParametry - parametry użytkownika, np. jego rola.
- cSystemParametry - parametry systemowe.
- cLanguageTable - tabela językowa.

2. Załadowanie pulpitu (Page_Load)

Jeśli użytkownik nie jest zalogowany, proces ładowania jest zatrzymywany.
Wyłączenie buforowania (Response.Cache.SetCacheability(HttpCacheability.NoCache)) zapewnia, że zawsze ładowane są aktualne dane.
Gdy strona nie jest ponownie ładowana (IsPostBack == false):
- Pobierane są parametry z URL (np. grupa, rola).
- Ustalana jest rola użytkownika:
  - Jeśli użytkownik jest administratorem, sprawdzana jest dodatkowa rola (ROLASYS).
  - Jeśli użytkownik jest SuperVisorem, pobierana jest wartość SUPERVISOR.
- Ładowanie konfiguracji pulpitu:
  - Pobierane są elementy menu z bazy danych (_MENU) z warunkiem PRX='DSB', które odpowiadają pulpitowi użytkownika.
  - Zapytanie SQL może uwzględniać rolę użytkownika i grupę, aby dostosować widoczne elementy.
- Generowanie dynamicznych okien (DodajOkno), które reprezentują różne moduły w interfejsie.

3. Generowanie okien pulpitu (DodajOkno)

Każde okno jest tworzone jako dynamiczny element HTML z unikalnym identyfikatorem i osadzonym iframe: <div id='unikalna_nazwa' class='WebWindow' data-iframersc='URL_do_modułu'>
Okna są umieszczane w kontrolce Panel strona, co umożliwia ich dynamiczne ładowanie i konfigurację.

4. Interfejs użytkownika (dashboard.aspx)

Strona dashboard.aspx korzysta z MasterPage, co zapewnia jednolity wygląd systemu.
Stylizacja oparta jest na dashboard.css, a obsługa okien realizowana przez dashboard.js.
Wczytywane są zewnętrzne biblioteki: <link href="../Scripts/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet" type="text/css" /> <script src="dashboard.js?v=<%=StudioSystemStatic.cAppVersion%>"></script>
Strona zawiera:
- Panel strona, do którego dynamicznie dodawane są okna.
- Miejsce na galerię (elementDoWstawianiaGaleriiDash).
- Logo SoftwareStudio umieszczone w prawym dolnym rogu.

5. Obsługa wizualna (dashboard.css)

Stylizacja interfejsu uwzględnia m.in.:
- Okna (.WebWindow), które mają styl nagłówka (#windowHeader).
- Galeria zdjęć (#photoGallery) z efektem cienia.
- Kolorystykę dopasowaną do motywu systemu (jqx.energyblue).

6. Obsługa JavaScript (dashboard.js)

Po załadowaniu strony ($(document).ready()):
- Konfigurowane są wszystkie okna dashboardu (.WebWindow).
- Dynamicznie generowane są iframe, które ładują treści modułów (data-iframersc).
- Po sekundzie uruchamiana jest funkcja jqxWindowOpen(), która dostosowuje okna do ekranu użytkownika.