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.
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
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.
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.
Can you please show us the code and what data is being submitted in the payload (dev tools)?
<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 >= 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
The change event on the input qtyShipped is not submitting the form correctly.
dmx-on:changed="dataLinesItems.upsert({lineId: id},{itemCode: itemCode, qtyShipped: value, lineId: id})"
To submit the main serverconnect form with the form-repeat inside, modify the code as below:
<input id="qtyShipped" name="qtyShipped" type="text" class="form-control" dmx-on:changed.debounce:1000="formSubmitShipment.submit()">
This is the payload after submitting the serverconnect form.
The qtyShipped field submits data correctly. However the issue lies in the Form Data component.
<dmx-form-data id="postItemCode" name="itemCode" dmx-bind:data="itemCode"></dmx-form-data>
This Form Data is inside of the Form Repeat, however when it submits the form the form data value is submitted outside of the array.
Example:
How can I get the itemCode Form Data component to submit the value inside of the array?
As highlighted in my previous reply, this code is submitting / loading dataLinesItems, which is not the same as submitting the serverconnect form that contains the form repeat. I'm not familiar with dmx-form-data element and whether it can be used to POST data / values.
dmx-on:changed="dataLinesItems.upsert({lineId: id},{itemCode: itemCode, qtyShipped: value, lineId: id})"
To POST values as an array from a repeat, you need input elements in a form-repeat inside a serverconnect form. There are already two input fields - qtyShipped and dataItemCode. If you modify the dynamic change event to submit the main serverconnect form formSubmitShipment, then it will POST the form-repeat and its input values as an array.
<input id="qtyShipped" name="qtyShipped" type="text" class="form-control" dmx-on:changed.debounce:1000="formSubmitShipment.submit()">