APEX

Hello,

In version 18.2 I created a custom toggle control on the Interactive Grid toolbar. I am attempting to use the onLabel and offLabel properties to change the button label dynamically. It works correctly, except for when the page initially loads. When the page loads, the button label is "null." However, once you click on the button, it changes it appropriately. It appears that my action does not initialize with a value, which makes sense, but I have no idea how to set an initial value. I have tried adding a "value" property, but that doesn't appear to do anything. I also tried adding the label property, but then the toggle to onLablel/offLabel doesn't work. The value I put for label remains.

Right now, I have the code in the javascript initialization section within the grid attributes. I know when we recently upgraded we had to move some stuff out of there and into the page load because of some changes regarding when/how those controls load. Perhaps this should move too? Although, the button does load correctly. It's just the labels that dont work. Also, the other button loads and works fine.

Also, when I view my action throughapex.region( "expenses-grid" ).call( "getActions" ).list() it shows my action with the label: Exclude Contractors/Include Contractors (as the other toggle controls do), even though the button label displays null.

Here is my code:

function(options) {
    apex.debug.info('options: ', options);   
    options.initialSelection = false;
    options.includeContractors = false;
    
    var $ = apex.jQuery,
        toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
        toolbarGroup2 = toolbarData.toolbarFind("actions2"); // this is the 2nd group with Edit button
        toolbarGroup3 = toolbarData.toolbarFind("actions3"); // this is the 3rd group 
        toolbarGroup4 = toolbarData.toolbarFind("actions4"); // this is the last group with Reset button
    // add our own buttons
    if (isAuthorized('CDI_EXPENSE_ADMIN')) {
        toolbarGroup4.controls.push( {           
            type: "BUTTON",
            iconBeforeLabel: true,
            id: "add-expense",
            icon: "fa fa-plus",
            action: "add-expense"
        });
        
        toolbarGroup3.controls.push( {           
            type: "TOGGLE",
            id: "incl-cont",
            action: "cont"
        });
    };
    options.toolbarData = toolbarData;
    options.initActions = function( actions ) {
        // can modify state of existing actions or add your own
        // can also pass in an array of actions to add
        apex.debug.info('actions: ', actions); 
        actions.add( {
            name: "cont",
            onLabel: "Exclude Contractors",
            offLabel: "Include Contractors",
            get: function() {
                return self.includeContractors;
                    },
            set: function( pValue ) {
               self.includeContractors = pValue;
              }
        } );
    
        actions.add( {
            name: "add-expense",
            label: "Add Manual Expenses",
            action: function(event, focusElement) {
                var addExpense = new Function($v('P12_ADD_EXPENSE_URL')); 
                apex.debug.info('event: ', event);
                addExpense();
            }
        } ); 
    }
    return options;
}

I appreciate any suggestions.

Thank you,

Jen