Dynamic button label

Set button label from calculated value by trapping control change events.

AuthorJan Eyres
Long Description A recent question on the community, https://community.nintex.com/thread/12252, was asking if it was possible to set a button label dynamicallyusing values selected on the form. I hadn’t tried this before so I thought I’d take a look at it and it turned out to be slightly trickier thanI had anticipated. The example uses a calculated value which has a simple formula that concatenates the value(s) of each control. Event listenersare attached to each control using script to detect changes and each time an event is triggered the button label is updated from thecalculated value. To implement this solution:Create a calculated value control and give it a formula that evaluates to the text you want to display on the buttonStore the Client ID of the calculated value in a JavaScript variable, the example has it as ‘jsCalculatedField’Apply a custom CSS class to the button, the example has it as ‘myButtonLabel’.Paste the script from the zip file into the Form – Settings – Custom JavaScript tabApply custom CSS classes to the controls on which you want to attach event listeners as follows: ControlCSS classPeoplechangeTriggerPeopleChoice – drop down listchangeTriggerDropListChoice – list multiple selectionchangeTriggerListChoice – option buttonschangeTriggerRadioChoice – check boxes multiple selectionchangeTriggerCheckboxDate/TimechangeTriggerDateSingle line textboxchangeTriggerTextMultiline textboxchangeTriggerRichText
DependenciesNone
Support InfoJan Eyres
CompatibilityNintex Forms 2013
PlatformSharePoint Server 2013
Screenshots  
Additional InformationNWF.FormFiller.Events.RegisterAfterReady(function () {    function setButtonLabel(id, buttonclass) {
        var delay = 50;
        setTimeout(function () {
            var replacetext = NWF$(“#” + id)[0].defaultValue;
            NWF$(buttonclass + ” input”).prop(‘value’, replacetext);
        }, delay);
    };    //peoplepicker
    NWF$(“.changeTriggerPeople”).find(“input.nf-peoplepicker”).each(function () {
        new NF.PeoplePickerApi(NWF$(this)).added(function () {
            setButtonLabel(jsCalculatedField, ‘.myButtonLabel’);
        });
        new NF.PeoplePickerApi(NWF$(this)).removed(function () {
            setButtonLabel(jsCalculatedField, ‘.myButtonLabel’);
        });
    });    //choice – drop down list
    NWF$(“.changeTriggerDropList”).find(“select”).each(function () {
        NWF$(this).change(function () {
            setButtonLabel(jsCalculatedField, ‘.myButtonLabel’);
        });
    });    //choice – list multiple selection
    NWF$(“.changeTriggerList”).find(“select”).each(function () {
        NWF$(this).change(function () {
            setButtonLabel(jsCalculatedField, ‘.myButtonLabel’);
        });
    });    //single line textbox
    NWF$(“.changeTriggerText”).find(“input[class*=’nf-associated-control’]”).each(function () {
        NWF$(this).change(function () {
            setButtonLabel(jsCalculatedField, ‘.myButtonLabel’);
        });
    });    //multiline textbox
    NWF$(“.changeTriggerRichText”).find(“textarea[class*=’nf-associated-control’]”).each(function () {
        NWF$(this).keyup(function () {
            setButtonLabel(jsCalculatedField, ‘.myButtonLabel’);
        });
    });    //choice  – option buttons
    NWF$(“.changeTriggerRadio”).find(“input[type=radio]”).each(function () {
        NWF$(this).change(function () {
            setButtonLabel(jsCalculatedField, ‘.myButtonLabel’);
        });
    });    //choice – checkboxex
    NWF$(“.changeTriggerCheckbox”).find(“input[type=checkbox]”).each(function () {
        NWF$(this).change(function () {
            setButtonLabel(jsCalculatedField, ‘.myButtonLabel’);
        });
    });    //datetime date portion
    NWF$(“.changeTriggerDate”).find(“input[class*=’nf-date-picker’]”).each(function () {
        NWF$(this).blur(function () {
            setButtonLabel(jsCalculatedField, ‘.myButtonLabel’);
        });
    });    //datetime time portion
    NWF$(“.changeTriggerDate”).find(“select[class*=’nf-datepicker-select’]”).each(function () {
        NWF$(this).change(function () {
            setButtonLabel(jsCalculatedField, ‘.myButtonLabel’);
        });
    });    
});

Nintex Xchange Terms of Use Policy

Nintex makes no warranty or guarantee about the reliability, performance, quality, or functionality of any assets, and any assets you install are therefore provided as is. By downloading this asset, you agree to the terms of use.