Why do I get "AJS.MacroBrowser is undefined"?


I’m following the tutorial about “hidden macro parameters”: Including information in your macro for the Macro Browser

I’ve managed to add a new parameter and the following Javascript file gets deployed when I upload my plugin:

AJS.MacroBrowser.setMacroJsOverride("example-formatting", {
    fields: {
        string: {
            "willbehidden": function (param) {
                var parameterField = AJS.MacroBrowser.ParameterFields["_hidden"](param, {});
                if (!parameterField.getValue()) {
                    parameterField.setValue('hidden field value');
                return parameterField;

However, when I pick my macro from the macro browser the console keeps giving me such an error:

Failed to run init function: AJS.MacroBrowser is undefined 
function () TypeError: AJS.MacroBrowser is undefined

I’ve also tried to wrap the JS code into this block, which is not included in the tutorial code, but elsewhere it’s described as being mandatory:

	// above code

However, this does not resolve the issue, even though AJS.MacroBrowser is available to me in the console. Purging the browser cache doesn’t help. I’m totally stuck and would appreciate any help.


I’m a bit further, it seems that the MacroBrowser dependency in the web-resource is really crucial (and I somehow messed that up):


Now the error is gone, but the JS code has zero effects :frowning: I’d expect the hidden field to actually get hidden, but it’s still there. Also, I would expect the field to get hidden if I just execute the whole command in the console, but nothing happens.

Oh! This is so frustrating :angry:
I wasted hours only to find out that AJS.MacroBrowser.setMacroJsOverride(macro, func) takes the xhtml-macro name as its first argument, not the key!