Template Files

• implement a single reusable UI element
• contain only UI-related code
• may only use vanilla PHP and allowed view helpers listed on this page
• may be made up of other components
• will handle all HTML escaping in leaf components (components that do not render other components).

Allowed PHP code

Component templates should only contain reusable UI-related code written in vanilla PHP.

Using vanilla PHP

• helps in keeping application logic out
• makes component templates more portable, so they can be used with tools like Pattern Lab
• makes onboarding easier for frontend developers not familiar with VuFind and PHP.

However, there are a few exceptions, listed below.

Allowed view helpers

$this->render()

Component templates may include other components using the Laminas PhpRenderer::render($nameOrModel, $values = null) method.

The file name should contain the component's path starting from the components folder and ending in the component folder name.

Example:

<?= $this->render('components/molecules/navigation/finna-nav-item', $__item); ?>

$this->escapeHtml()

Component templates should use the Laminas EscapeHtml view helper for escaping data to use within an HTML body context.

$this->escapeHtmlAttr()

Component templates should use the Laminas EscapeHtmlAttr view helper for escaping data to use within an HTML attribute context.

$this->headLink()->appendStylesheet() and $this->headLink()->prependStylesheet()

Component templates should include additional CSS files using the Laminas HeadLink helper.

$this->headScript() and $this->inlineScript()

Component templates should include JavaScript files using either the Laminas HeadScript or InlineScript view helper.

The file name should contain the full path starting from the components folder.

Example:

<?php $this->headScript()->appendFile('components/organisms/navigation/finna-tabs-nav/finna-tabs-nav.js'); ?>

$this->htmlAttributes()

Component templates may use the Laminas HtmlAttributes view helper to create new HtmlAttributesSet objects.

Templates should support an $attributes parameter variable for the outermost HTML element, adding the component's machine name as a class or setting it as an id.

Example:

<div<?= $this->htmlAttributes($attributes ?? [])->add('class', ['finna-panel', 'panel']) ?>>

$this->imageLink()

Component templates should create image paths using the VuFind ImageLink view helper.

$this->jsTranslations()->addStrings()

Component templates should add translated strings for JavaScript using the VuFind JsTranslations helper.

$this->transEsc()

Component templates may use the VuFind TransEsc view helper to display translated and escaped strings.

$this->translate()

Component templates may use the VuFind Translate view helper to display translated strings.

$this->url()

Component templates may use the Laminas Url view helper to create a string representation of the routes defined in an application.

Variables

Component templates may have two kinds of variables: parameter variables, which are passed to the template in the render() call, and local variables.

All parameter variables (exposed component properties) should be documented in the component's documentation file.

A double underscore prefix should be used for local variable names to differentiate them from parameter variables.

Example: $parameterVariable, $__localVariable.