Manually Managing a SubForm
This article explains how to create a subform, intended for 1 record, with custom Add/Edit button and a hidden table/display.
Lets start by adding a subform to our form and name it "subform" (the default).
DEMO LINK: https://forms.logiforms.com/formdata/user_forms/84085_1875042/393724/
1. Next, set the subform to hidden
2. Add 2 Single Button Elements to the form and name one 'Add' and the other one 'Edit'. Of you decide to use different names, be sure to update the references in the code below.
Add the following Actions > JS Actions on the buttons:
On the Add Button Action:
// This function will receive the field and form objects. function(field,form){ lfform.getFieldByName('SubForm').getContainer().find('.addbtn ').trigger('click') }
On the Edit Button Action:
// This function will receive the field and form objects. function(field,form){ lfform.getFieldByName('SubForm').getTableBody().find('.small-edit-btn').trigger('click') }
3. Finally, add an action on the forms load event (select the root form node and choose actions > js action) to tap into the rowupdate event of the subform and hide/show the add/edit buttons
// This function will receive the field and form objects. function(field,form){ var addlistener = function(){ if (!lfform.getFieldByName('SubForm').subFormInst){ addlistener.defer(100) return; } lfform.getFieldByName('SubForm').subFormInst.eventMgr.addListener( 'rowupdate',function(subform){ if (subform.curData.length==0){ subform.form.getFieldByName('Add').show() subform.form.getFieldByName('Edit').hide() }else{ subform.form.getFieldByName('Add').hide() subform.form.getFieldByName('Edit').show() } } ) } addlistener.defer(100) }
Note
You may want to hide the edit button initially and allow it to be shown by the listener script as needed. The rowupdate event is only called when rows are added or removed.
0 Comments