Is it possible to reference to a .html or .vm when using dialog.addPanel for overriding the macro browser?

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 2, 2014
AJS.bind("init.rte", function() { 
    var macroName = 'awlk-confluence-integration-macro';
    
    
    // 1. create dialog to add macro
    var dialog = new AJS.Dialog({
    	width: 800,
    	height: 600,
    	id: "awlk-macro-dialog",
    	closeOnOutsideClick: true
    });
    
    //Add Stuff
    dialog.addHeader("Insert Anwendungslandkarte");
    dialog.addPanel("Liste aller Elemente", "<table><tr  bgcolor='#ACD1E9'><th>Key</th><th>Discription</th><th>State</th></tr><td >$item.name</th><td>$item.type</th><td>$item.state</th></tr></table>", "panel-body");
    dialog.addPanel("Searchfield", "<p><input id='searchField' type='text'><hr>", "panel-body");
    
    
    //hide dialog
    dialog.addCancel("Cancel", function() {
        dialog.hide();
    });
    
    // 2. add macro to editor
    dialog.addSubmit("Insert Macro", function() {
    	
    	var currentParams = {};
        currentParams["searchFieldInput"] = document.getElementById('searchField').value;
        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();
        tinymce.confluence.macrobrowser.macroBrowserComplete({name: macroName, "bodyHtml": undefined, "params": {}});
    }});
});

currently i made my new panel by using the html tags withing the javascript&colon;

dialog.addPanel("Liste aller Elemente", "<table><tr  bgcolor='#ACD1E9'><th>Key</th><th>Discription</th><th>State</th></tr><td >$item.name</th><td>$item.type</th><td>$item.state</th></tr></table>", "panel-body");
dialog.addPanel("Searchfield", "<p><input id='searchField' type='text'><hr>", "panel-body");

 

What i want to know is, can i reference to .html or .vm instead of enter the html tags directly in the javascript?

If it is possible how should i do this?

I want to display a bit more then a searchfield and a tableheader.

 

Somehting like this:

dialog.addPanel("Liste aller Elemente", "macrobrowser_panel1.vm", "panel-body");

dialog.addPanel("Searchfield", "macrobrowser_panel2.vm", "panel-body");

 

Mayby @Joe Clark [Atlassian] or @Nic Brough -Adaptavist- or  @Adrien Ragot 2 can tell me.

Best Regards,

 

J.D.

2 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

1 vote
Answer accepted
Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
December 3, 2014

No, velocity files are rendered on the server, so the contents of a velocity template is not accessible to a JavaScript function executing on the client.

If you want to templatize HTML in your JavaScript code, you should consider writing a Google Closure ("Soy") Template: https://developer.atlassian.com/display/CONFDEV/Writing+Soy+Templates+in+Your+Plugin

 

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 3, 2014

I really appreciate your help, thank you. I will try that. Best regards J.D.

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 4, 2014

Can i give the soy template a list of names from a db, for later using with a javascript?

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 4, 2014

How can i call up my soy instead of dialog.addPanel?

2 votes
Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
December 4, 2014

I'll answer your comment questions in another answer, so that I can use formatting (Ok @Norman Abramovitz - now I see your point! smile)

To your first question: The soy template is executed and rendered in the client's browser, so like your JavaScript code, it cannot interact with any code or templates on the server directly (or the database). You need to decide how you are going to transport the values in the database from the server to the client. You will probably need to do something like building a REST API to retrieve the values, and then make an AJAX call when the dialog is loaded to retrieve them.  That's quite an involved process - I think this tutorial might help guide you: https://developer.atlassian.com/display/DOCS/Developing+a+REST+Service+Plugin

To your second question: You can invoke a soy template by calling it by it's namespace and template name. It returns a String which is the HTML content. So for example, if you have a template like this:

{namespace my.example.templates}

/*
 * @param name
 */
{template .sayHello}
  Hello {$name}!
{/template}

 

You could call it in JavaScript like this:

var dialog = AJS.Dialog();
 
var panelContent = my.example.templates.sayHello({name: "Joseph"});
dialog.addPanel("Panel Title", panelContent, "panel-class");
J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 5, 2014

why do i need the rest api? the db returns values in the macro already to display them on a page.

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 5, 2014

shouldnt be an ajax call enough to get that data? (just started reading about ajax)

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 5, 2014

can´t i load in a list of names into an html form / servlet and retrieve that list from there?

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 5, 2014

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200){ ajaxgetstring = xmlhttp.responseText; } }; xmlhttp.open("GET","macrobrowser_panel.vm",false); xmlhttp.send(); var autoselect = "<form class='aui'>" + "<select id='select2-example' multiple> " + ajaxgetstring + "</select></form>"; dialog.addPanel("B", autoselect, "panel-body");

Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
December 5, 2014

Ah yeah, if the values are already on the page via the macro, then the REST API wouldn't be necessary.

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 8, 2014

Mh, i cant get the ajax call working. (Like i said, im new to ajax and dont have that much javascript experience). My call looks like this atm var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","reqURL",true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200){ ajaxstring = xmlhttp.responseText; } else { alert('Something is wrong with AJAX call!!'); } }; xmlhttp.send(); Servlet: @Override public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException { ArrayList<String> searchList = new ArrayList<String>(); searchList.add("A"); searchList.add("B"); searchList.add("C"); searchList.add("D"); response.setContentType("text/html"); // Set content type of the response so that jQuery knows what it can expect. response.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); //<option value='$item'>$item</option> for(String name : searchList){ // Write response body. out.println("<option value='" + name + "'>" + name + "</option>"); } }

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 8, 2014

reqURL = json.txt [ { "name": "Bernd" }, { "name": "Alf" }, { "name": "Gerd" }, { "name": "Janick" } ]

Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
December 10, 2014

Use the jquery "Get" function (http://api.jquery.com/jquery.get/) instead of using XMLHttpRequest object directly - it's much easier. var reqUrl = AJS.contextPath + "/plugins/servlet/myservlet/" AJS.$.get(reqUrl, function(data) { alert("The request worked. The request body is:" + data); });

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 11, 2014

Yep thanks, that a lot better way :) Forgot that JQuery is inbuild.

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 11, 2014

I think i have to make the ajaxrequest async, because the data comes in to slow. (after the addPanel). How can i change them dynamic, how can i chance the html in the panel dynamic? Thanks for you help, by now

Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
December 11, 2014

AJAX requests in JQuery are asynchronous by default. So in your success handler, you will need to change the code so that instead creating the dialog panel, you instead use a JQuery selector to find the panel and update its content.

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 11, 2014

I think i have to use this: (descipted in the aui doc) gotoPanel pageObject , panelIDorObject goes to a specific panel in the dialog hierarchy dialog.gotoPanel(page, 3); and to select my dropdown and my searchfield one of these: http://api.jquery.com/category/selectors/ can i use "document.getElementById('searchField')" to update them?

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 11, 2014

Okay, i made it: dialog.getPanel(id); document.getElementById("select-name").innerHTML = addAutoSelectNamesOption; My problem now is that the params seems not get to my execute method.

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 11, 2014

dialog.addSubmit("Insert Macro", function() { var currentParams = {}; // dialog.getPanel(2); currentParams["searchFieldInput"] = document.getElementById('select-name').value; alert(currentParams["searchFieldInput"]); //works alert(document.getElementById('select-name').value); //works // 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(); });

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 11, 2014

Okay an atls-mvn clean install helped me out :) Thank you for your patience and help :)

Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
December 16, 2014

Glad it's working! :)

J D
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 16, 2014

Again, thank you for your big help :)

TAGS
AUG Leaders

Atlassian Community Events