Save two forms on page with one submit

Radzen Studio Angular
1

I have two forms on a page with two data sources. Would it be possible to save the results of the two forms with one submit button on the second form? I cant figure out how to setup the events and

2

Hi!

Yes, this is doable. To make it work you should data-bind the form components to the same page property and configure them to update their data by checking the forms’ UpdateDataOnChange property.

Here is the whole procedure:

  1. Create a page property if you don’t yet have one
    1. Add event handler of the page Load event. Click an empty area in the page designer or select “Page” from the selection dropdown in the property grid. This should show the Page Events in the property grid. Click the ‘+’ button to add a new event handler of the Load event.
    2. Set Type to ‘Set property’ and Value to {} (empty object)
    3. Set Name to formValue
  2. Data-bind both form components to formValue by setting their Data property to ${formValue}.
  3. Check the UpdateDataOnChange property of the forms. Now when the form changes the formValue property will update accordingly.
  4. In the Submit event of the second form use ${formValue} instead of ${event}. It will contain the data from both forms.

I hope this helps!

3

Thank. one other thing… I cant get the first form to call the odata web service and create the record or validate for required fields. Any ideas?

4

Oops. I think I have misunderstood your request. Are both forms representing different entities or the same one? I thought it was the latter. If not the workflow is a bit different.

  1. Create a page property for the first form (the one without submit buttons).
  2. Data-bind the first form only to that property and check its UpdateDataOnChange property.
  3. Handle the submit event handler of the second form and add two actions. First one invokes the data source method which creates the first entity and pass the page property as a parameter. The second action invokes the data source method which creates the second entity and pass ${event} as a parameter.
5

At the moment the first form will validate only when a field is blurred. Unfortunately there is no easy way to validate both forms when you submit the second. The submit event of the second form validates only that form.

The only possible workaround I can think of is to edit both entities in the same form. One can add arbitrary fields to a form even if they don’t belong to an entity - type the property name and click the ‘Add …’ link that will appear in the popup. Then during form submission you can again add two handlers invoking two different data source methods and pass them only the fields you need. Something like this:

Invoke

  • Name - createEntity1
  • Parameters
    • Name: ‘Entity1’
    • Value: { Property1: ${event.Property1}, Property2: ${event.Property2}}

Invoke

  • Name - createEntity2
  • Parameters
    • Name: ‘Entity2’
    • Value: {Property3: ${event.Property3}, Property4: ${event.Property4}}