Jan 15, 2015 Tags: Fluid, TYPO3

Looking for Wisdom about Fluid

Ongoing attempt to collect links and documentation about templating with TYPO3 Fluid. Will be updated as needed.

Updated on Sep 11, 2015

See also: About Fluid:

About Extbase:

Navigate this page:

Fluid standalone

POC - Proof of concept:

ViewHelper Docs

Viewhelpers

The fantastic reference at fluidtypo3.org:

f:form.select

Usage
<f:form.select options="{optArray}" ... />
Purpose
Create a select dropdown list in a form.
Properties
property needed default
options="{array}" yes  
optionValueField="{string}"    
optionLabelField="{string}"    
sortByOptionLabel="{boolean}"   false
selectAllByDefault="{boolean}"   false
errorClass="{string}"   f3-form-error
prependOptionLabel="{string}"    
prependOptionValue="{string}"    
PHP
SelectViewHelper.php
T3Docs
Extbase Guide
Fluidtypo3
form.select
Tip
Options for select

Basic usage

The most straightforward way is to supply an associative array as the “options” parameter. The array key is used as option key, and the value is used as human-readable name:

<f:form.select name="paymentOptions" options="{payPal: 'PayPal International Services',
                                               visa: 'VISA Card'}" />

Pre-select a value

To pre-select a value, set “value” to the option key which should be selected. Generate a dropdown box like above but “VISA Card” is pre-selected:

<f:form.select name="paymentOptions" options="{payPal: 'PayPal International Services',
                                               visa: 'VISA Card'}" value="visa" />

If the select box is a multi-select box (multiple=”true”), then “value” can be an array as well.

Usage on domain objects

If you want to output domain objects, you can just pass them as array into the “options” parameter. To define what domain object value should be used as option key, use the “optionValueField” variable.

Same goes for optionLabelField. If neither is given, the Identifier (UID/uid) and the __toString() method are tried as fallbacks.

If the optionValueField variable is set, the getter named after that value is used to retrieve the option key.

If the optionLabelField variable is set, the getter named after that value is used to retrieve the option value.

If the prependOptionLabel variable is set, an option item is added in first position, bearing an empty string or - if provided, the value of the prependOptionValue variable as value.

Example:

In this example the userArray is an array of “User” domain objects. No array key is specified. The method $user->getId() is called to retrieve the key. The method $user->getFirstName() retrieves the display value of each entry:

<f:form.select name="users" options="{userArray}" optionValueField="id"
               optionLabelField="firstName" />

If you add the “value” property it has to be a domain object and is used to test for object equivalence.

Coding

Possible feature to specify XML namespaces

2015-04-10: Demonstration of a possible feature to specify xml namespaces. Currently this feature is not yet implemented but could go into a RFC (Tweet, Youtube). Bastian Waidelich:

IDE support for #TYPO3Fluid tags without side-effects in the rendered markup? What do you think of this approach:

TYPO3 Fluid detects xmlns attributes in order to register ViewHelper namespaces. But those end up in the rendered HTML. This short clip shows a possible solution to that problem without having to adjust the parser.

It is recorded using the git master of TYPO3 Flow (as of 10th April 2015) with the following two patches applied to the Fluid package:

Useful Partials

Submitted form has errors?

Good:

<f:form.validationResults for="{object}">
   <f:if condition="{validationResults.flattenedErrors}">
      <div class="typo3-messages">
         <div class="typo3-message message-error">
            <div class="message-body">The form still has errors.</div>
         </div>
     </div>
   </f:if>
</f:form.validationResults>

Wrong:

<f:if condition="{validationResults}">...</f:if>

VHS

Good to know

Hint: None of the VHS viewhelpers leak variables EXCEPT the one that is designed to do so; v:variable.set

  • The namespace is {namespace v=FluidTYPO3\Vhs\ViewHelpers}
  • Try this for debugging: {v:page.info() -> f:debug()}.
  • To make the title of a page in the Fluid template available as {title} write {v:page.info(field: 'title') -> v:variable.set(name: 'title')}

Solutions

OR Condition in IF Viewhelper

Problem: The <f:if condition="..."> doesn’t know OR and AND operators. TER:vhs comes with a method to set and ‘leak’ a variable. We are using showCompanyDescription as a flag for a logical to to later base some output on.

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/html" lang="en"
      xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
      f:schemaLocation="https://fluidtypo3.org/schemas/fluid-master.xsd"
>
<head>
    <title>Partial</title>
</head>
<body>
<f:section name="main">
    {v:variable.set(name:'showCompanyDescription', value:0)}
    <f:if condition="{offer.logo}">{v:variable.set(name:'showCompanyDescription', value:1)}</f:if>
    <f:if condition="{offer.companyDescription -> f:cObject(typoscriptObjectPath:'mblib.cleanHtml')}">{v:variable.set(name:'showCompanyDescription', value:1)}</f:if>
    <dl>
       <f:if condition="{showCompanyDescription}">
          <dt>Unternehmensbeschreibung:</dt>
          <dd>
             <f:if condition="{offer.logo}">
                <f:image image="{offer.logo}" maxWidth="300" maxHeight="225" class="offer_logo"></f:image>
             </f:if>
             <f:if condition="{offer.companyDescription -> f:cObject(typoscriptObjectPath:'mblib.cleanHtml')}">
                {offer.companyDescription -> f:cObject(typoscriptObjectPath:'mblib.cleanHtml')}
             </f:if>
          </dd>
       </f:if>
    </dl>
</f:section>
</body>
</html>

Send Email

Comments

comments powered by Disqus

Previous topic

Looking for Wisdom about Extbase

Next topic

Looking for Wisdom about Git

Tags

Archives

Languages

Recent Posts

This Page