Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Deleted user
0 / 0 points
Next:
badges earned

Your Points Tracker
Challenges
Leaderboard
  • Global
  • Feed

Badge for your thoughts?

You're enrolled in our new beta rewards program. Join our group to get the inside scoop and share your feedback.

Join group
Recognition
Give the gift of kudos
You have 0 kudos available to give
Who do you want to recognize?
Why do you want to recognize them?
Kudos
Great job appreciating your peers!
Check back soon to give more kudos.

Past Kudos Given
No kudos given
You haven't given any kudos yet. Share the love above and you'll see it here.

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

How to use AJS.MacroBrowser.setMacroJsOverride

Hi everyone,

I'm looking for a proper example on how to use AJS.MacroBrowser.setMacroJsOverride, I would like to override the macro browser with my own app. How do I set the variables? how do I pass them to my app? how do I preview the results?

I've read through:
AtlasCamp 2010: Making Confluence Macros Easy

And went over the resah sample plugin in bitbucket:
https://bitbucket.org/resah/confluence-macro-tutorial/wiki/Home#markdown-header-insert-with-custom-gui

and also went through some stackoverflow topics, but still could not find a proper solid usage sample or documentation.
I'm looking the macro-browser.js and macro-browser-fields.js files, but Im looking for something that will provide some solid examples or explanation to speed up the development process.

Help!

Thanks!

5 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

8 votes
Answer accepted

Since there's no doc for this, the Confluence source is the only place to look. You want to override the "opener" to open your own custom "MacroBrowser":

AJS.MacroBrowser.setMacroJsOverride('macroname', {
        opener: function (macro) {
            ... your code to open a dialog of yours...

 

Once the user is done fiddling with the parameters, here's how to insert the macro in the body:

tinymce.confluence.macrobrowser.macroBrowserComplete({name: "macroname", "bodyHtml": undefined, "params": {}});

I've spent 10 months figuring this out. Hope you'll make a good use of it ;)

Your answer to that question was a huge help for me, while figuring out the above answer. Thanks a lot Adrien!

Hi Adrien! thanks for your reposnse.

Could you please clarify what is

tinymce.confluence.macrobrowser.macroBrowserComplete({name: "macroname", "bodyHtml": undefined, "params": {}});

this line of code is used for? I am able to insert the macro to the page without it....

I think it replaces the macro at the cursor position with the given macro. It sets the macro parameters and body too. If you set them manually (by setting $("img").attr("data-macro-parameters", {...})), then you can't update the image of the macro, whereas macroBrowserComplete() does.

It works, thanks to all contributers @Tiago Santos @Adrien Ragot @Aviram Gabay. Best regards.

Well I've found out how to use the "fields" part at least, which seems to be the one you are interested in.

To set a value is pretty simple

var jsOverrides = {
    "fields" : {
        "string" : {
        	"macroField" : function(params,options){
            	var field = AJS.MacroBrowser.ParameterFields["string"](params, options);
            	field.setValue("desiredValue");
                return field;
        	}        
         }
    }
};
AJS.MacroBrowser.setMacroJsOverride("macroName", jsOverrides);

About the previweing, it works as one might expect, in the form, any value you've set to the field will be visible, if you wish to set the value and you want it to be hidden from the eyes of the user you have to do this: AJS.MacroBrowser.ParameterFields["_hidden"](params, options);

Thank you both for your answers! they have been exteremly helpful!

Tiago, what is the "params" var in the function for?

Do any of you have by any chance a fully working example that is willing to share?

Thanks a lot guys!

Looking at the source, I think it's all the attributes you defined for that parameter in the atlassian-plugin.xml, like if it is required or its default value.


I don't have any example that uses that parameter directly but I think you could access those parameters like this: params.required or params.defaultValue

I wasn't talking about a specific example that uses params but a more general working example on how the editor should be overriten, Im still having issues understanding the full code needed and I have been stuck on this problem for a while now (not 10 months, but I'll get there eventually :) )

@Tiago

Does the "fields" attribute works if I also used the "opener" attribute? I can't get it to work :|

so frustrating!

I don't think it does, as Adrien said, the "opener" can be used to create a custom "window" which means you'd have to do the entire window with the parameter input you want to use.

I think it only makes sense to alter the "form" when the "form" itself is going to be displayed, I think the opener can be used to make your own Macro Creation window, although I have never used it successfully. Here's a tutorial I've found, it doesn't cover parameters but maybe it'll get you started.


What do you want to do exactly? If you could say more or less what do you intend to do, it'll be easier to help you

EDIT: oops it's the same you have up there

Im trying to create a custom editor for a macro, I managed to override the editor using the "opener", the only thing I cant figure out it how to pass the parameters from the new editor into the java side of the application...

Help!

Im trying to create a custom editor for a macro, I managed to override the editor using the "opener", the only thing I cant figure out it how to pass the parameters from the new editor into the java side of the application...

Help!

Im trying to create a custom editor for a macro, I managed to override the editor using the "opener", the only thing I cant figure out it how to pass the parameters from the new editor into the java side of the application...

Help!

//bind on initialization of editor
/*AJS.bind("init.rte", function() { 
    var macroName = 'myMacro';
 
    // 1. create dialog to add macro
    var dialog = new AJS.Dialog(800, 600);
 
    // hide dialog
    dialog.addCancel("Cancel", function() {
        dialog.hide();
    });
 
    // 2. add macro to editor
    dialog.addSubmit("Create Macro", function() {
         
        var currentParams = {};
        currentParams["arg1"] = "this";
        currentParams["arg2"] = "that";
   
        // 3. get current selection in editor
        var selection = AJS.Rte.getEditor().selection.getNode();
        var macro = {
            name: macroName,
            params: currentParams,
            defaultParameterValue: "",
            body : ""
        };
 
        // 4. convert macro and insert in DOM
        tinymce.plugins.Autoconvert.convertMacroToDom(macro, function(data, textStatus, jqXHR ) {
            AJS.$(selection).html(data + "<p><br/></p>");
        }, function(jqXHR, textStatus, errorThrown ) {
            AJS.log("error converting macro to DOM");
        });
        dialog.hide();
    });
 
    // 5. bind event to open macro browser
    AJS.MacroBrowser.setMacroJsOverride(macroName, {opener: function(macro) {
        // open custom dialog
        dialog.show();
    }});
});


Now, this was made following the tutorial you mentioned, you can pass parameters this way, yet these are hard-coded, I haven't dedicated more time to this and as such I don't know how to add an input field, I suppose it shouldn't be too hard like 'dialog.addInput("string");' maybe you should check the source for more info on how to add an input field

EDIT: Sorry I can't seem to get it formatted

Hi, I still can't seem to get it working.... I know how to add a custom input to the dialog and how to set up the currentParams var with the values I need,I just can't pass these params to the java code, when clicking "Create Macro" the java file is not being called at all... so its the same issue, I can't get the java code to run from the custom editor.... any ideas?

Thanks for sticking and helping me!

Any kind of error you could tell us?
Are you sure you're using the macro name and not the key?

I posted another comment at the top of the page, I made it work! now Im trying to figure out how can I extract the current value of the macro params with JS :)

I don't think it does, as Adrien said, the "opener" can be used to create a custom "window" which means you'd have to do the entire window with the parameter input you want to use.

I think it only makes sense to alter the "form" when the "form" itself is going to be displayed, I think the opener can be used to make your own Macro Creation window, although I have never used it successfully. Here's a tutorial I've found, it doesn't cover parameters but maybe it'll get you started.


What do you want to do exactly? If you could say more or less what do you intend to do, it'll be easier to help you

//bind on initialization of editor
/*AJS.bind("init.rte", function() { 
    var macroName = 'myMacro';

    // 1. create dialog to add macro
    var dialog = new AJS.Dialog(800, 600);

    // hide dialog
    dialog.addCancel("Cancel", function() {
        dialog.hide();
    });

    // 2. add macro to editor
    dialog.addSubmit("Create Macro", function() {
    	
    	var currentParams = {};
    	currentParams["arg1"] = "this";
    	currentParams["arg2"] = "that";
  
        // 3. get current selection in editor
        var selection = AJS.Rte.getEditor().selection.getNode();
        var macro = {
            name: macroName,
            params: currentParams,
            defaultParameterValue: "",
            body : ""
        };

        // 4. convert macro and insert in DOM
        tinymce.plugins.Autoconvert.convertMacroToDom(macro, function(data, textStatus, jqXHR ) {
            AJS.$(selection).html(data + "<p><br/></p>");
        }, function(jqXHR, textStatus, errorThrown ) {
            AJS.log("error converting macro to DOM");
        });
        dialog.hide();
    });

    // 5. bind event to open macro browser
    AJS.MacroBrowser.setMacroJsOverride(macroName, {opener: function(macro) {
        // open custom dialog
        dialog.show();
    }});
});

Now, these was made following the tutorial you mentioned, you can pass parameters this way, yet these are hard-coded, I haven't dedicated more time to this and as such I don't know how to add an input field, I suppose it shouldn't be too hard like 'dialog.addInput("string");' maybe you should check the source for more info on how to add an input field

Has anyone done this with Dialog2?

Have you managed this @Chris Whitehead? I suspect that Confluence doesn't recognize a macro editor made with dialog2.

OK! so I've a some progress thank to you guys!!

I used @Tiago's sinppet and replace the code under #4 with @Adrien's code:

tinymce.confluence.macrobrowser.macroBrowserComplete({name: "macroname", "bodyHtml": undefined, "params": {}});

So now the submit button looks something like this:

dialog.addSubmit("Generate", function () {

        var currentParams = {};
        currentParams["simulation"] = "blaa";
        currentParams["subject"] = "blaaaa";
        currentParams["template"] = "tabs";
        currentParams["restrictions"] = "confluence-users1";

        tinymce.confluence.macrobrowser.macroBrowserComplete({"name": macroName, "bodyHtml": undefined, "params": currentParams});
        dialog.hide();
    });

and that did it! it managed to pass the variables to the java code.
Hopefully I can take it from here and hopefully this will help you as well!

Thanks a lot guys!!


Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you