Form Repeat new feature to access items

Wappler General How To
#1

Hi,

I’ve been following this thread: Access Form Repeat data and was happy to see that a new feature to access items within form repeat was added in Wappler 5.0.3: Wappler 5.0.3 Released

However, I still don’t see how to access form repeat data - I tried using syntax like form_rpt_id[index_id].subcomponent_id.selectedvalue but that didn’t work.

Anybody manage to use the new feature successfully, or is able to link some documentation for how to use it (the release notes are pretty bare on detaill)?

FormRepeat Data Access in Flow
#2

I have created an Image Gallery using the new features. The project may help you with an answer to your question.

Please see

I have started a video tutorial, but due to lack of time - clients wanting everything yesterday - I have had to delay finishing it off. Here is a preview:

Image Gallery

2 Likes
#3

Thanks @ben, maybe I am missing something but I can’t see where it is referencing the new functionality of access form repeat data. I couldn’t find a form repeat in the ejs files (I checked your index.ejs and gallery.ejs files).

Edit: found 1 form repeat in gallery.ejs file saved in the Admin folder (id formRepeatImages) but can’t find any other references in the code to this id.

#4

As the Form Repeat suggests, it is needed only when performing CRUD operations. In the case of the Gallery file, I have used it to show, sort and delete the images. If, instead of images, these were text inputs, then there would also be an update function.

Not sure what else you are missing.

#5

Thanks Ben, sorry I may be completely misunderstanding how it works, but I thought that a form repeat had to have a class of dmx-form-repeat for it to function.

These were the steps I took: So I tried looking at your code for instances of dmx-form-repeat, and only found one in the gallery.ejs file saved in the Admin folder. Then I tried looking up the id of that form repeat (formRepeatImages) but couldn’t find it referred to elsewhere in the code.

Am I missing something here?

#6

Line 61 in gallery.ejs is (re-arranged for readability):

<div 
    id="formRepeatImages" 
    class="row row-cols-6 gx-2 gy-2 mb-3" 
    is="dmx-form-repeat" 
    dmx-bind:items="ddGallery.data.images" 
    sortable="true" 
    handle=".drag-handle" 
    animation="200"
>

In the above and after the ID and Class, we see that it is a dmx-form-repeat that has images contained within the Data Detail data source called ddGallery.data.images. I have also set sortable to true with a handle class called drag-handle and animation duration of 200 milli seconds (0.2 second).

Why not create a new Wappler project based on the repository that I mentioned above. That way you can see it working.

for more:

1 Like
#7

Ah I see now, thank you for explaining!

I’ve actually got mine working another way using Javascript, but I see how you’ve done it using your own method with hidden form inputs and a delete API.

I was hoping that there are an easier way of doing it natively, and I thought that could now be done within Wappler tools directly after the new release. From what I understood from the Wappler 5.0.3 release notes, it made it sound like you could directly access form repeat data by referencing the relevant index of the form repeat like “form_repeat_id[index]…”. I think @patrick worked on that release - would you be able to confirm please?

1 Like
#8

You are right, I have used my own methods. If I had used Wappler’s method to delete an image, the button would’ve looked like

<button id="btnDeleteItem" class="btn  text-danger" dmx-on:click="formRepeatItems.remove($index)"><i class="far fa-trash-alt fa-fw"></i></button>