Ticket #566 (new new feature)

Opened 3 months ago

Last modified 3 months ago

jForms: support of <repeat>

Reported by: laurentj Assigned to:
Priority: normal Milestone:
Component: jelix:forms Version: 1.0.3
Severity: normal Keywords:
Cc: Php version:
Review: Hosting Provider:
Documentation needed: 0 Blocking:

Description

Sometimes, in a form, we need to duplicate some fields dynamically. A typical example is to have upload fields to attach a file to an article. The number of this field depends of the need of the user, so there are some buttons to add dynamically a new upload field, or to remove an upload field.

<repeat> could bring this feature. Example:

<repeat ref="uploadedfile" min="1" max="5" count="3"
        addlabel="Add a new file" removelabel="remove this file">
   <label>...</label>
   <input ref="filelabel"><label>title for the file</label></input>
   <upload ref="file"><label>the file to upload</label></input>
   <!-- <datasource dao="".../> -->
</repeat>

the input and the upload elements will be repeated 3 times. But if we indicate a datasource element, there will have as many input/upload files as records given by the datasource.

the uplodadedfile data will be an array with data of each input/upload "lines".

Change History

05/02/08 16:57:31 changed by laurentj

Improvements on specification.

If we deactivate the repeat element or if we mark it as readonly, all its sub-controls will be deactivated or readonly.

For the template part:

If the control is displayed throw a formcontrols loop or by formfull, it will generate a default html content like this:

<fieldset><legend>The label of the repeat</legend>
<table class="jforms-repeat-item">
<tr>
   <th><label>title for the file</label></th><input type="text" .../><td></td>
</tr>
<tr>
   <th><label>the file to upload</label></th><td><input type="file" .../></td>
</tr>
<tr>
   <td colspan="2"><input type="button" value="remove this file" /></td>
</tr>
</table>

<table class="jforms-repeat-item">
<tr>
   <th><label>title for the file</label></th><input type="text" .../><td></td>
</tr>
<tr>
   <th><label>the file to upload</label></th><td><input type="file" .../></td>
</tr>
<tr>
   <td colspan="2"><input type="button" value="remove this file" /></td>
</tr>
</table>
<div><input type="button" value="Add a new file" /></div>
</fieldset>

(note: behaviors with javascript are not shown here)

If we want to personnalize the output, we would use the form_control_repeat plugin. Example which generates the same content as the default html generation like above:

    {form_control_repeat 'action', '<fieldset><legend>%s</legend>', '<div>%s</div></fieldset>'}
        <table class="jforms-repeat-item">
        {form_controls}
       <tr>
          <th><label>{ctrl_label}</label></th>{ctrl_control}<td></td>
       </tr>
        {/form_controls}
        <tr>
   <td colspan="2">{ctrl_control}</td>
</tr>
</table>
    {/form_control_group}

this plugin loops over all items of the repeat. And we should use formcontrols to loop over each controls of an item. The second and third argument of form_control_choice are the content before and after the list of items. "%s" is replaced by the label of the choice for the second argument, and replaced by the "add" button for the third argument. ctrl_control displays the "remove" button.

All comments are welcomed.

05/02/08 17:24:22 changed by bballizlife

In you example, it means that by default there will be 3 lines diplayed, but there could be 1 to 5, that's it ?

«dynamically» stands for javascript behaviour i suppose ?

I'm ok with that as the template plugins allow us to personnalize almost everything. Very good proposal, perfect for a jMedia module ;)

05/03/08 15:09:03 changed by laurentj

In you example, it means that by default there will be 3 lines diplayed, but there could be 1 to 5, that's it ?

Yes. You can have 5 input+upload maximum, and at least one input+upload. And in an empty form, there are 3 input+upload.

«dynamically» stands for javascript behaviour i suppose ?

Yes, I talk about javascript on click events on buttons "add" and "remove".

Download in other formats: Comma-delimited Text Tab-delimited Text RSS Feed