Object

Purpose

Template Objects in Wonderful Relations are dynamically generated elements that allow for structured, data-driven rendering within templates and PDF templates. These objects serve as building blocks for interactive components, repeated elements, and formatted outputs. They are inserted into the DOM and can be linked to queries, attributes, child objects, and options.

A key feature of Template Objects is their ability to be repeated based on query results. If a query returns multiple rows, the object is inserted once per row, allowing for flexible and structured output.

Visual Example

Config:

How Template Objects Work

1. Structural Role

Template Objects are contained within Template Containers.
They can appear once or be repeated dynamically based on query results.
Attributes and Child Objects allow further customization and interaction.

2. Data-Driven Repetition

If a Template Object is linked to a query, it can be repeated for each row returned by the query.
Placeholders (##fieldname##) allow query results to be dynamically inserted into the object.
Example: A query fetching user data can be linked to an object displaying ##firstname## ##lastname##.
If repeated, this object will render once per user.

3. Nested Child Objects

Objects can be nested within other objects, inheriting their query context.
Example: A list of services within a category container.

Parameters

A Template Object consists of the following key parameters:

Title

The display name of the object.

Description

A brief explanation of the object’s purpose.

Repeated Query

If a query is assigned, the child objects will be repeated for each row in the result set.

Inner HTML

Defines the template structure, allowing the inclusion of placeholders for query-based values.

Sort Order

Determines the placement of the object within its container.

Attributes

Attributes define additional properties for an object, allowing dynamic customization.

Examples of Attributes

Attribute	Example Value	Description
`class`	`service-container col-sm-6 col-md-4 col-lg-3`	Defines styling classes for responsive design.
`onclick`	`load_template({ page: 'wonderful-relations', template: ##template## })`	Triggers a JavaScript action dynamically.

Examples

Example: Inner HTML with Placeholders

A Template Object can contain HTML code with dynamic placeholders:

<div class="service mb-3">
    <i class="service-icon fa-3x ##icon##"></i>
    <div class="service-key">
        <div class="font-weight-bold">##title##</div>
    </div>
</div>

How It Works:

##icon## and ##title## are placeholders that will be replaced with query results.
If repeated, this block is rendered once per row of the linked query.

The Filter Option allows you to reuse queries efficiently. In this case, we have an option with the key “filter_identifier”, which implies that the query 269 “Services for Dashboard (your_project)” contains a placeholder ##identifier##.

SELECT * FROM services WHERE identifier like '##identifier##'

The template builder will dynamically replace this placeholder with the specified option value. In this example, only services with an identifier starting with “your_project_administration_” will be retrieved, meaning only administration-related services will be included.

SELECT * FROM services WHERE identifier like 'your_project_administration_%'

So the same query can be used for different parts in the dashboard.

This approach enables query and template reuse while dynamically passing filter values, ensuring flexible and efficient data retrieval.

Why Template Objects Matter

Enable dynamic rendering based on database queries
Allow structured, repeatable content for dashboards & PDFs**
Support nesting and inheritance for complex layouts
Provide full control via attributes, child objects, and sorting

Template Objects serve as a powerful abstraction for generating reusable, data-driven content, making them essential for dynamic UI elements and PDF generation in Wonderful Relations. 🚀

Explorer