Dynamic button label

Document created by janeyres Moderator on Jun 21, 2016Last modified by eharris04 on Mar 6, 2017
Version 3Show Document
  • View in full screen mode

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

 

                                            

 

 

AuthorJan Eyres
Long Description

 

Animation.gif

A recent question on the community, https://community.nintex.com/thread/12252, was asking if it was possible to set a button label dynamically

using 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 than

I had anticipated.

 

The example uses a calculated value which has a simple formula that concatenates the value(s) of each control. Event listeners

are attached to each control using script to detect changes and each time an event is triggered the button label is updated from the

calculated value.

 

To implement this solution:

  1. Create a calculated value control and give it a formula that evaluates to the text you want to display on the button
  2. Store the Client ID of the calculated value in a JavaScript variable, the example has it as 'jsCalculatedField'
  3. Apply a custom CSS class to the button, the example has it as 'myButtonLabel'.
  4. Paste the script from the zip file into the Form - Settings - Custom JavaScript tab
  5. Apply custom CSS classes to the controls on which you want to attach event listeners as follows:

 

ControlCSS class
People changeTriggerPeople
Choice - drop down listchangeTriggerDropList
Choice - list multiple selectionchangeTriggerList
Choice - option buttonschangeTriggerRadio
Choice - check boxes multiple selection changeTriggerCheckbox
Date/TimechangeTriggerDate
Single line textboxchangeTriggerText
Multiline textbox

changeTriggerRichText

Dependencies

None

Support Info

Jan Eyres

Compatibility

Nintex Forms 2013

Platform

SharePoint Server 2013

Screenshots

 

 

Additional Information

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

2 people found this helpful

Outcomes