Deform sequences - add in automatically or in 'batches' rather than one at a time

[ngoone...@gmail.com]

So I'm using a sequence to allow the user to input qr code data (using a scanner). There's a lot of variability in terms of exactly how many rows I'll need (enough so I don't want to have a precursor page specifying the number, as that would require the user to count items rather than just start scanning them.

Initializing the form with X rows is trivial. Assuming the name of my sequence node is 'qrcodes', I can just render the form with form.render(appstruct={'qrcodes': ['']*X})

However if I don't know ahead of time how many rows I'll need, the user will at some point have to add rows. How do I get one of the behaviours below (top-most is most preferred):-

1. As user scans one qrcode and presses 'enter', a new row is automatically created. This breaks 'enter-to-submit', but that's okay for this case.

2. When user clicks on 'add new qr code' (the automatic javascript button which adds new items to the sequence, add a fixed number of rows (say 5) rather than just 1 as is currently the case.

My fallback if none of the above works would probably be to pre-fill about 50 'empty' rows and just discard what I don't need. That would suck on mobile though, having to scroll all the way down, but as usage is primarily desktop in this case that won't matter too much.

[tonthon]

Hi,

Le 12/03/2017 à 18:47, ngoone...@gmail.com a écrit :
> So I'm using a sequence to allow the user to input qr code data (using
> a scanner). There's a lot of variability in terms of exactly how many
> rows I'll need (enough so I don't want to have a precursor page
> specifying the number, as that would require the user to count items
> rather than just start scanning them.
>
> Initializing the form with X rows is trivial. Assuming the name of my
> sequence node is 'qrcodes', I can just render the form with
> form.render(appstruct={'qrcodes': ['']*X})

The Sequence widget has also a min_len attribute
http://docs.pylonsproject.org/projects/deform/en/latest/api.html#deform.widget.SequenceWidget

>
> However if I don't know ahead of time how many rows I'll need, the
> user will at some point have to add rows. How do I get one of the
> behaviours below (top-most is most preferred):-
>
> 1. As user scans one qrcode and presses 'enter', a new row is
> automatically created. This breaks 'enter-to-submit', but that's okay
> for this case.

You'll need to add some custom javascript code to perform this behaviour.

In the case your sequence items are only composed of the qrcode field,
something like this should work :

$('input[name=qrcode]').keypress(function(event){
|if(e.which ==13){
deform.appendSequenceItem(this);
| ||// prevent form submission|
return false;
}|
});

>
> 2. When user clicks on 'add new qr code' (the automatic javascript
> button which adds new items to the sequence, add a fixed number of
> rows (say 5) rather than just 1 as is currently the case.
>
> My fallback if none of the above works would probably be to pre-fill
> about 50 'empty' rows and just discard what I don't need. That would
> suck on mobile though, having to scroll all the way down, but as usage
> is primarily desktop in this case that won't matter too much.

> --
> You received this message because you are subscribed to the Google
> Groups "pylons-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to pylons-discus...@googlegroups.com
> <mailto:pylons-discus...@googlegroups.com>.
> To post to this group, send email to pylons-...@googlegroups.com
> <mailto:pylons-...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pylons-discuss/aaed5bb0-f5de-48b7-a791-952a3f9a0298%40googlegroups.com
> <https://groups.google.com/d/msgid/pylons-discuss/aaed5bb0-f5de-48b7-a791-952a3f9a0298%40googlegroups.com?utm_medium=email&utm_source=footer>.
> For more options, visit https://groups.google.com/d/optout.

[Jo G]

My thought would be that you need to link the sequence up and make Ajax calls to redraw the sequence input.

That way every time you 'scan' an event triggers an Ajax call to redraw that sequence with a new element.

To do this you will need your own version of the sequence and item templates with a callback section that contains the Ajax.

We've overridden a select box to return results via an Ajax call to a database.

Try and find what you want without deform and then go from there.

[Oon-Ee Ng]

Well, unfortunately the reason I'm using pyramid and deform is because I'm really a python dev not a web dev. Ajax is on my list, but it's been there for months now. Will try tonthon's javascript, looks like it'll probably solve my use-case, thanks!

--
You received this message because you are subscribed to a topic in the Google Groups "pylons-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pylons-discuss/3dtmfCBvM9E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pylons-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to pylons-discuss@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pylons-discuss/b990ffe6-92d6-4dc0-b9ec-a1c39de681cc%40googlegroups.com.

[Oon-Ee Ng]

Thanks for your reply, have just implemented it.

On Tue, Mar 14, 2017 at 7:37 PM, tonthon <tont...@gmail.com> wrote:

The Sequence widget has also a min_len attribute
http://docs.pylonsproject.org/projects/deform/en/latest/api.html#deform.widget.SequenceWidget

The 'issue' with min_len is that it is mandated, meaning if I put 3 (for example) the user cannot cancel one out.

>
> However if I don't know ahead of time how many rows I'll need, the
> user will at some point have to add rows. How do I get one of the
> behaviours below (top-most is most preferred):-
>
> 1. As user scans one qrcode and presses 'enter', a new row is
> automatically created. This breaks 'enter-to-submit', but that's okay
> for this case.

You'll need to add some custom javascript code to perform this behaviour.

In the case your sequence items are only composed of the qrcode field,
something like this should work :

$('input[name=qrcode]').keypress(function(event){
|if(e.which ==13){
    deform.appendSequenceItem(this);
|        ||// prevent form submission|
    return false;
}|
});

Thanks, this certainly worked. Some slight typos but nothing too hard even though I detest javascript generally. This is what I ended up using:-

$('input[name="qr_code"]').keypress(function(event) {
    if (event.keyCode == 13) {
        deform.appendSequenceItem(this);
        return false;
    }
});
 

[Oon-Ee Ng]

On Thu, Mar 23, 2017 at 12:16 PM, Oon-Ee Ng <ngoone...@gmail.com> wrote:

$('input[name="qr_code"]').keypress(function(event) {
    if (event.keyCode == 13) {
        deform.appendSequenceItem(this);
        return false;
    }
});
 

Just realized though (and this is clear in retrospect) that pressing enter in the new inputs will trigger submission of the form, as the function is not registered with the newly created input. To get around that, this is what I'm now using (event delegation, according to the docs I was following).

$(document).on("keypress", "input[name='qr_code']", function(event) {