[TYPO3-english] Layouts for partials or any other way to avoid copy-paste in templates

[bernd wilke]

Am 13.08.15 um 15:04 schrieb Viktor Livakivskyi:
> Hi, List.
>
> I'm working with a registration form template, which has a lot of
> fields. Each field has same layout, but contents may be different:
> textfield, set of checkboxes, dropdown with static_info_tables info, etc.
>
> The layout of each field is such:
>
> <div class="form__field-container">
>      <label class="form__field-label" for="field-{fieldname}">
>          <f:translate key="{fieldname}" />
>          <f:render partial="Required" section="Main" arguments="{field:
> '{fieldname}'}" />
>      </label>
>
>      <div class="form__field-data">
>          <f:render partial="FieldError" section="Main" arguments="{for:
> 'user.{fieldname}'}" />
>
>          ---A part, that is unique---
>
>      </div>
> </div>
>
> My goal is to avoid copy-paste of a structure above, but I can't find a
> clean solution for this.
>
> The most obvious idea is to move this code to a partial, but then I need
> somehow deal with unique contents of each field, which will result
> either in invention of too much variables and lot of if-else in Fluid
> template, or in creating a partial for each field, that has some
> differences, or even in combination of these both. This seems kinda
> dirty way for me.
>
> It would be nice to have a possibility to define a layout for a section
> or make it possible to render a template section from a partial.
> Something, like this:
> Partials/Field.html:
> <div class="container">
>   <label>label</label>
>   <div class="field">
>     <f:render section="field-data" />
>   </div>
> </div>
>
> And then in template call it like this:
> Templates/RegistrationForm.html
> ..
> <f:render partial="Field">
>   <f:section name="field-data">
>     ---all the fancy and unique stuff here---
>     <f:form.textfield ... />
>   </f:section>
> </f:render>
>
> So, the question, how do you code your forms without field's layout
> copy-paste?

1. you can have sections in every fluid-template file, not only partials
2. you can have multiple sections in one fluid-template file
3. you can call each section within a partial individually
4. you have parameters in the section call

consider sections as functions in a programming language: you have 
parameter to individualize the output of the function

<f:render [partial="partialname"] [section="sectionname"] 
[arguments="({_all}|{par1:var1,par2:var2,...})" />

so your fieldname will be one parameter and each indiviualization will 
be another parameter, your fieldtype propably will match the section name.

you might consider this configuration:

in partialfolder: partial "inputfields.html" with some sections:
<f:section name="input">...</f:section>
<f:section name="text">...</f:section>
<f:section name="select">...</f:section>
<f:section name="checkbox">...</f:section>
:

in your (main) template you have something like:


< form action="...">
   < f:render partial="inputfields.html" section="input" 
arguments="{fieldname:'surname',label:'Surname',required:1,errtxt:'enter 
your surname',data:user.surname}" />
< f:render partial="inputfields.html" section="input" 
arguments="{fieldname:'givenname',label:'Givenname',required:1,errtxt:'enter 
your givenname',data:user.gicenname}" />
< f:render partial="inputfields.html" section="input" 
arguments="{fieldname:'nickname',label:'Nickname',data:user.nickname}" />
< f:render partial="inputfields.html" section="input" 
arguments="{fieldname:'email',label:'Email',required:1,errtxt:'enter a 
valid email',data:user.email,validation:'email'}" />
< f:render partial="inputfields.html" section="input" 
arguments="{fieldname:'message',label:'your 
message',required:1,errtxt:'please enter your 
request',data:user.message}" />
< button type="submit">go!< /button>
< /form>

one optimization might be: using a language file so the label, 
errortext,default-value,... for each field can be accessed by the fieldname


bernd
-- 
http://www.pi-phi.de/cheatsheet.html