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.
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 “”
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.
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: ${event.property} == 'Price'
Then handle the case when the user updates the Quantity Code: this.form0.form.patchValue({ Total: ${formData.Price} * ${event.value} }) Condition: ${event.property} == '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).
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}
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.
So I used this for the code: this.form0.form.patchValue({ LineTotal: ${myDataFromDb.Qty} * ${event.value} }) and the condition was ${event.property} == 'Price' rather than the custom formData.
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.
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?
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 info@radzen.com.
