CODEWITHSUNDEEP
javascriptsapui5
MKHC
MKHC

Reputation: 459

Retrieving the id from a control to use in navigation

I have a view with tiles, each of which have an id="foo" property, and a press property pointing to a function in the controller.

The problem is I can get the id of the tile, but it is appended automatically to the view name, __xmlview1--foo1. This can change if other views have already been created; there's no guarantee it will always be xmlview1, it could be xmlview2 or any higher number.

How do I retrieve the pure id as it appears in the tile's id property? Is this switch statement the best way to perform navigation, or is there a more robust/elegant solution?

onPress: function(oEvent){
  switch(oEvent.getSource().sId) {
    case "__xmlview1--foo1":
      this.oRouter.navTo("myview1");
      break;
    case "__xmlview1--foo2":
      this.oRouter.navTo("myview2");
      break;
    case "__xmlview1--foo3":
      this.oRouter.navTo("myview3");
      break;
    case "__xmlview1--foo4":
      this.oRouter.navTo("myview4");
      break;
    case "__xmlview1--foo5":
      this.oRouter.navTo("myview5");
      break;
    default:
      console.log("No match found.");
}

Upvotes: 0

Views: 327

Answers (3)

Qualiture
Qualiture

Reputation: 4920

Please, do not try and reinvent the wheel...

UI5, just like many other more or less mature frameworks, utilize the Router paradigm for navigation.

It gives you way more freedom -- you could use bookmarking, maintain application state, is maintenance-friendly, and as such you don't need to use ugly switch / if-then-else statements.

See the excellent explanation of the Routing mechanism in the Application Best Practices or have a look at this working example. You could easily adapt for use with tiles.

(If I would do a code review, and I don't see a Router mechanism used for navigation, I would delete the code altogether and ask you to start over properly)

EDIT: It seems I was a bit misguided by the multiple switches... my apologies!

I'm assuming you are populating your tiles based on a model. So why not add the navigation target to your model? 

TileCollection : [
    {
        icon   : "sap-icon://inbox",
        title  : "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        target : "detailView1"
    },
    {
        //etc
    }
]

And the tile definition:

<TileContainer id="container" tiles="{/TileCollection}">
    <StandardTile
        icon="{icon}"
        title="{title}"
        press="handlePress" />
</TileContainer>

Your event handler which serves the press event for all your tiles can then be as simple as:

handlePress: function(oEvent) {
    var sTarget = oEvent.getSource().getBindingContext().getObject().target;
    this.oRouter.navTo(sTarget);
}

Hope this explains a bit more! :)

Upvotes: 1

o--oOoOoO--o
o--oOoOoO--o

Reputation: 770

The easiest solution would be giving up the switch and using indexOf/if..else instead:

var id = oEvent.getSource().sId;

if (id.indexOf('foo1') > -1) {
    this.oRouter.navTo("myview1");
} else if (id.indexOf('foo2') > -1) {
    this.oRouter.navTo("myview2");
} else if (id.indexOf('foo3') > -1) {
    this.oRouter.navTo("myview3");
} else if (id.indexOf('foo4') > -1) {
    this.oRouter.navTo("myview4");
} else if (id.indexOf('foo5') > -1) {
    this.oRouter.navTo("myview5");
} else {
    console.log("No match found.");
}

If you must use switch however, you can regex the id using test

onPress: function(oEvent){

    var id = oEvent.getSource().sId;

    switch(true) {
        case /foo1/.test(id):
          this.oRouter.navTo("myview1");
          break;
        case /foo2/.test(id):
          this.oRouter.navTo("myview2");
          break;
        case /foo3/.test(id):
          this.oRouter.navTo("myview3");
          break;
        case /foo4/.test(id):
          this.oRouter.navTo("myview4");
          break;
        case /foo5/.test(id):
          this.oRouter.navTo("myview5");
          break;
        default:
          console.log("No match found.");
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

Upvotes: 0

Elad Stern
Elad Stern

Reputation: 1071

You can change the format to look like _xmlviewX--myviewX, then simply substring from -- and navigate to that link.

Upvotes: 1

Related Questions