Wizualizacja kamieni milowych w sekcji HTML na formularzu

Przeczytasz w 16 min.

Spis treści

1. Wstęp
2. Przygotowanie założeń biznesowych
3. Zdefiniowanie wyglądu wskaźnika
4. Konfiguracja sekcji HTML
5. Zapytanie SQL
6. Model HTML

Wstęp

Wskaźnik kamieni milowych to jeden z przykładów wykorzystania sekcji HTML do definiowania dodatkowych wizualnych elementów formularza.

Aby zamieścić wskaźnik kamieni na formularzu, należy:

1. Przygotować założenia biznesowe
2. Zdefiniować wygląd wskaźnika
3. Skonfigurować sekcję HTML, w tym:
   • Zapytanie SQL
   • Model HTML

Przygotowanie założeń biznesowych

Przyjmijmy pracę na przykładzie uproszczonego obiegu zgłoszenia (np. zgłoszenie dokonania zmian w systemie u Klienta, zgłoszenia potrzeby na materiały).

Na początku należy zdefiniować, jakie będą wyświetlane kamienie milowe oraz jakich statusów dotyczą poszczególne kamienie.

Zdefiniowanie kamieni milowych może opierać się na prostej tabeli. Dla poszczególnych statusów zakładamy następujące stopnie realizacji kamieni milowych:

Tabela 1: Definicje kamieni milowych

Kamienie milowe			Statusy objęte kamieniem milowym
ID	Nazwa	Opis	ID	Kod	Nazwa
M1	Nowe zgłoszenie	Wypełnienie formularza i rejestracja zgłoszenia	null		Nowy dokument (brak statusu)
			1	zglo_01	Tworzenie zgłoszenia
			2	zglo_02	Weryfikacja zgłoszenia przez przełożonego
M2	Akceptacja	Weryfikacja i akceptacja zgłoszenia przez Decydentów	3	zglo_03	Akceptacja zgłoszenia przez Decydenta 1
			4	zglo_04	Akceptacja zgłoszenia przez Decydenta 2
			5	zglo_05	Akceptacja zgłoszenia przez Decydenta 3
M3	Realizacja	Podział na zadania i przypisanie osób realizujących	6	zglo_06	Przydzielenie zadań i osób je realizujących
			7	zglo_07	Realizacja poszczególnych zadań
			8	zglo_08	Weryfikacja wykonania zadań
M4	Zakończono	Zgłoszenie zrealizowane	9	zglo_09	Zgłoszenie zrealizowane

W przypadku zgłoszeń odrzuconych zakładamy ukrycie sekcji z kamieniami milowymi.

Zdefiniowanie wyglądu wskaźnika

W tym przykładzie wskaźnik kamieni milowych będzie prezentowany jako oś z wyodrębnionymi punktami o przypisanych kamieniach milowych, dla których podana będzie kolejność, nazwy i opisy. Dla kamieni zrealizowanych zakładamy kolor ciemniejszy zielony, dla kamienia aktywnego – jaśniejszy zielony, a dla kamieni przyszłych – szary.

Zaprojektowane style zdefiniujemy jako sekcję CSS w modelu HTML.

Konfiguracja sekcji HTML

Po zdefiniowaniu założeń, należy zamieścić na formularzu odpowiednio skonfigurowany element, jakim w tym przypadku jest sekcja typu HTML z odpowiednio zdefiniowanym zapytaniem SQL i modelem HTML.

W ustawieniach sekcji należy podać zapytanie SQL i model HTML.

Zapytanie SQL

Zapytanie SQL powinno na podstawie aktualnego statusu dokumentu zwracać informację o stopniu realizacji poszczególnych kamieni milowych. W tym celu zdefiniujemy możliwe wartości stopnia realizacji, do których przypisane będą style kamieni milowych.

Tabela 2. Możliwe stopnie realizacji i przypisane im style dla kamieni milowych

ID	Nazwa stylu	Opis	Wygląd
0		dla kamieni przyszłych
1	active	dla kamieni trwających
2	complete	dla kamieni zakończonych

Dla poszczególnych statusów zakładamy następne stopnie realizacji kamieni milowych:

Tabela 3. Status a stopień realizacji kamienia milowego

Status		Kamienie milowe
ID	Nazwa	M1	M2	M3	M4
null	(brak statusu)	active
1	Tworzenie zgłoszenia	active
2	Weryfikacja zgłoszenia przez przełożonego	active
3	Akceptacja zgłoszenia przez Decydenta 1	complete	active
4	Akceptacja zgłoszenia przez Decydenta 2	complete	active
5	Akceptacja zgłoszenia przez Decydenta 3	complete	active
6	Przydzielenie zadań i osób je realizujących	complete	complete	active
7	Realizacja poszczególnych zadań	complete	complete	active
8	Weryfikacja wykonania zadań	complete	complete	active
9	Zgłoszenie zrealizowane	complete	complete	complete	active

Aby poprawnie wyświetlić diagram kroków milowych, należy uzyskać informację o tym, jaki jest stopień realizacji poszczególnych kroków milowych dla dokumentu znajdującego się w danym statusie. Potrzebujemy więc informacji w następującej formie:

Tabela 4. Informacje potrzebne do poprawnego wyświetlenia wskaźnika

Status		Kamienie milowe
ID	Nazwa	M1	M2	M3	M4
6	Przydzielenie zadań i osób je realizujących	complete	complete	active

Poniżej przykładowe zapytanie SQL do użycia w konfiguracji sekcji:

select 

--Definiujemy wartości kamienia M1 dla poszczególnych statusów
case
  when {@Status} is null then 'active'
  when {@Status} in (1,2) then 'active'
  when {@Status} > 2 then 'complete' end as M1,

--Definiujemy wartości kamienia M2 dla poszczególnych statusów
case
  when {@Status} is null then ''
  when {@Status} in (1,2) then ''
  when {@Status} in (3,4,5) then 'active'
  when {@Status} > 5 then 'complete' end as M2,

--Definiujemy wartości kamienia M3 dla poszczególnych statusów
case
  when {@Status} is null then ''
  when {@Status} in (1,2,3,4,5) then ''
  when {@Status} in (6,7,8) then 'active'
  when {@Status} > 8 then 'complete' end as M3,

--Definiujemy wartości kamienia M4 dla poszczególnych statusów
case
  when {@Status} is null then ''
  when {@Status} in (1,2,3,4,5,6,7,8) then ''
  when {@Status} > 8 then 'active' end as M4

Zapytanie wymaga podania bazodanowych wartości ID dla poszczególnych statusów. Przy tworzeniu statusów nie mamy wpływu na otrzymywane przez nie ID oraz nie możemy podejrzeć tych ID od strony back-office – są one dostępne w tabeli z definicjami statusów (tabela core.BusinessStatuses) w bazie danych, co utrudnia ich bezpośrednie podanie w powyższym zapytaniu.

Jeśli więc pisząc zapytanie nie znamy bazodanowych ID definicji poszczególnych statusów, możemy wykorzystać funkcjonalność SmartNumbers i zamiast ID podać kod statusu. Dostęp do kodu statusu mamy zarówno z poziomu designera diagramu przejść oraz z listy statusów.

Wykorzystanie SmartNumbers polega na tym, że zamiast wartości liczbowych stanowiących ID statusów, należy wstawić następującą treść: {&KodAplikacji.BusinessStatuses.KodDiagramu.KodStatusu}.

Poniżej przykład dla przyjętych statusów zgłoszeń.

Status	ID statusu użyte w zapytaniu	SmartNumbers do użycia w zapytaniu
Nowy dokument (brak statusu)	null	null
Tworzenie zgłoszenia	1	{&ZGLOSZENIA.BusinessStatuses.ZGLO.zglo_01}
Weryfikacja zgłoszenia przez przełożonego	2	{&ZGLOSZENIA.BusinessStatuses.ZGLO.zglo_02}
Akceptacja zgłoszenia przez Decydenta 1	3	{&ZGLOSZENIA.BusinessStatuses.ZGLO.zglo_03}
Akceptacja zgłoszenia przez Decydenta 2	4	{&ZGLOSZENIA.BusinessStatuses.ZGLO.zglo_04}
Akceptacja zgłoszenia przez Decydenta 3	5	{&ZGLOSZENIA.BusinessStatuses.ZGLO.zglo_05}
Przydzielenie zadań i osób je realizujących	6	{&ZGLOSZENIA.BusinessStatuses.ZGLO.zglo_06}
Realizacja poszczególnych zadań	7	{&ZGLOSZENIA.BusinessStatuses.ZGLO.zglo_07}
Weryfikacja wykonania zadań	8	{&ZGLOSZENIA.BusinessStatuses.ZGLO.zglo_08}
Zgłoszenie zrealizowane	9	{&ZGLOSZENIA.BusinessStatuses.ZGLO.zglo_09}

Model HTML

Informacje zwrócone przez zapytanie SQL należy następnie wykorzystać w modelu HTML sekcji ({@Query_M1}, {@Query_M2}, {@Query_M3}, {@Query_M4}).

W sekcji HTML definiujemy obiekty, które będą się pojawiały, ich układ oraz styl.

Poniżej przykładowy model HTML do użycia w konfiguracji sekcji:

<HTML>

<section>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="row pgb p-0 mt-3">

<QueryRowTemplate>
    <div class="col step {@Query_M1} p-0">
        <h1>1</h1>
        <span class="img-circle"></span>
    </div>
    <div class="col step {@Query_M2} p-0">
        <h1>2</h1>
        <span class="img-circle"></span>
    </div>
    <div class="col step {@Query_M3} p-0">
        <h1>3</h1>
        <span class="img-circle"></span>
    </div>
    <div class="col step {@Query_M4} p-0">
        <h1>4</h1>
        <span class="img-circle"></span>
    </div>
</div>

<div class="row pgb p-0">
    <div class="col text-center {@Query_M1}">
        <h2>Nowe zgłoszenie</h2>
        <p2>Wypełnienie formularza i rejestracja zgłoszenia</p2>
    </div>
    <div class="col text-center {@Query_M2}">
        <h2>Akceptacja</h2>
        <p2>Weryfikacja i akceptacja zgłoszenia przez Decydentów</p2>
    </div>
    <div class="col text-center {@Query_M3}">
        <h2>Realizacja</h2>
        <p2>Podział na zadania i przypisanie osób realizujących</p2>
    </div>
    <div class="col text-center {@Query_M4}">
        <h2>Zakończono</h2>
        <p2>Zgłoszenie zrealizowane</p2>
    </div>
</div>
</QueryRowTemplate>
</div>
</section>

<style>

.pgb .step {
    text-align:center;
    position:relative;
}

.pgb h1 {
    font-family: 'Open Sans', sans-serif;
    font-size:1.3rem;
    color:#ffffff;
}
.pgb h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.3rem;
    color:#999999;
}
.pgb p2 {
    font-family: 'Open Sans', sans-serif;
    font-size:.9rem;
    color:#999999;
}

.pgb .active h2 {
    color:#000000;
}
.pgb .active p2 {
    color:#000000;
}

.pgb .step h1 {
    position:absolute;
    height:60px;
    width:100%;
    text-align:center;
    display:block;
    z-index:103;
    color:#ffffff;
    font-size:160%;
    line-height:55px;
    opacity:.7;
}
.pgb .active.step h1 {
    opacity:1;
    font-weight:600;
}

.pgb .img-circle {
    position:relative;
    z-index:102;
      display:inline-block;
      width:60px;
      height:60px;
      border-radius:50%;
      background-color:#999999;
    border:4px solid #fff;
}
.pgb .complete .img-circle {
      background-color:#339966;
}
.pgb .active .img-circle {
      background-color:#8cd9b3;
}
.pgb .step:before {
        content:" ";
        display:block;
        background: #999999;
        height:4px;
        width:50%;
        position:absolute;
        bottom:50%;
        left:0;
        z-index:100;
        margin-right:24px;
}
.pgb .step:after {
        content:" ";
        display:block;
        background:#999999;
        height:4px;
        width:50%;
        position:absolute;
        bottom:50%;
        left:50%;
        z-index:100;
}
.pgb .step.active:after {
        background: #999999;
}

.pgb .step.complete:after, .pgb .step.active:before, .pgb .step.complete:before {
        background: #339966;
}

    .pgb .step:last-of-type:after, .pgb .step:first-of-type:before{
        display: none;
}

</style>

</HTML>

Poniżej dodatkowa informacja o tym, z jakich elementów składa się powyższy HTML.

• Zdefiniowano 2 wiersze (row pgb) zawierające po 4 kolumny.
• Pierwszy wiersz zawiera kolumny col step, czyli kółka z numerami (h1) kamieni milowych.
• Drugi wiersz zawiera kolumny col text, czyli nazwy (h2) i opisami (p2) kamieni milowych.
• Zdefiniowano kolor kółek oraz tekstu zależnie od stanu kroku milowego.
• Zdefiniowano paski łączące kamienie milowe, które są podzielone na dwie części (po kroku oraz przed krokiem), kolorowane zależnie od stanu kroku milowego, do którego przylegają.