Search results for "template"

As defined in the DOM specification, Content Elements must not have child nodes. To be able to mix template expressions and node structures, Structr provides a block-version of Content Elements, the so-called Template Elements (). Similar to Content Elements, Template Elements support different content types and allow for template expressions. However, in contrast to Content Elements, Template Elements can have children.

The icon of the template changes from a regular template element () to that of a shared template element ().

We start by introducing the template element. In Structr, templates are special elements that may be inserted into a page’s DOM tree at any position. Much like a content element, a template element has a body which is rendered into the page. However, in contrast to the content element, a template element may have children in the DOM tree, which will become important later on.

This section is about how to use an existing web page as a template. As a source of examples, we use the Start Bootstrap Templates collection. Since we want to replace the overview page, we choose the Heroic Features page as it features a list-like structure, but in general, any template with clean and semantically correct HTML will do.

We replace the template’s initial placeholder text #template with the HTML source code of the page we created before. Open the startbootstrap-heroic-features page in source mode and copy the HTML code into the template element. Finally, set the content type of the template element to text/html to enable the correct escaping.

Finally, we create a shared component out of this template element. This allows us to include the template into every new page we create within this project, creating a skeleton for new pages that include the top navigation menu and the footer. Due to the render(<a data-id="3230f1d81eb345c199024b82eb7c56f2" class="mention">children</a>) expression in the template body, the individual content of each new page can then be added as a child of the template in the DOM tree, allowing us to quickly create pages with the same main theme but different content.

Instead of creating users in the Structr backend manually in the Users and Groups section of Structr’s admin UI, you can allow users to sign-up/self-register. The registration process uses double-opt in by default. All you need is a simple page where new users can enter their e-mail address so Structr can send them an e-mail with a confirmation link.

The following pre-defined MailTemplate keys can be used to configure the self-registration process. In version 4.0 they have been renamed to have a more uniform structure.

Note: The Mail Configuration Settings have to be done for self-registration mails to be sent.

Notes:

• The visibility flags of these MailTemplates are ignored because the self-registration mail is created as a privileged user.
• A special link variable is provided for the TEXT_BODY and HTML_BODY templates and can be output with the usual syntax: ${link}
  • Example link: https://support.structr.com/confirm_registration?key=<CONFIRM_KEY>&target=/dashboard&onerror=/register-error
• From v4.1 scripting is enabled in two templates: CONFIRM_REGISTRATION_TEXT_BODY and CONFIRM_REGISTRATION_TEXT_BODY. The script is being run in the context of the user (me keyword points to the user).
• In any version prior to 4.1 scripting can not be used and simple text replacement is done

Start by setting the template’s name to “Main Page Template”. Next, drag the template element onto the drop zone in the shared components fly-out.

Therefore, the rendering flow stops at template elements and does not render the remaining branch of the DOM tree. Instead, the template element has to explicitly invoke the rendering process for it’s child elements in the appropriate place. To accomplish this, Structr provides the children keyword and the render() function, as shown in the example below. While this makes the configuration of template elements a bit more subtle than that of content elements, it provides much more flexibility.

To allow users to regain access to their account when they forgot their password we need to enable them to reset their password.

Note: The Mail Configuration has to be done for password retrieval mails to be sent.

Notes:

• The visibility flags of these MailTemplates are ignored because the self-registration mail is created as a privileged user.
• A special link variable is provided for the TEXT_BODY and HTML_BODY templates and can be output with the usual syntax: ${link}
  • Example link: https://support.structr.com/reset-password?key=<PASSWORD-RESET-KEY>&target=/reset-password
• From v4.1 scripting is two templates: RESET_PASSWORD_TEXT_BODY and RESET_PASSWORD_HTML_BODY. The script is being run in the context of the user (me keyword points to the user).
• In any version prior to 4.1 scripting can not be used and simple text replacement is done.

To dynamically generate content during rendering, Structr provides a mechanism for opening a scripting environment within a content element. For these so-called template expressions, Structr uses a syntax similar to the Freemarker Template Language.

A repeater element is a DOM node that is made dynamic by binding a special template expression to it. In particular, we may bind a database query that produces a collection of all elements of type Project to a <row> element. When a repeater element is rendered into the page, the template expression is evaluated and the dom node is rendered into the page for each element in the result.

This content type must be set on template elements or content elements that are included using the built-in include() function, and on so-called Main Page Templates that use ${render(<a data-id="3230f1d81eb345c199024b82eb7c56f2" class="mention">children</a>)}.

As described above, the rendering engine’s default behavior is an in-order traversal of the DOM tree, rendering each element as it is visited. However, when encountering a template element, this behavior does not make much sense, as the template element may require it’s child elements to be rendered in specific positions of the script.

For complex processes within a template JavaScript can be used, because there are no directives or extra flow control elements in Structr templates unlike in Freemarker. Structr offers a very similar concept, show conditions, which are discussed in more detail in the “Visibility” paragraph below.