Add kg or g unit in field

Questions related to using nuBuilder Forte.

Add kg or g unit in field

Unread postby Olikun » Mon Apr 05, 2021 9:38 pm

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
Olikun
 
Posts: 63
Joined: Wed Mar 10, 2021 3:15 am
nuBuilder Version: 4.5

Re: Add kg or g unit in field

Unread postby kev1n » Mon Apr 05, 2021 9:52 pm

Which object type (Calc, Number etc.) is the field ?
kev1n
nuBuilder Team
 
Posts: 1705
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5

Re: Add kg or g unit in field

Unread postby Olikun » Mon Apr 05, 2021 10:02 pm

a couple of fields are "nuNumber" and a couple of "Calc" fields
Olikun
 
Posts: 63
Joined: Wed Mar 10, 2021 3:15 am
nuBuilder Version: 4.5

Re: Add kg or g unit in field

Unread postby kev1n » Mon Apr 05, 2021 10:45 pm

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';
}

kev1n
nuBuilder Team
 
Posts: 1705
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5

Re: Add kg or g unit in field

Unread postby kev1n » Mon Apr 05, 2021 11:59 pm

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
add_unit_to_input.png (1.01 KiB) Viewed 107 times


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')
kev1n
nuBuilder Team
 
Posts: 1705
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5

Re: Add kg or g unit in field

Unread postby kev1n » Fri Apr 09, 2021 4:51 am

Did that work for you?
kev1n
nuBuilder Team
 
Posts: 1705
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5


Return to General

Who is online

Users browsing this forum: oli and 16 guests