rich1.0phorkiehttps://p.cweiske.de/FluidTYPO3: flux section to add many elementsChristian Weiske86400900900<!-- embedding all files of https://p.cweiske.de/235 -->
<link rel="stylesheet" href="https://p.cweiske.de/css/embed.css"/>
<div class="phork" id="235">
<div class="phork-file">
<div class="phork-content">
<div class="document">
<p>Use <tt class="docutils literal">flux:form.section</tt> with <tt class="docutils literal">flux:form.object</tt> inside to make it possible to add many elements of one or many types.</p>
<div class="section" id="links">
<h1>Links</h1>
<ul class="simple">
<li><a class="reference external" href="https://fluidtypo3.org/viewhelpers/flux/master/Form/SectionViewHelper.html">https://fluidtypo3.org/viewhelpers/flux/master/Form/SectionViewHelper.html</a></li>
<li><a class="reference external" href="https://fluidtypo3.org/viewhelpers/flux/master/Form/ObjectViewHelper.html">https://fluidtypo3.org/viewhelpers/flux/master/Form/ObjectViewHelper.html</a></li>
<li><a class="reference external" href="https://docs.typo3.org/p/fluidtypo3/flux/11.0/en-us/ViewHelpers/Form/Section.html">https://docs.typo3.org/p/fluidtypo3/flux/11.0/en-us/ViewHelpers/Form/Section.html</a></li>
</ul>
</div>
<div class="section" id="search-keywords">
<h1>Search keywords</h1>
<p>dynamic</p>
</div>
</div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/235/rev-raw/4affb8b7f33a26804289a577d27ba54d59a15633/0-README.rst" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/235#0-README.rst">0-README.rst</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<style type="text/css">/**
* GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2014 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.xml .de1, .xml .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}
.xml {font-family:monospace;}
.xml .imp {font-weight: bold; color: red;}
.xml li, .xml .li1 {color: #DDD;}
.xml .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}
.xml .es0 {color: #000099; font-weight: bold;}
.xml .br0 {color: #66cc66;}
.xml .sy0 {color: #66cc66;}
.xml .st0 {color: #ff0000;}
.xml .sc-1 {color: #808080; font-style: italic;}
.xml .sc0 {color: #00bbdd;}
.xml .sc1 {color: #ddbb00;}
.xml .sc2 {color: #339933;}
.xml .sc3 {color: #009900;}
.xml .re0 {color: #000066;}
.xml .re1 {color: #000000; font-weight: bold;}
.xml .re2 {color: #000000; font-weight: bold;}
.xml span.xtra { display:block; }
</style><div class="code"><table class="xml"><tbody><tr class="li1"><td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
</pre></td><td class="de1"><pre class="de1"><span class="sc3"><span class="re1"><?xml</span> <span class="re0">version</span>=<span class="st0">"1.0"</span> <span class="re0">encoding</span>=<span class="st0">"utf-8"</span><span class="re2">?></span></span>
<span class="sc3"><span class="re1"><html</span> <span class="re0">xmlns</span>=<span class="st0">"http://www.w3.org/1999/xhtml"</span> <span class="re0">lang</span>=<span class="st0">"en"</span></span>
<span class="sc3">     <span class="re0">xmlns:f</span>=<span class="st0">"http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"</span></span>
<span class="sc3">     <span class="re0">xmlns:flux</span>=<span class="st0">"http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"</span><span class="re2">></span></span>
 
  <span class="sc3"><span class="re1"><f:layout</span> <span class="re0">name</span>=<span class="st0">"Content"</span> <span class="re2">/></span></span>
 
  <span class="sc-1"><!-- backend form --></span>
  <span class="sc3"><span class="re1"><f:section</span> <span class="re0">name</span>=<span class="st0">"Configuration"</span><span class="re2">></span></span>
    <span class="sc3"><span class="re1"><flux:form</span> <span class="re0">id</span>=<span class="st0">"examplesection"</span> <span class="re0">options</span>=<span class="st0">"{group: 'FCE'}"</span><span class="re2">></span></span>
      <span class="sc3"><span class="re1"><flux:form.section</span> <span class="re0">name</span>=<span class="st0">"settings.numbers"</span> <span class="re0">label</span>=<span class="st0">"Telephone numbers"</span><span class="re2">></span></span>
        <span class="sc3"><span class="re1"><flux:form.object</span> <span class="re0">name</span>=<span class="st0">"mobile"</span> <span class="re0">label</span>=<span class="st0">"Mobile"</span><span class="re2">></span></span>
          <span class="sc3"><span class="re1"><flux:field.input</span> <span class="re0">name</span>=<span class="st0">"number"</span><span class="re2">/></span></span>
        <span class="sc3"><span class="re1"></flux:form.object<span class="re2">></span></span></span>
        <span class="sc3"><span class="re1"><flux:form.object</span> <span class="re0">name</span>=<span class="st0">"landline"</span> <span class="re0">label</span>=<span class="st0">"Landline"</span><span class="re2">></span></span>
          <span class="sc3"><span class="re1"><flux:field.input</span> <span class="re0">name</span>=<span class="st0">"number"</span><span class="re2">/></span></span>
        <span class="sc3"><span class="re1"></flux:form.object<span class="re2">></span></span></span>
      <span class="sc3"><span class="re1"></flux:form.section<span class="re2">></span></span></span>
    <span class="sc3"><span class="re1"></flux:form<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"></f:section<span class="re2">></span></span></span>
 
  <span class="sc-1"><!-- backend preview --></span>
  <span class="sc3"><span class="re1"><f:section</span> <span class="re0">name</span>=<span class="st0">"Preview"</span><span class="re2">></span></span>
    <span class="sc3"><span class="re1"><f:for</span> <span class="re0">each</span>=<span class="st0">"{settings.numbers}"</span> <span class="re0">as</span>=<span class="st0">"obj"</span> <span class="re0">key</span>=<span class="st0">"id"</span><span class="re2">></span></span>
      Number #{id}:
      <span class="sc3"><span class="re1"><f:if</span> <span class="re0">condition</span>=<span class="st0">"{obj.landline}"</span><span class="re2">></span></span>mobile, {obj.landline.number}<span class="sc3"><span class="re1"></f:if<span class="re2">></span></span></span>
      <span class="sc3"><span class="re1"><f:if</span> <span class="re0">condition</span>=<span class="st0">"{obj.mobile}"</span><span class="re2">></span></span>landline, {obj.mobile.number}<span class="sc3"><span class="re1"></f:if<span class="re2">></span></span></span>
      <span class="sc3"><span class="re1"><br</span><span class="re2">/></span></span>
    <span class="sc3"><span class="re1"></f:for<span class="re2">></span></span></span>
 
  <span class="sc3"><span class="re1"></f:section<span class="re2">></span></span></span>
 
  <span class="sc-1"><!-- frontend output --></span>
  <span class="sc3"><span class="re1"><f:section</span> <span class="re0">name</span>=<span class="st0">"Main"</span><span class="re2">></span></span>
    <span class="sc3"><span class="re1"><h2<span class="re2">></span></span></span>Telephone numbers<span class="sc3"><span class="re1"></h2<span class="re2">></span></span></span>
    <span class="sc3"><span class="re1"><dl<span class="re2">></span></span></span>
      <span class="sc3"><span class="re1"><dt<span class="re2">></span></span></span>Mobile numbers<span class="sc3"><span class="re1"></dt<span class="re2">></span></span></span>
      <span class="sc3"><span class="re1"><f:for</span> <span class="re0">each</span>=<span class="st0">"{settings.numbers}"</span> <span class="re0">as</span>=<span class="st0">"obj"</span><span class="re2">></span></span>
        <span class="sc3"><span class="re1"><f:if</span> <span class="re0">condition</span>=<span class="st0">"{obj.mobile}"</span><span class="re2">></span></span>
          <span class="sc3"><span class="re1"><dd<span class="re2">></span></span></span>{obj.mobile.number}<span class="sc3"><span class="re1"></dd<span class="re2">></span></span></span>
        <span class="sc3"><span class="re1"></f:if<span class="re2">></span></span></span>
      <span class="sc3"><span class="re1"></f:for<span class="re2">></span></span></span>
 
      <span class="sc3"><span class="re1"><dt<span class="re2">></span></span></span>Landline numbers<span class="sc3"><span class="re1"></dt<span class="re2">></span></span></span>
      <span class="sc3"><span class="re1"><f:for</span> <span class="re0">each</span>=<span class="st0">"{settings.numbers}"</span> <span class="re0">as</span>=<span class="st0">"obj"</span><span class="re2">></span></span>
        <span class="sc3"><span class="re1"><f:if</span> <span class="re0">condition</span>=<span class="st0">"{obj.landline}"</span><span class="re2">></span></span>
          <span class="sc3"><span class="re1"><dd<span class="re2">></span></span></span>{obj.landline.number}<span class="sc3"><span class="re1"></dd<span class="re2">></span></span></span>
        <span class="sc3"><span class="re1"></f:if<span class="re2">></span></span></span>
      <span class="sc3"><span class="re1"></f:for<span class="re2">></span></span></span>
    <span class="sc3"><span class="re1"></dl<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"></f:section<span class="re2">></span></span></span>
<span class="sc3"><span class="re1"></html<span class="re2">></span></span></span>
 </pre></td></tr></tbody></table></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/235/rev-raw/4affb8b7f33a26804289a577d27ba54d59a15633/1-numbers.html" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/235#1-numbers.html">1-numbers.html</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="235/rev-raw/4affb8b7f33a26804289a577d27ba54d59a15633/2-backend.png" alt="2-backend.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/235/rev-raw/4affb8b7f33a26804289a577d27ba54d59a15633/2-backend.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/235#2-backend.png">2-backend.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="235/rev-raw/4affb8b7f33a26804289a577d27ba54d59a15633/3-backend-preview.png" alt="3-backend-preview.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/235/rev-raw/4affb8b7f33a26804289a577d27ba54d59a15633/3-backend-preview.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/235#3-backend-preview.png">3-backend-preview.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="235/rev-raw/4affb8b7f33a26804289a577d27ba54d59a15633/4-frontend.png" alt="4-frontend.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/235/rev-raw/4affb8b7f33a26804289a577d27ba54d59a15633/4-frontend.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/235#4-frontend.png">4-frontend.png</a>
</div>
</div>
</div>