Dynamic Pages (SSR)

The system integrates the thymeleaf template engine and supports server-side rendering of HTML pages in static resources by calling automation or scripts to obtain internal platform data.

Settings

Configuration Item	Content
Name	Dynamic page name
Path	Access path for the dynamic page Page path supports characters that comply with compound URL specifications such as /, ., letters, numbers, etc.
Template Engine	Engine used for page rendering, currently only thymeleaf is supported
Call Type	Data source used for dynamic page rendering
Automation	When Automation is selected as the call type, set the automation for the data source of page rendering
Script	When Script is selected as the call type, set the script for the data source of page rendering
Script Function	When Script is selected as the call type, the function in the script to be called
Automation or Script Return Value Identifier	After calling the data source to return data, the identifier context for the data. This identifier is the root attribute for obtaining data in the page template For example: if set to data, then use ${data.attribute} in the page to get the value
Rendering Page	Select a page from static resources as the rendering template

Quick Start

Create a dynamic page and set up automation as the data source for the dynamic page

Parameter	Type	Required
ctx	Object	No

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <title>Dynamic Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>

<body>
    <div style="padding: .1563rem">
        <h3>List Rendering</h3>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                    <th scope="col">Position</th>
                    <th scope="col">Department</th>
                    <th scope="col">Salary</th>
                    <th scope="col">Join Date</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="item : ${data.list}">
                    <th scope="row" th:text="${item.id}"></th>
                    <td th:text="${item.name}"></td>
                    <td th:text="${item.position}"></td>
                    <td th:text="${item.department}"></td>
                    <td th:text="${item.salary}"></td>
                    <td th:text="${item.join_date}"></td>
                </tr>
            </tbody>
        </table>

        <h3 style="margin-top: .1042rem">Condition Judgment</h3>
        <p th:if="${#strings.isEmpty(data.ctx.query.visible)}">Link does not contain visible parameter</p>
        <p th:unless="${#strings.isEmpty(data.ctx.query.visible)}">Link contains visible parameter</p>
        <button class="btn btn-primary" onclick='window.location.search="?visible=1"'>Show</button>
        <button class="btn btn-primary" style="margin-left: .026rem" onclick='window.location.search=""'>Hide</button>

        <h3 style="margin-top: .1042rem">Formatting</h3>
        <p>Date formatting: <span th:text="${#dates.format(#dates.createNow(),'dd/MMM/yyyy HH:mm')}"></span></p>
        <p>Format the number 3 as: <span th:text="${#numbers.formatInteger(3 ,2,'POINT')}"></span></p>

        <h3 style="margin-top: .1042rem">Received parameters:</h3>
        <p th:text="${data.ctx.query}"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</body>

</html>

Basic Syntax

The following lists the basic syntax of the thymeleaf template engine. For other usages, please refer to the thymeleaf official documentation

Text Binding

Bind the text content of the current element through the th:text attribute. If special characters are encountered, they will be converted to strings.

Unescaped Text Binding

When we want the output text content to be HTML source code, we can bind unescaped text through th:utext

Logical Judgment

We can use th:if to control the rendering of elements where the return result is true, and th:unless does the opposite.

Loop

We can iterate through array objects through th:each to render elements in a loop.

Functions

thymeleaf provides rich utility classes to support object operations within templates. The following demonstrates the basic usage of functions.

Dynamic Pages (SSR) ​

Settings ​

Quick Start ​

Basic Syntax ​

Text Binding ​

Unescaped Text Binding ​

Logical Judgment ​

Loop ​

Functions ​