Repeat Divs with Section inside a form for dynamic

Wappler General Need Help
, ,
1

Hello,

I have a list of items that also need to have an input field for data to be entered in. The list is dynamic (Server Connect data). How can I submit a form with a dynamic list of data as an array.

I keep trying to do the form repeat or the DataStore option however non of these have resulted in success.

2

Have you seen this documentation?

Wappler Documentation - Inserting Data in Main and Sub Table using App Connect Form Repeat
and
Wappler Documentation - Using App Connect Form Repeater with Update Record Forms

3

Hi astroGlide,

If I understand your requirement correctly, add a serverconnect form, add form repeat inside the form with a server connect dynamic binding that is fetching the list of items.

In addition to displaying the list of items, provide an 'input' element to enter new data.

Then you can POST the server connect form that includes the list of items (ID, name etc.) and new data entered in the input fields. The data will be POSTed as an array, so you can run a repeat in the API to save new information for each item.

4

Yes that’s correct. Also I’ve tried to add the Form Data component inside of the form repeat, however that submits outside of the array.

5

Can you please show us the code and what data is being submitted in the payload (dev tools)?

6 
<form is="dmx-serverconnect-form" id="formSubmitShipment" method="post" action="/api/sample-requests/processes/submitSampleRequestShipment">



                <section class="body" key="id">
                    <div is="dmx-form-repeat" id="lineItems" dmx-bind:items="samplerequest.data.lines">
                        <section class="item">

                            <dmx-serverconnect id="getItemMaster" url="/api/products/item-masters/getItemMasterDetail" dmx-param:itemcode="itemCode"></dmx-serverconnect>
                            <div class="row">
                                <div class="col-1 align-self-center text-center">
                                    <img width="65px" height="65px" dmx-bind:src="getItemMaster.data['item-master'].mainImage">
                                </div>
                                <div class="col-3">

                                    <p>{{itemCode}}</p>
                                    <dmx-form-data id="submitItem" name="submitItem" dmx-bind:data="itemCode"></dmx-form-data>
                                    <p>{{getItemMaster.data['item-master'].productLineName}}</p>
                                    <p>{{description}}</p>
                                </div>
                                <div class="col-2">
                                    <p>{{qtyRequested+' '+uom}}</p>
                                </div>
                                <div class="col-2">
                                    <p class="byte-form-text">Qty ({{uom}})</p>
                                    <input id="qtyShipped" name="qtyShipped" type="text" class="form-control" dmx-on:changed="dataLinesItems.upsert({lineId: id},{itemCode: itemCode, qtyShipped: value, lineId: id})">
                                    <input id="dataItemCode" name="itemCode" type="text" class="form-control" dmx-bind:value="itemCode">
                                </div>
                                <div class="col-2">
                                    <p contenteditable="false">{{(qtyShipped.value &gt;= qtyRequested)?0+' '+uom:(qtyRequested - qtyShipped.value)+' '+uom}}</p>
                                </div>
                            </div>




                        </section>
                    </div>


                </section>
            </form>

I've been able to temporary add an input field inside of the form repeat component that has the value of the ItemCode variable, however it is my understanding that a Form Data component should work under the same principals like an input field, even when it's in a Form Repeat.

Below is the screenshot of the DevTools
image
image