This application is not used any more and exists only for history. Post new tickets on the Github account.
Cette application n'est plus utilisée, et existe uniquement pour son historique. Postez les nouveaux tickets sur le compte github.

Ticket #566 (assigned new feature)

Opened 6 years ago

Last modified 23 months ago

jForms: support of <repeat>

Reported by: laurentj Owned by: obs
Priority: normal Milestone:
Component: jelix:forms Version: 1.0.3
Severity: normal Keywords:
Cc: bernardes.claudio@… Blocked By:
Blocking: Documentation needed: no
Hosting Provider: Php version:

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".

Attachments

repeat.diff (9.7 KB) - added by dubphil 6 years ago.
first step
repeat.2.diff (11.5 KB) - added by dubphil 6 years ago.
repeat.3.diff (18.9 KB) - added by laurentj 6 years ago.
repeat.4.diff (19.2 KB) - added by dubphil 6 years ago.
repeat.4.2.diff (18.0 KB) - added by dubphil 6 years ago.
sans les mine
repeat.5.0.diff (22.3 KB) - added by bastnic 6 years ago.
repeat.5.0.2.diff (24.0 KB) - added by bastnic 6 years ago.
repeat.5.1.diff (26.8 KB) - added by bastnic 6 years ago.
ajout du remplissage automatique des champs - prochaine étapes : les validations
repeat.5.1.1.diff (28.3 KB) - added by mike 6 years ago.
just litle improvements and some checking
repeat.5.2.diff (28.4 KB) - added by bastnic 6 years ago.

Change History

comment:1 Changed 6 years ago 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.

comment:2 Changed 6 years ago 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 ;)

comment:3 Changed 6 years ago 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".

Changed 6 years ago by dubphil

first step

comment:4 Changed 6 years ago by dubphil

  • review set to review?

just attached the first step of the <repeat> patch

Changed 6 years ago by dubphil

comment:5 Changed 6 years ago by dubphil

Here is the second step, but I don't know how to add the js control and the js remove to the dynamicaly added fields...

Changed 6 years ago by laurentj

comment:6 Changed 6 years ago by laurentj

  • review review? deleted

I worked on the javascript part. There is a jFormsJQRepeatGroup object. The builder should generate javascript instructions :

  • to create an instance of this object
  • to create two javascript function and attach them on the object (_addElements and _removeElements)
  • this generated function should contains javascript code to generate html elements + calls to the addControl method of the jforms object, or to remove html elements + calls to the removeControl method.

The PHP part of the implementation of the repeat control is not finished.. I will see after it later.

comment:7 follow-up: ↓ 8 Changed 6 years ago by dubphil

I'have little difficulties to undestand exactly the output the builder must provide considering the javascript part.

is this kind of thing for example of the addElemnts (I know it is not this but just show me the right direction) ?

c = new jFormsJQRepeatGroup('uploadedfile'); $('#adduploadedfile').click(_addElements : function(c,n){ c = new jFormsJQControlString('filelabel[n]','title for the file'); jFormsJQ.tForm.addControl(c); c = new jFormsJQControlUpload('file[n]','the file to upload'); jFormsJQ.tForm.addControl(c); $('#tableuploadedfile').append('...HTML ELEMENTS...')})

I feel to mix javascript object and function call and jquery directives, in other words i'm completely lost...

comment:8 in reply to: ↑ 7 Changed 6 years ago by dubphil

  • Status changed from new to assigned
  • Owner set to dubphil

Ok I have found the way to manage the javascript part of the <repeat> feature, I will have time to finish it in November.

comment:9 Changed 6 years ago by mike

Just to know if the development is still in progress ? I need some of the repeat features and I can work on it if I get some instructions on what to do first. I don't believe Dubphil is still on it since October ... ;)

comment:10 Changed 6 years ago by laurentj

Dubphil, if you can give us at least the last version of your work...

Changed 6 years ago by dubphil

Changed 6 years ago by dubphil

sans les mine

Changed 6 years ago by bastnic

comment:11 Changed 6 years ago by bastnic

  • Owner changed from dubphil to bastnic
  • Status changed from assigned to new

I'm now working on this ticket.

I've a lot of work to do on it, i just began to work on the recuperation of POSTed data.

comment:12 Changed 6 years ago by bastnic

  • Status changed from new to assigned

Changed 6 years ago by bastnic

Changed 6 years ago by bastnic

ajout du remplissage automatique des champs - prochaine étapes : les validations

Changed 6 years ago by mike

just litle improvements and some checking

comment:13 Changed 6 years ago by mike

Just one thing I did'nt understand... Why on the last patch are you starting at 1 for the index of the controlRepeat child? Surely for a good reason !

Changed 6 years ago by bastnic

comment:14 Changed 6 years ago by laurentj

  • Milestone set to Jelix 1.2

comment:15 Changed 5 years ago by laurentj

  • Milestone changed from Jelix 1.2 beta to Jelix 1.3

comment:16 Changed 4 years ago by laurentj

  • Milestone Jelix 1.3 deleted

comment:17 Changed 4 years ago by obs

  • Cc bernardes.claudio@… added

comment:18 Changed 4 years ago by obs

  • Status changed from assigned to new
  • Owner changed from bastnic to obs

comment:19 Changed 3 years ago by laurentj

  • Status changed from new to assigned
  • Owner changed from obs to laurentj

comment:20 Changed 3 years ago by laurentj

  • Status changed from assigned to confirmed
  • Owner laurentj deleted

comment:21 Changed 23 months ago by obs

  • Status changed from confirmed to assigned
  • Owner set to obs
Note: See TracTickets for help on using tickets.