Page 1 of 1

Add kg or g unit in field

Posted: Mon Apr 05, 2021 2:08 pm
by Olikun
Hello,

how can I add kg or g in a field with numbers?

Under formats I can add several things, but not kg or g.
It is also in the front of the format, it should be in the back


Image

Re: Add kg or g unit in field

Posted: Mon Apr 05, 2021 2:22 pm
by kev1n
Which object type (Calc, Number etc.) is the field ?

Re: Add kg or g unit in field

Posted: Mon Apr 05, 2021 2:32 pm
by Olikun
a couple of fields are "nuNumber" and a couple of "Calc" fields

Re: Add kg or g unit in field

Posted: Mon Apr 05, 2021 3:15 pm
by kev1n
For calc fields, there's now a possiblity to modify their values (like adding "kg" or change the formatting like color etc.) after a calculation. You will have to pull the updated nuform.js file from Github.

Then, in your form's Custom Code, add:

Code: Select all

if (nuFormType() == 'edit' && !nuIsNewRecord()) {
    nuCalculateForm(false);
}

function nuCalculated(t, v, fixed) {
    // Replace you_calc_object_id with the object Id of "Gewicht nach Trocknung"
    if (v.id = 'you_calc_object_id') t.value = v + ' kg';
}


Re: Add kg or g unit in field

Posted: Mon Apr 05, 2021 4:29 pm
by kev1n
To show a unit (like kg) next to an input, add this css in the Setup -> Header field between the <style> tags.
add_unit_to_input.png

Code: Select all

.input_with_appended_unit input {
  padding-right: 22px;
  text-align: right
}
.input_with_appended_unit span {
  position: absolute;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
}
Then add this function in your form's Custom Code (or in the header, if it's used in more than one form):

Code: Select all

function nuAddUnitToInput(id, unit, top = 3, left = 8) {
    let obj = $("#" + id);
    obj.wrapAll('<div class="input_with_appended_unit"></div>');
    let objUnitId = id + '_' + unit;
    obj.after('<span id =' + objUnitId + '>' + unit + '</span>');

    $('#' + objUnitId).css({
        "top": obj.cssNumber("top") + top,
        "left": obj.cssNumber("left") + obj.cssNumber("width") + left,
        "font-size": obj.cssNumber("font-size")
    });
}
To add kg to an Input, call this JS when the form is loaded:

Code: Select all

nuAddUnitToInput('Replace_with_your_Input_object_ID', 'kg')