Skip to Content

Press Link on Breadcrumbs Navigation

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?

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Nov 11, 2018 at 08:26 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • 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

  • Nov 13, 2018 at 10:04 AM

    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?

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 14, 2018 at 09:03 AM

    Have you tried to refresh the model after method generateLinks ?

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

    BR
    Arthur Silva

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 14, 2018 at 10:47 AM

    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

    Add comment
    10|10000 characters needed characters exceeded