Computed fields in UI Designer

Q&A
1

Hello,

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.

Boris

2

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:
First number:
Last number :

Summed :
  1. In the Controller delete everything and add the following:
function ($scope) { 
// define a function to be used in template with ctrl.sumFields()
this.sumFields = function(){ 

    var pbInput01 = document.getElementById("pbInput01");
    var pbInput02 = document.getElementById("pbInput02");
    if ((pbInput01 !== null && pbInput01.value !== '') &&
        (pbInput02 !== null && pbInput02.value !== '')) {

        document.getElementById("pbInput09").value = 
            Number(pbInput01.value) +
            Number(pbInput02.value);
    }
    else{
        document.getElementById("pbInput09").value = 0;
    }
};

}

Add to a page and test

regards
Seán

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

3

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.

Thanks,
Boris

4

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:
Template

{{environment.component.name}}

Quelle:
Ziel:

Controller:

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

    var pbInput = document.getElementById("pbInput");
    if (pbInput !== null && pbInput.value !== '') {
        document.getElementById("pbOutput").value = pbInput.value;
    }
    else{
        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!

5

OK well you can’t just use the widget as is…you 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:

var summation = 0; for (each item found in Class){ if (number){ summation = Number(summation) + Number(itemInClass); } }

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.

regards
Seán

6

A Tip on displaying CODE/LOGS correctly in Posts:

Do not use the Supplied Buttons above, for some reason they refuse to work correctly, and despite bringing it to Bonitasofts attention, it’s low priority.

To Show Code/Logs correctly use

< code >
your code/log
< /code >

removing the spaces to allow the showing of code/logs correctly as here:

your code/log

You should still be able to edit your post to ensure the correct formatting of the code to help us understand it easier.

Thanks and regards
Seán

7

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?

As we’re using JavaScript to directly manipulate the DOM this will always happen, it will use the first element called pbOutput

I think you’ll have to design it another way or use a different method (for example a third party table).

I only designed the widget to have one Summation field, you’re looking at a summation field per row…something completely different and unfortunately I don’t have an answer for that.