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.


3 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.


Hello Sean,
there was a little bit a misunderstood. You described how i can calculate the total of the overall entries in the repeating Container. Thats great and also a Problem of me. Many thanks.

But my origin question is i think an easier Problem. I changed a Little bit my widget that you can easier understand my Problem. The widget has two fields, the Input of the first is copied in the second field.

My Widget:

`<span ng-if="environment"><identicon name="{{}}" size="30" background-color="[255,255,255, 0]" foreground-color="[51,51,51]"></identicon> {{}}</span>
    Quelle: <input type="text" ng-blur="ctrl.copy()" id="pbInput" name="pbInput" class="form-control">
    <br />
    Ziel: <input type="text" id="pbOutput" name="pbOutput" class="form-control">


`function ($scope) {
    this.copy = function(){ 

    var pbInput = document.getElementById("pbInput");
    if (pbInput !== null && pbInput.value !== '') {
        document.getElementById("pbOutput").value = pbInput.value;
        document.getElementById("pbOutput").value = 0;

If i insert this widget in a repeating Container then only the first repeating element is calculated (copied).
If you enter a value in the second (e.g.) repeating field, nothing is copied in the Destination field. I think, the function in the widget copies always only the values from the first repeating entry.
How can i handle this? Is this a Problem of the scope of the function?

Many thanks for your Support!


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.