Press Link on Breadcrumbs Navigation

[#1]

Hi, I have created a simple tree with breadcrumbs navigation. What I want is to create the function for pressing a link on the breadcrumbs and remove all the links after that.

Here is my code:

 <Breadcrumbs id="bread" currentLocationText="{/sNode}">
 </Breadcrumbs>
         <Tree
            id="Tree"
            items="{path: '/'}"
            toggleOpenState="onToggle">
            <StandardTreeItem id="item" title="{title}" type="Navigation" press="test"/>
        </Tree>

And the controller:

onToggle: function(oEvent) {

            var lItem = oEvent.getParameters().itemContext.sPath;

            var nodes = this.getView().getModel().getProperty(lItem);
            var sNode = this.getView().getModel().getProperty(lItem).title;
            var oBreadCrumbs = this.byId("bread");
            
            arr.push(sNode);
          
            oBreadCrumbs.removeAllLinks();
            for(var i=0; i<arr.length; i++){
                if(i == arr.length -1){
                    oBreadCrumbs.setCurrentLocationText(arr[i]);
                }
                else{
                    var link = new sap.m.Link({
                        text: arr[i],
                        press: this.generateLinks
                    });
                    oBreadCrumbs.addLink(link);
                }
                
            }

           },

generateLinks : function(oEvent)
           {    
               var t = oEvent.getSource();
               console.log(t)
           },

At this moment I am just able to have the text of the pressed link. Any ideas how can I continue?

[arthursilva]

Hello Iliana,

When developing complex binding, have in mind you can use the control aggregations in order to make the binding easier. This will reduce the amount of work, and complexity. In particularly, Breadcrumbs has an aggregation called <links>, which allows the creation of 0..n objects type sap.m.Link.

In this manner, it's possible to attach any model to it, by turning the links object creation dynamically. Just like below:

<Breadcrumbs    
currentLocationText="Some text"
  links="{
    path: 'breadcrumbs>/'
  }">
  <links>
    <Link press="onPress" text="{breadcrumbs>text}"/>
  </links>		
</Breadcrumbs>

The model breadcrumbs>/' is declared as an view object, and has an array of json objects.

// set breadcrumb model data
this.getView().getModel("breadcrumbs").setData([]);

As long the model and the control are binding, every change on the model will reflect on the Breadcrumb control. You're able to manipulate the array by inserting, deleting, updating data, and changes will reflect directly to the object. Last but not least, make sure you've refresh the model after any changes. Otherwise it's not going to work.

// refresh model after changes
this.getView().getModel("breadcrumbs").refresh();

Take a look at https://sapui5.hana.ondemand.com/#/api/sap.m.Breadcrumbs/aggregations

Cheers,
Arthur Silva

[Former Member]

Hi, thank you very much for your answer. I am still not able to make it works properly. I have a very simple json file like this one here. I am not quite sure how can I bind this model. I tried like this on my onInit function, but it doesn't work:

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().getModel('nodes');
            this.getView().getModel('nodes).refresh();
        },

Also I didn't find any examples of this kind of binding. Can you give me some more details?

Thank you very much,

Iliana