Computed fields in UI Designer



i have looked, searched, tried.... but i cannot find a way.

How is it possible to make computed fields on a form in the new UI Designer (Community Edition).

E.g. Field Sum should display a computed value of the fields price and quantity (Price * Quantity).

Thanks for any hint,help,link, example.


2 answers


Yes it is,

But it's not as easy as you might have hoped...

You need to add the fields as Custom Widgets that use ng-blur so when they loose focus they total up the various fields

for example (tested)

1) Create a new Custom Widget
2) Delete all parameters
3) In the Template delete everything and add the following:

  1. <div>
  2. First number: <input type="text" ng-blur="ctrl.sumFields()" id="pbInput01" name="pbInput01" class="form-control">
  3. <br />
  4. Last number : <input type="text" ng-blur="ctrl.sumFields()" id="pbInput02" name="pbInput02" class="form-control">
  5. <br />
  6. <br />
  7. Summed : <input type="text" id="pbInput09" name="pbInput09" class="form-control">
  8. </div>

4) In the Controller delete everything and add the following:

  1. function ($scope) {
  3. // define a function to be used in template with ctrl.sumFields()
  4. this.sumFields = function(){
  6. var pbInput01 = document.getElementById("pbInput01");
  7. var pbInput02 = document.getElementById("pbInput02");
  8. if ((pbInput01 !== null && pbInput01.value !== '') &&
  9. (pbInput02 !== null && pbInput02.value !== '')) {
  11. document.getElementById("pbInput09").value =
  12. Number(pbInput01.value) +
  13. Number(pbInput02.value);
  14. }
  15. else{
  16. document.getElementById("pbInput09").value = 0;
  17. }
  18. };
  20. }

Add to a page and test


PS: As this reply answers your question, please mark as resolved.


Hi Seán,

many thanks for this answer. A big step Forward for me!!!

But now i have a next Problem and perhaps anyone has an idea!

I have this Custom widget in a repeating Container and now Only the first repeating widget is calculation correctly.
If i made changes in e.g. the second, then the first one is recalculated.



Submitted by Sean McP on Mon, 03/20/2017 - 21:56

OK well you can't just use the widget as need to change it accordingly.

However to help you along in this case:

The total field needs to be separate so just create a separate total field at the bottom (I suggest a custom field as you can give it an id, standard widgets can't have one (as yet)) and remove it from the widget I gave you.

Create a simple unique CSS Class that does basically nothing and add it to the input fields in the already existing widgets.

In the code change getElementById to getElementByClass which will pick up all our Class items, then loop through the collection with code something like this:

  1. var summation = 0;
  2. for (each item found in Class){
  3. if (number){
  4. summation = Number(summation) + Number(itemInClass);
  5. }
  6. }

and put it into the total field as previously.

I haven't got time to do it, but this will get you there with a bit of research into JavaScript etc.