iFormBuilder JavaScript Tips & Tricks
What's covered:
- What are Subforms?
- How do I pass data from a Parent form to a Subform?
- How do I pass data from a Subform to a Parent form?
- Form Packages
What are Subforms?
Subforms can be used to condense your form and break up larger form sections into smaller forms.
Click here for more information on how to create and implement Subforms.
How do I pass data from a Parent form to a Subform?
To pass data from a Parent form to a Subform, please follow the instructions below.
STEP 1. You must first create your Parent form. In this example, we'll be creating a simple Parent with a Text element and a Subform element.
STEP 2. In the Dynamic Value of your Text element, put pass_data_parent_to_sub.pass_data_1
This will set the element to an empty string and ensure that the element value resets with each new record. The format is parent_form_name.element_name
STEP 3. Now we'll create our Subform. In this example, the Subform will include a Text element with a data column name of data_from_parent.
STEP 4. In the Dynamic Value of the Text element, put: pass_data_parent_to_sub.pass_data_1
- pass_data_parent_to_sub is the table name of the parent form.
- pass_data_1 is the element name on parent form from which data is passed to the subform.
PLEASE NOTE: You can find the table name at the bottom of the Form Builder as shown below. Be sure to navigate back to the parent form in the Form Builder to get the correct table name.
STEP 5. Back on the Parent form, link the Subform you just created to the Subform element on the Parent form.
Highlight the Subform element, and from the Smart Paging tab, select Subform List.
Search for the Subform you created and select it.
STEP 6. The Parent form and Subform are now linked. Test on your device to ensure the data passes from Parent to Subform.
How do I pass data from a Subform to a Parent form?
Your workflow may require that data entered on a subform level to show on a higher level. The example below will walk through how to do just that.
STEP 1. On the Subform we created above, add a Text element with a data column name of data_to_parent.
STEP 2. In the Dynamic Value of your Text element, put passing_parent_data_subform.data_to_parent
This will set the element to an empty string and ensure that the element value resets with each new record. The format is subform_name.element_name
STEP 3. On the Parent form we created above, create a Text element with a data column name of data_from_subform.
STEP 4. In the Dynamic Value field of the element put the following:
pass_data_parent_to_sub.my_subform_element[0].data_to_parent
We'll go over what all of that means, next.
- pass_data_parent_to_sub: This is the Table Name of the Parent form.
- my_subform_element: This is the data column name of the Parent form's Subform element. This is where most users go wrong when setting up this functionality. This is not the element on the Subform or the Table Name of the Subform. It is the data column name of the Subform element on the Parent form.
- [0]: This is the position in the array. For example, a single-paging subform would always be [0], but a multi-paging subform could be [0] or any number higher than that.
- data_to_parent: This is the element on the Subform itself that you're passing the data from.
STEP 5. Test on your device to ensure the data passes from Subform to Parent.
Passing Data Form Packages
Below are a couple of form packages that we think you'll find useful. One is a form package of the forms will built out in this tutorial. The other was put together by our resident yoda, Tony, showing how to pass data between different levels of Subforms. Import them into your profile to help get you started.
Comments
16 comments
Is this only possible with Text and Number widgets?
I am unable to pass Date-Time values to a subform in this way.
@ Simon, you can pass other data points around, just not media
@ Ben, please make sure you constructed the function properly to display the variable being passed in
Tony, I am having the same problem as Ben passing a date. I tried doing it as a number and as text, no dice.
Also, I can pass a pick list value from parent to child form provided both elements are pick list type, however a pick list type then does not have a read only option. The result (in addition to the undesired potential to change the sub form value) is that it now appears on sub-form as a field rather than a text only value. It would be nice if all values passed to sub-form appear there in consistent format i.e. read only text.
Any Solution for passing Date-Time?
Hi Mel, yes you can use the Date() javascript function to pass this information around
Hi Guys,
I had an issue where I wanted to put the value of a Date/Time widget from a subform into a Text widget on the parent form.
Subform Date/Time Widget: datetime
Parent Text Widget: theDate
If you set the dynamic value field of 'theDate' to 'datetime' nothing is displayed. However, if you set it to 'datetime.toString()' the date from the subform appears in the text widget. This solved my particular problem as I just wanted to check that a date was entered on the subform.
toString() is a built-in Javascript method. In this case it converts a Date object into a string.
Thought I'd post this in case others had a similar issue.
Passing from 1st or 3rd level child forms works. New Challenge: want to pass data from a 3rd level subform back to the 2nd level subform, can't seem to get this to work
I can pass the data back to the parent from the 2nd level subform so the example above works. A work around is to them pass from the parent back down to the 1st level subform. Just seems like there is an easier way.
https://iformbuilder.zendesk.com/hc/en-us/articles/201697700/comments/207090863
Has this problem been resolved? I am experiencing the same issue.
I can pull data from a 3rd level form to the 1st level parent form. But I am unable to pull data from a 3rd level form to a 2nd level form.
Hey Dave, I attached a form package to the bottom of the article which pulls data from the third level back to the second. Here is a link to the package directly.
https://iformbuilder.zendesk.com/hc/en-us/article_attachments/115003026366/Package_Third_Level_back_to_Second.json
Hope that helps!
Thanks Tony will give this a look
Any possibility you can put an example of a more complicated passing of data?. The part where I seem to struggle is when I want to pass data directly from a third level to the 1st level not just once but everytime a new third level form is created. An example using the [.index] instead of the [0] or any actual # would be good.
Please sign in to leave a comment.