Press Link on Breadcrumbs Navigation

[former_member585235]

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_member585235]

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

[former_member585235]

I couldn't manage it to make it work using the model nodes. I am getting errors like this.getView() function does not exist. And also when I am using this setData([]), then I am losing every data. If you were able to explain me a little bit better how am I suppose to create the model through the JSON.

BR,

Iliana

[arthursilva]

Have you tried to refresh the model after method generateLinks ?

this.getView().getModel("nodes").refresh();

BR
Arthur Silva

[former_member585235]

Hi, can you please explain a little bit more how to create this kind of model at first place?

Thank you!

[former_member585235]

What I have done until now is this:

generateLinks: function(oEvent)
           {
            var t = oEvent.getSource();
            var n = this.indexOfLink(t);
            this.removeAllLinks();
            this.setCurrentLocationText(arr[n]);
            for(var i = 0; i<n; i++){

                var li = new sap.m.Link({
                    text: arr[i],
                    //press: [onToggle]
                });

                this.addLink(li);                                
            }

On principal, I repeat the same procedure by adding the links until the pressed one. The problem is that it's working only for the first time. Any ideas how to continue from here?