Add target property for dropdownnode in Widget Container

Question

I would like to add a target (e.g. _blank) property for a basicLeafNode on the Widget Container from the extension library.

I do not see the property for this.

Instead I could use the onClick property and return an URL. But then I still would have no target defined.

I could add a postScript method

var target = url;
view.postScript("window.open('"+target+"','_blank')")

but this fires when the container is loaded.

Can I add a target property without using the onClick Property?
In case I use the onClick property what method should I use or how I prevent the postscript is executed when the container is loaded?

@Campl3r I think it is quite clear what the asker wants to do (add a target property to the link) — Per Henrik Lausten, Nov 20 '13 at 11:25
As far as i know the only solution would be to create your own custom Node, wich supports 'target', by extending the com.ibm.xsp.extlib.tree.complex.ComplexLeafTreeNode then you could use this new node everywhere you can use the leafNode, including the DropDownMenue in the WidgetContainer. — Michael Saiz, Nov 20 '13 at 12:49
I want to open a url in a new window. from the drop down function in the widget container — Patrick Kwinten, Nov 20 '13 at 14:26

score 2 · Answer 1 · answered Nov 20 '13 at 15:46

The basicLeafNode doesn't currently provide a target property. You have 2 courses of action:

implement your own custom node as Michael suggested (hard)
use a class on the link e.g. "newpageopen" and add an onPageReady script that selects all a elements with the calss newpageopen and add the target property to the resulted HTML.

Something like this:

require(["dojo/ready","dojo/query"], function(ready){
    ready(function(){
        dojo.query("a.newpageopen").attr("target", "_blank");
    });
 });

Hope that helps;

Michael Saiz · Answer 2 · 2013-12-02T15:42:25.530

To make this list of solutions a bit longer here another on wich does not require dojo or jquery:

Instead of using your code as SSJS like:

var target = url;
view.postScript("window.open('"+target+"','_blank')")

You can use the Client Side Code and add SSJS code in #{javascript:}' wich i think is the shortest solution on this Problem. Here a hardcoded example:

        <xe:basicLeafNode>
            <xe:this.onClick><![CDATA[window.open('#{javascript: return "http://www.google.com";}','_blank');]]></xe:this.onClick>
        </xe:basicLeafNode>

the above example will also work with viewScope variables or SSJS funktions:

        <xe:basicLeafNode>
            <xe:this.onClick><![CDATA[window.open('#{javascript: return viewScope.url;}','_blank');]]></xe:this.onClick>
        </xe:basicLeafNode>

Naveen · Answer 3 · 2013-11-21T13:24:31.570

You can add the target attribute using JavaScript. It's kind of inconvenient way but would work.

You can use dojo.query to query the HTML output generated by basicLeafNode on the Widget Container. Once you get the node of <a> then you can add attribute using dojo.attr.

One problem you might face is that the ID generated by XPages contains the character :, which will not work so you would have to escape it.

function escapeColon(controlID) {
    return controlID.replace(/:/g, "\\3A");
}

So your code would be something like:

dojo.addOnLoad(function() {
    dojo.attr(dojo.query(escapeColon("#{id:ID_of_basicLeafNode}") + " > a")[0], "target", "_blank");
});

The code escapeColon("#{id:ID_of_basicLeafNode}") + " > a" would generate a CSS selector. Here I am assuming that basicLeafNode on the Widget Container would generate something like this <div id="_id1:basicLeafNode"><a href=".... So the CSS selector would search for a tag with that ID and inside it the <a> tag. You would have to modify this based on the output that is generated.

As I said its a bit inconvenient. Also I haven't tested this code.

Add target property for dropdownnode in Widget Container

3 Answers3