Sekcja HTML

Podsumowanie:
W sekcji typu HTML można renderować na formularzu kod HTML. W kodzie można odwoływać się do wartości z formularza przy użyciu zmiennych {@kodPola}, gdzie kodPola to kod pola na formularzu. Ponadto w kodzie HTML można używać wyników zwracanych przez zapytanie SQL oraz kodu JavaScript.

W sekcji HTML jest także obsługiwana biblioteka chart.js, która pozwala na generowanie wykresów na podstawie danych zwracanych w zapytaniu SQL. Zasady tworzenia wykresów przy użyciu tej biblioteki opisano w osobnym temacie.

Zależność od sekcji: wyświetla pole, w którym należy wpisać kod sekcji, od której ma zależeć sekcja HTML; zależność powoduje, że zawartość sekcji HTML jest odświeżana dynamicznie po zmianie danych w sekcji nadrzędnej. Jeśli sekcja nadrzędna jest listą, wyświetlenie wierszy tej listy wymaga użycia w szablonie HTML elementu <DSRowTemplate>. Wyświetlenie danych z wybranych kolumn tej listy wymaga użycia składni {@DS_kodKolumny}, gdzie kodKolumny to kod kolumny listy wyświetlanej w sekcji nadrzędnej.

Zezwól na parsowanie HTML z pól formularza (unsecure): umożliwia renderowanie w sekcji kodu HTML zwróconego przez SQL (np. z innych pól formularza).

Edytor SQL Query: umożliwia napisanie zapytania, które zwróci dane do wyświetlenia w sekcji; do wyników zapytania można się odwoływać w szablonie HTML, używając elementu <QueryRowTemplate> oraz zmiennych {@Query_nazwaKolumny}, gdzie *nazwaKolumny to nazwa kolumny zwróconej przez zapytanie.

SELECT [FirstName]
       ,[LastName]
FROM core.UserProfiles
WHERE Id = {@_UserId}

Edytor HTML: pole do wpisania kodu HTML, który ma być wyświetlany w sekcji; kliknięcie kółka ze znakiem zapytania wyświetla okienko z przykładem kodu HTML. Aby wyświetlić wartości z rekordów sekcji zależnej typu lista, należy użyć elementu <DSRowTemplate> oraz zmiennej {@DS_ColumnName}, gdzie ColumnName to nazwa kolumny listy; patrz przykład poniżej

<p id="docNumber">Numer dokumentu</p>
<QueryRowTemplate>{@Query_FirstName} {@Query_LastName}</QueryRowTemplate>

Edytor JavaScript: wyświetla pole, w którym można wpisać kod JavaScript z odwołaniem do wartości z kontekstu formularza (FormDataContext.ContextFieldName), pola rekordu w sekcji zależnej typu lista lub aktualizujący stan kontrolki na formularzu. W przypadku gdy wskazana sekcja zależna to sekcja typu lista, odwołanie ma postać: DSDataContext[n].ColumnName, gdzie n to numer rekordu na liście, a ColumnName to nazwa kolumny listy.

document.getElementById("docNumber").innerHTML = FormDataContext.Code;

Przykład

Poniższy przykład pozwala wyświetlić w sekcji HTML kafelki typu flexbox z linkami do dokumentów z listy w sekcji zależnej.

<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 20px;
}
</style>
</head>
<body>
  <div class="flex-container">
    <DSRowTemplate>
      <div>
        <a href="https://naxiom_url/front/form/59CEB...DE12/{@DS_Id}">{@DS_Code}</a>
      </div>
    </DSRowTemplate>
  </div>
</body>

|← Harmonogram |↑ Do góry |→ Sekcja Kalendarz |