Question

The Spotify UI guidelines for Spotify apps (at https://developer.spotify.com/technologies/apps/guidelines/design/) say “When listing tracks in your app, use our standardized track listings”. I cannot find any examples in the documentation on how to use these “standardized track listings”. By using the Inspector I have found classes in list.css (such as sp-list and sp-item) which it looks like I need to use but have not been able to work out quite how to use these to recreate the look of the Spotify track listings.
The Billboard Top Charts app appears to use track listings like I need, but I can’t find ay way to see how they are doing this as the Inspector only works for your own apps as far as I can tell.

Does anybody have any advice or examples?

Answer 1

Some examples

sp = getSpotifyApi(1);

var m = sp.require("sp://import/scripts/api/models");
var v = sp.require("sp://import/scripts/api/views");

// Example 1
var tpl = new m.Playlist();
var tempList = new v.List(tpl);
tpl.add(m.Track.fromURI("spotify:track:4z4t4zEn4ElVPGmDWCzRQf"));
tpl.add(m.Track.fromURI("http://open.spotify.com/track/7E8JGVhbwWgAQ1DtfatQEl"));
tpl.add(m.Track.fromURI("spotify:track:40YBc3mR3yyqyYvtesQOMj"));
tpl.add(m.Track.fromURI("spotify:local:Rolling+Stones:A+Bigger+Bang:Rain+Fall+Down:293"));

document.body.appendChild(tempList.node);

// Example 2
var pl = m.Playlist.fromURI("spotify:user:username:playlist:424km2k4m24");
var list = new v.List(pl);

document.body.appendChild(list.node);

// Example 3
var album = m.Album.fromURI("spotify:album:1vWnB0hYmluskQuzxwo25a");
var albumList = new v.List(album);
albumList.node.classList.add("album");

document.body.appendChild(albumList.node);