Default calculated value on Add form

I have a form on a page that I need to display information such as a calculated value. I have 2 fields (Qty and Price). I have a 3rd field TotalSales that is Qty * Price. I want to be able to display this information before the user submits the record. How is this accomplished. Currently I have the database setting the value after insert but it is obviously not available until the record is created. I have a few other fields like this, costs and taxes for example. How would I set these defaults here so that it is valid before submission. I can remove the database default at that point.

I would like the edit form to be able to update the data as well if the user changes it later.

Hi Josh,

Please check this thread for more info:

Best Regards,

What does the [52] represent?

My condition would then be ${} == ‘Price’ [52] form0 * ${} == ‘QTY’ [52] form0

It is not working with that

[52] is just a link to an image from the thread I’ve posted. This is how our forum is providing preview of a thread.

I’ve got the code in (SalesTotal is the field I want to calculate. QTY is another field on the form as is SalesPrice):

this.form0.form.patchValue({SalesTotal: QTY * ${event.value}})

with the condition

${} == ‘SalesPrice’

I get no response in the SalesTotal field. Am I missing something here?

I do see in the Chrome dev tools this message:

The specified value “NaN” is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?"

Is this telling me that it is seeing SalesTotal as a string field? The original data type of the field was varchar but is now numeric(15,2). I have re-inferred the database schema and set the datatype on the form to numeric but it still fails. I can validate that when I enter data into the two fields with a breakpoint (Qty = 10, and SalesPrice = 2) it shows correctly but I can’t see the result of it. If I hover over SalesTotal the value is still “”

Hi @joshwilliam,

This expression will probably error out:

this.form0.form.patchValue({SalesTotal: QTY * ${event.value}})

There has to be a variable called QTY in order for this to work. Can you attach the JSON of your page so we can help you further? Usually one can set the Data of a Form component, then set the UpdateDataOnChange property of the form to true and then access any interim form field value.

Posted this in the wrong thread :frowning:

Decided to describe the process.

  1. Create a page property which will contain the form state (current field values). This is needed to perform the calculations easily.

  2. Set the Data and UpdateDataOnChange properties of the Form component. We want the page property to be up-to-date with the current form value.

  3. Handle the Change event of the form and update the calculated field accordingly. We need Execute JavaScript code actions that will set the calculated form field value.

    • First handle the case when the user updates the Price -
      Code: this.form0.form.patchValue({ Total: ${formData.QTY} * ${event.value} })
      Condition: ${} == 'Price'`)
    • Then handle the case when the user updates the Quantity
      Code: this.form0.form.patchValue({ Total: ${formData.Price} * ${event.value} })
      Condition: ${} == 'QTY'

The third step uses the current form field value via ${formData.QTY} and ${formData.Price} (remember that we created a page property called formData and set the Form's Data property to it).

I am also attaching a sample application:

1 Like

How would this type of update be handled on the new TemplateForm, which I love by the way? It does seem that the change events I had setup for this were removed when I converted the form to a templateForm.

It is even easier with the TemplateForm! You just need to handle the Change event of the input components (Price and QTY) and use this code: ${formData.Total} = ${formData.QTY} * ${formData.Price}

Here is the updated application:

1 Like

I am looking to implement almost exactly the same but I don't understand this so much.

What confuses me about it is the formData and setting my form's data source to formData rather than the myData from the database. In the demo provided, the form just has 3 properties. Mine has 10 or 12 with only 3 being responsible for the calculation.

I want the same in principle for an order form. Qty * Price = LineTotal. I want it to be persisted though for when the client wants to report on this data at a later date.

I could use a calculated column in SQL but the update doesn't take place until the data is saved, and rightly so. I would prefer if the user were to see the result of the calculation before saving the record.

How can I handle this using the data from the database rather than creating my own form data? Is that possible?

The approach is the same no matter the number of form fields (10 vs 3). You have to handle the Change event of the Form component and update the calculated field.

How can I handle this using the data from the database rather than creating my own form data? Is that possible?

The approach is the same - Radzen has generated a page property which contains the data from the database. It is set by invoking the getXXXById method when the edit page loads.

I see, thank you. It's working now.

So I used this for the code: this.form0.form.patchValue({ LineTotal: ${myDataFromDb.Qty} * ${event.value} }) and the condition was ${} == 'Price' rather than the custom formData.

Thanks again.

Originally I implemented this on an edit form and now see why the formData is required on a new data form. I guess that's why it didn't make much sense to me originally. I guess with a new data form, I have no choice but to implement formData to do what I want to achieve?

With new forms there isn't any data from the database. And you need somewhere to store form field values in order to perform calculations. So yes - you would need a page property that stores the form fields e.g. formData.

Ok, so I'm still struggling with this a little.

I'm doing two things.

  1. Setting the Film Purchase Order Id at the time that the form (formData is created. (this.myData.PurchaseOrderId = this.parameters.PurchaseOrderId))

  2. The Line Total is calculated when either the KG or Price is updated.

However, when the entity is passed to the POST controller, these two properties don't have a value despite them being populated on the form:

Feel like I'm missing something somewhere.


We need to see the rest of the code/page. Is the createXXX method using myData or something else as a parameter?

The submit create method passes ${event} in the parameter. I did think this could be a problem and passed ${myData} but the item that is passed to the controller is null.

Do you need to see anything else? I could send the project if that helps?

Thanks for your continued support.

Yes, you should be sending ${myData} as it contains the calculated properties. The ${event} of the Submit event contains the current "state" of the form - the values of all inputs.

If the controller gets null then maybe some some required (non-nullalbe) properties are missing. You can check in your browser dev tools the POST request and see what get's posted.

In case you need further assistance you can send us your project to