UI elements

CampaignExecutionClientTab, CampaignExecutionDetailsTab

In TimveroOS, tabs (EntityTabController) are used to display additional information about an entity on its detail page.


📌 CampaignExecutionClientTab

A controller tab that displays clients involved in a specific campaign execution.

Example:

@Controller
@RequestMapping("/clients")
public class CampaignExecutionClientTab extends EntityTabController<Long, CampaignExecution> {
    
    @Override
    public boolean isVisible(CampaignExecution entity) {
        return true; // logic to determine visibility
    }
}

📍 Displays a table of clients using the template: /campaign-execution/tab/clients.html


/campaign-execution/tab/clients.html

Displays a list of clients in a tabular format. Used by CampaignExecutionClientTab.

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<th:block>
    <div class="card-body">
        <table class="table">
            <thead>
            <tr>
                <th data-sortField="id" th:text="#{symbol.id}"></th>
                <th th:text="#{client.companyName}"></th>
                <th th:text="#{client.countryCode}"></th>
            </tr>
            </thead>
            <tbody>
            <tr role="row"
                class="clickable"
                th:each="client : ${entity.clients}"
                th:href="@{'/client/'+${client.id}}">
                <td th:text="${client.id}"></td>
                <td th:text="${client.displayedName}"></td>
                <td th:text="${client.countryCode}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</th:block>
</html>

📌 CampaignExecutionDetailsTab

A controller tab that shows key execution information: date, status, errors, and related applications.

Example:

@Controller
@RequestMapping("/details")
public class CampaignExecutionDetailsTab extends EntityTabController<Long, CampaignExecution> {
    
    @Override
    public boolean isVisible(CampaignExecution entity) {
        return true; // logic to determine visibility
    }
}

📍 Uses the template: /campaign-execution/tab/details.html


/campaign-execution/tab/details.html

Displays:

  • Execution start date

  • Execution status

  • Link to the associated campaign

  • Number of applications

  • Execution error details (if any)

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<th:block th:object="${entity}">
    <div class="card-info-wrapper d-flex">

        <div class="card-info d-flex">
            <ul class="card-info__body d-flex">
                <li class="card-info__item d-flex">
                    <span class="card-info__property" th:title="#{campaign.execution.startedAt}"
                          th:text="#{campaign.execution.startedAt}"></span>
                    <span class="card-info__value" th:text="*{#ldates.format(createdAt)}"></span>
                </li>
                <li class="card-info__item d-flex">
                    <span class="card-info__property" th:title="#{campaign.execution.status}"
                          th:text="#{campaign.execution.status}"></span>
                    <span class="card-info__value" th:text="*{#enums.name(status)}"></span>
                </li>
                <li class="card-info__item d-flex">
                    <span class="card-info__property" th:title="#{campaign.execution.startedBy}"
                          th:text="#{campaign.execution.startedBy}"></span>
                    <span class="card-info__value">
                        <a th:if="*{createdBy != null}"
                           th:text="*{createdBy.name}"
                           th:href="@{*{'/user/' + createdBy.entity.id}}"></a>
                        <span th:if="*{createdBy == null}"
                              th:text="#{campaign.execution.startedAuto}">Auto</span>
                    </span>
                </li>
            </ul>
        </div>

        <div class="card-info d-flex">
            <ul class="card-info__body d-flex">
                <li class="card-info__item d-flex">
                    <span class="card-info__property" th:title="#{campaign.execution.campaign}"
                          th:text="#{campaign.execution.campaign}"></span>
                    <span class="card-info__value">
                        <a th:href="@{'/campaign/' + *{campaign.id}}" th:text="*{campaign.name}"></a>
                    </span>
                </li>
                <li class="card-info__item d-flex">
                    <span class="card-info__property" th:title="#{campaign.execution.applications}"
                          th:text="#{campaign.execution.applications}"></span>
                    <span class="card-info__value" th:text="*{applications.size()}"></span>
                </li>
                <li class="card-info__item d-flex">
                    <span class="card-info__property" th:title="#{campaign.execution.errorOffer}"
                          th:text="#{campaign.execution.errorOffer}"></span>
                    <span class="card-info__value" th:text="${errorOffer}"></span>
                </li>
            </ul>
        </div>

        <div class="card-info d-flex">
            <ul class="card-info__body d-flex">
                <li th:if="*{exception}" class="card-info__item d-flex">
                    <span class="card-info__property" th:text="#{campaign.exception}"
                          th:title="#{campaign.exception}"></span>
                    <span class="card-info__value">
                        <a th:href="@{'/exception-entity/' + *{exception.id}}">Script execution error</a>
                    </span>
                </li>
            </ul>
        </div>

    </div>
</th:block>
</html>

Last updated

Was this helpful?