cancel
Showing results for 
Search instead for 
Did you mean: 

Dynamic Breadcrumbs

10-22-2018 5:11 PM
613 views 0 comments
0 Likes
SAP Managed Tags
Subscribe

Hi, I am trying to add a breadcrumbs bar on the sample of basic tree.

I have this:

<mvc:View
    controllerName="sap.m.sample.Tree.Page"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <Breadcrumbs id="bread" currentLocationText="Start">
        <Link text="{/lItem}"/>
    </Breadcrumbs>
         <Tree
            id="Tree"
            items="{path: '/'}"
            toggleOpenState="onToggle">
            <StandardTreeItem id="item" title="{text}"/>
        </Tree>
</mvc:View>

My controller:

sap.ui.define(['sap/ui/core/mvc/Controller', 'sap/ui/model/json/JSONModel'],
    function(Controller, JSONModel) {
    "use strict";

    var PageController = Controller.extend("sap.m.sample.Tree.Page", {
        onInit : function (evt) {
            // set explored app's demo model on this sample
            var oModel = new JSONModel(jQuery.sap.getModulePath("sap.m.sample.Tree", "/Tree.json"));
            this.getView().setModel(oModel);
        },

        onToggle: function(oEvent) {
            var data = this.getView().getModel().getData();
            //var lItem = this.byId("Tree").getBindingContextPath();
            var lItem = oEvent.getParameters().itemIndex;
            var oBreadCrumbs = this.byId("bread");
            oBreadCrumbs.setCurrentLocationText(lItem);
            console.log(lItem);

        }

    });

    return PageController;

});

And the Tree.json as it is from the sample:

[
    {
        "text": "Node1",
        "ref": "sap-icon://attachment-audio",
        "nodes":
        [
            {
                "text": "Node1-1",
                "ref": "sap-icon://attachment-e-pub",
                "nodes":[
                    {
                        "text": "Node1-1-1",
                        "ref": "sap-icon://attachment-html"
                    },
                    {
                        "text": "Node1-1-2",
                        "ref": "sap-icon://attachment-photo",
                        "nodes":[
                            {
                                "text": "Node1-1-2-1",
                                "ref": "sap-icon://attachment-text-file",
                                "nodes":[
                                    {
                                        "text": "Node1-1-2-1-1",
                                        "ref": "sap-icon://attachment-video"
                                    },
                                    {
                                        "text": "Node1-1-2-1-2",
                                        "ref": "sap-icon://attachment-zip-file"
                                    },
                                    {
                                        "text": "Node1-1-2-1-3",
                                        "ref": "sap-icon://course-program"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "text": "Node1-2",
                "ref": "sap-icon://create"
            }
        ]
    },
    {
        "text": "Node2",
        "ref": "sap-icon://customer-financial-fact-sheet"
    }
]

I can see the breadcrumbs but still in the wrong way. Do you have any ideas?

Thank you

0 Likes

Accepted Solutions (0)

Answers (0)