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 i

Solution 1:

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! :)

Solution 2:

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

Solution 3:

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