Attaching RichTooltip for nodes of sapui5 Tree control

[former_member187794]

Hi Experts

Did some one attached a rich tooltip control for any of the nodes of a Tree control? If yes, could you please share your knowledge on how to achieve this?

Thank You

Regards

Giri

[Qualiture]

Not sure what your issue is... you can simply attach it to the tree node:

<TreeNode text="{name}">
    <tooltip>
        <RichTooltip title="{title}" text="{description}" />
    </tooltip>
</TreeNode>

[SergioG_TX]

Robin,

your solution works as a tooltip on the entire tree node, however, I believe Giridhar needs it at the node level instead of at the parent level.

Further, the nodes only display text, so my suggestion would be that 1) investigate if the node itself can trigger an event to display the rich tooltip since its tooltip feature is the text property of the node, 2) possibly create a custom tooltip if the node itself cannot open the rich tooltip provided by the framework

[Qualiture]

Hi Sergio,

As I read it,

a rich tooltip control for any of the nodes of a Tree control

my solution works for every tree node in the tree, regardless of the level. If the binding is set correctly on the parent Tree control, every node will have a corresponding RichTooltip, showing the bound values, images and what else is needed to show

FYI, the whole Tree control could look like this:

<Tree nodes="{path:'/',parameters:{arrayNames:['data']}}">

    <nodes>

        <TreeNode text="{name}">

            <tooltip>

                <RichTooltip title="{title}" text="{description}" imageSrc="{image}"/>

            </tooltip>

        </TreeNode>

    </nodes>

</Tree>

[SergioG_TX]

Robin, agree, you are correct, the rich tooltip works for the tree as a whole

[former_member187794]

Hi Robin

this works for the tree, but I would like a different rich tooltip content for individual nodes

Regards

Giri

[Qualiture]

No, like I said, it's NOT a tooltip for the tree, it's a tooltip for every tree node

[Qualiture]

See this working example: Plunker

[SergioG_TX]

that's exactly correct - great example Robin

[former_member185274]

Hi Robin,

That's a very great example, but do you know how to set the tree node as the link control?

Br,

Pany

[Qualiture]

Hi Pany,

Not sure what you mean with 'set the tree node as the link control'...

[former_member185274]

Hi Robin,

Thank you for your reply. What I mean is, in your example, how can I set the "node 1.1" and "node 1.2.1" as a link control? Then I can use its href and target attribute...

Br,

Pany

[Qualiture]

You can't. According to the API, a sap.ui.commons.Tree control expects the aggregation 'nodes' to be of type sap.ui.commons.TreeNode.

Then again, why would you use a link in a tree? It will confuse the users as you can no longer 'select' a tree node (which is the whole point of a tree).

But if you still want to achieve some sort of link functionality, better use the TreeNode's 'select' event, and use a href and target from the context there

[former_member185274]

I want to use the href and target attribute of link control to load new html document to the right side of the page, so you say I can use a href and target from the context in "select" event? How?

Thanks and regards,

Pany

[Qualiture]

Not sure what you mean.. you could do it just like any UI5 / Javascript control, for instance:

onTreeNodeSelect : function(oEvent) {

    var obj = oEvent.getSource().getBindingContext().getObject(),

         href = obj.myHref;

    // myHref is in your model I suppose

    $("#myHTMLIframeId").attr("src", href);

}

[former_member185274]

ok, got it, thank you very much!