Kolumna HTML

Podsumowanie:

Kolumna HTML to specjalny rodzaj kolumny, którą można dodać do widoku listy. W komórkach takiej kolumny można renderować markup HTML zdefiniowany na kartach właściwości kolumny. W kodzie HTML można odwoływać się do wartości z pozostałych kolumn, używając składni {@nazwakolumny}. Funkcje sortowania, filtrowania i grupowania dla listy HTML wymagają podania nazwy kolumny źródłowej (tylko jednej), której wartości będą uwzględniane.

Kolumna HTML jest obsługiwana także w aplikacji mobilnej.

W tym temacie

• Karta Ogólne
• Karta Formatowanie, podkarta Stylizacja
• Karta Formatowanie, podkarta Formatowanie warunkowe

Kolumna HTML może agregować informacje z innych kolumn w widoku listy, co ma szczególne zastosowanie w urządzeniach mobilnych. Poniższa ilustracja przedstawia kolumnę HTML, w której zamieszczono wartości z innych kolumn w danym rekordzie. Dodatkowo zastosowano formatowanie warunkowe, zależnie od wartosci z innych kolumn lub wartości wyrażeń wyliczanych na podstawie wartości z innych kolumn. Konfigurację właściwości kolumny opisano w przykładach zamieszczonych w tym temacie.

Info

Wodwołaniach do stylu — w markupie HTML, kodzie Javascript i definicjach CSS można korzystać z selektorów platformy Bootstrap 5 (https://getbootstrap.com/docs/5.0/).

Karta Ogólne

Oprócz takich samych właściwości jak inne kolumny, kolumna HTML ma na karcie Ogólne właściwości:

• Kolumna wiodąca: wybierz z listy rozwijanej kolumnę, której wartości zostaną użyte do sortowania, filtrowania i/lub grupowania rekordów w widoku listy w przypadku użycia tych funkcjonalności dla kolumny HTML; kolumna HTML nie musi zawierać odwołania do wartosci z kolumny wiodącej.
• Struktura wiersza w HTML: kod HTML, który zostanie wyrenderowany w każdym wierszu widoku listy w kolumnie HTML; kolumna pozwala prezentować wartości z innych pól danego rekordu (w tym także z pól ukrytych), formatować je (w tym stosować formatowanie warunkowe), wyświetlać ikony, obrazy itp.; na przykład:

   <i class="fas fa-check" style="font-size:36px;color:lightblue;">
   {@StatusName}
   </i>
  

  W odwołaniu do wartości z pola rekordu należy używać składni {@NazwaSQL}, gdzie Nazwa SQL to nazwa kolumny z pola Nazwa SQL na karcie Ogólne.

Przykład

W każdej komórce kolumny HTML będzie renderowana tabela złożona z dwóch kolumn i trzech wierszy. W kolumnie z lewej strony znajdują się opisy wartości wyświetlanych w sąsiedniej kolumnie. Są to:

• Nr reklamacji: wartość z kolumny Code w formie linku, którego kliknięcie wyświetli formularz z danymi reklamacji. Adres URL (wartość atrybutu href) jest ustawiany przez instrukcję Javascript.
• Status: ikona i pomocniczo nazwa statusu dokumentu; ikona jest ustawiana instrukcją JavaScript, zależnie od wartości identyfikatora statusu.
• Dni od zgłoszenia: liczba dni, które upłynęły od utworzenia dokumentu (CreateDate) do daty bieżącej; wartość wyliczana instrukcją SQL; dodatkowo, kiedy ta wartość jest większa od 14 stosowany jest skrypt zdefiniowany na karcie Formatowanie warunkowe, podkarta Stylizacja.

<table>
  <tr>
    <td>Reklamacja nr:</td>
    <td><a rowHtmlElement="MyLink" ><code>{@Code}</code></a></td>
  </tr>
  <tr>
    <td>Status:</td>
    <td><i rowHtmlElement="StatusIcon" ></i>
        <p>{@StatusName}</p></td>
  </tr>
  <tr>
    <td>Od zgłoszenia:</td>
    <td rowHtmlElement="MyCell"></td>
  </tr>
</table>

Karta Formatowanie, podkarta Stylizacja

Na karcie Stylizacja można zdefiniować style CSS, które zostaną użyte do formatowania markupu HTML zdefiniowanego na karcie Ogólne. Definicje stylów mają charakter lokalny, to jest są stosowane tylko w obrębie bieżącej kolumny HTML.

Przykład

Formatowanie kolumn tabeli renderowanej w komórkach kolumny html:

td:nth-child(odd) {
  background-color: #85cc98;
  text-align: right;
  vertical-align: top;
}
td:nth-child(even) {
  background-color: #a7d9b4;
  text-align: center;
  column-width: 200px;
  max-width: 200px;
}

Styl stosowany przez instrukcję JavaScript po spełnieniu warunku:

.warn14 {
  color: orangered;
  font-size: 1.4rem;
}

Karta Formatowanie, podkarta Formatowanie warunkowe

Na karcie Warunki formatowania należy wpisać instrukcje JavaScript formatujące elementy w kolumnie HTML, w zależności od podanych warunków. Instrukcje JavaScript mogą odwoływać się do wartości z innych kolumn w danym rekordzie przy użyciu składni RowDataContext.NazwaKolumny, gdzie NazwaKolumny to wartość właściwości Nazwa SQL danej kolumny, czyli nazwa kolumny w źródle danych listy. Z kolei odwołania do formatowanych elementów HTML muszą mieć postać: RowHtmlElements.NazwaElementu, gdzie NazwaElementu to wartość atrybutu o tej nazwie zdefiniowanego w oknie edytora HTML na karcie Ogólne.

Przykład

Link do edycji dokumentu

W markupie HTML zdefiniowano element <a> z atrybutem rowHtmlElement o wartości MyLink. Poniższa instrukcja ustawia dla tego elementu wartość atrybutu href, dodając do adresu URL formularza identyfikator dokumentu. Jako tekst linku wyświetlany jest numer dokumentu (wartość z kolumny Code).

var
anchor = 'http://localhost:4200/front/form/59CEB6A4-0DAD-4E0D-9C0D-E017357CDE12/'
          + RowDataContext.Id

RowHtmlElements.MyLink.href = anchor;

Wybór ikony w zależności od statusu

W markupie HTML zdefiniowano element <i> z atrybutem rowHtmlElement o wartości StatusIcon. Poniższa instrukcja ustawia dla tego elementu nazwę klasy (ikonę z zestawu Font Awesome) odpowiednio do wartości z kolumny Status (liczba całkowita identyfikująca status dokumentu).

switch (RowDataContext.Status) {
  case 1:
    RowHtmlElements.StatusIcon.className =
                          'fas fa-pen fa-4x text-success';
    break;
  case 30:
    RowHtmlElements.StatusIcon.className =
                           'fas fa-pen fa-4x text-success';
    break;
  case 2:
    RowHtmlElements.StatusIcon.className =
                            'fas fa-hourglass fa-4x text-info';
    break;
  case 3:
     RowHtmlElements.StatusIcon.className =
                            'far fa-hourglass fa-4x text-warning';
    break;
  case 4:
    RowHtmlElements.StatusIcon.className =
                              'fas fa-check fa-4x text-success';
    break;
  case 5:
    RowHtmlElements.StatusIcon.className =
                               'fas fa-ban fa-4x text-danger';
    break;
  case 6:
    RowHtmlElements.StatusIcon.className =
                                'fas fa-ban fa-4x';
    break;
  case 7:
    RowHtmlElements.StatusIcon.className =
                                'fas fa-check fa-4x';
};

Liczba dni od utworzenia dokumentu

W markupie HTML zdefiniowano element <td> z atrybutem rowHtmlElement o wartości MyCell. Poniższa instrukcja ustawia dla tego elementu wartość (liczbę dni, które upłynęły od utworzenia dokumentu) i wartość atrybutu class, jeśli liczba dni jest większa od 14.

var dzisiaj = new Date();
var utworzono = new Date(RowDataContext.CreateDate).setHours(0);
var dni = Math.floor(Math.abs(dzisiaj-utworzono)/(1000 * 3600 * 24));

RowHtmlElements.MyCell.innerHTML = dni + ' dni';

if (dni > 14 ) {
    RowHtmlElements.MyCell.className = 'warn14';
};