Handling arguments and creating navigational tabs

In the manifest.json file, you can update the DefaultTabs property with arguments that correspond to nagivational tab names. In the Application class, when tabs are clicked, the arguments property is updated. In this example, we are simply showing and hiding a <div /> element each time the arguments are updated.

The manifest.json snippet

{
    ...
    "DefaultTabs": [
        {
            "arguments": "index",
            "title": {
                "en": "Home"
            }
        },
        {
            "arguments": "tabs",
            "title": {
                "en": "How to use tabs"
            }
        }
    ],
    ...
}

The Javascript

The HTML

Live Example

For a small app, showing and hiding certain elements on a page can be enough. However, a different approach would be to split the content in several HTML pages.

Links should look like this:

<a href="spotify:app:api-tutorial:mypage">A link to a page</a>

You can still navigate to an internal page using a link such as this:

<a href="/tutorial/mypage.html">An internal link to a page</a>

However, Spotify URIs are cleaner, don't expose implementation and work across Spotify, not only inside a given app. In addition, they manage tab highlighting. For instance, a link like this:

<a href="spotify:app:api-tutorial:tabs:section">A link to a section in the 'Tabs' tab</a>

Will highlight our second tab (the one with label 'How to use tabs') because the 'tabs' part in the URI matches the arguments set for that tab in the manifest.json file.