I'm making a prototype Spotify Application, and I am stuck on the last part of code.
I have a list of albums URI, and want to display an album with cover and link to it. So I parse the list, create an album object, and push the HTML corresponding to what I want.
It look like this:
for(var i = data.length; i--; ) {
var cd = models.Album.fromURI(data[i].uri);
var cover = $(document.createElement('div')).attr('id', 'player-image');
cover.append($(document.createElement('a')).attr('href', data[i].uri));
var img = new ui.SPImage(cd.cover ? cd.cover : "sp://import/img/placeholders/300-album.png");
cover.children().append(img.node);
$("#discs").append(cover);
}
I don't understand why cd.cover is always empty.
Looks like the documentation is incorrect. Instead of using the cover property use image from the track or album object.
Related
I need to give an icon to each section in my entities. For example, I need to give an icon to General information, another one for interactions section.
Is there an idea about how could I do that? and how can I make a background color for each section please?
Thanks in advance,
There is no way to assign icons to sections. The best you could do would be to add a web resource to each of your sections and have them link to an image, but it doesn't really sound like that's what you're going for.
There are no supported ways to modify the form background color. If you don't care about remaining supported, though, you can use jQuery to do it. Put this function into your form script:
function changeSectionBackgroundColor(sectionId, color) {
parent.$("table.ms-crm-FormSection[name='"+sectionId+"']").css({"background-color": color});
}
and use it like this:
changeSectionBackgroundColor("General_Section_2", "red");
changeSectionBackgroundColor("General_Section_2", "#ababab");
You could try to do something like this to insert the Section images:
var stackoverflow = (function (Xrm)
{
var sectionBarClassName = '.ms-crm-Form-SectionBar'; // name of the CSS class given to the Section's Label's <td> element
function GetSection(tabName, sectionName)
{
var parentTab = Xrm.Page.ui.tabs.getByName(tabName); // get the tab
var section = parentTab.sections.getByName(sectionName); // get the section
return section;
}
function AddSectionImage(tabName, sectionName, imageUrl)
{
var section = GetSection(tabName, sectionName); // retrieve section using Xrm
var elSection = document.querySelector('table[name=' + section.getKey() + ']');
var elSectionHeader = elSection.querySelector('tr:first-child');
var elTitles = elSection.querySelectorAll(sectionBarClassName);
if (elTitles.length === 1) // we can assume that this section has a title
{
var elImg = document.createElement('img');
elImg.src = imageUrl;
elTitles[0].insertBefore(elImg, elTitles[0].firstChild);
}
}
return {
AddSectionImage : AddSectionImage
};
})(Xrm);
You then call this code and pass in the Name (not label) of the tab and section as well as the relative URL of the image you want displayed. Like so:
stackoverflow.AddSectionImage('tab_5', 'tab_5_section_1', '/imgs/Cancel_16.png');
I've only tested this code in CRM 2016 (online). And the image is a bit rough. You'll need to take care of the styling (inline) and the size yourself.
This is of course, unsupported by Microsoft :)
Point 16. of the app design guidelines describes how links to artists, tracks or albums should look like but I can't find a place that tells how one can create such a link with HTML/CSS and/or Javascript.
Horse Of a Different Color
The client will be smart enough to do the right thing. You can get these URIs from Track, Artist, Album and Playlist objects in the API.
The solution is so simple... It's the player view we're talking about here. See this example:
var sp = getSpotifyApi(1);
var models = sp.require("sp://import/scripts/api/models");
var views = sp.require("sp://import/scripts/api/views");
$(document).ready(function()
{
new models.Album.fromURI("spotify:album:7auFBtmCGcTn7ElPelMLPn", function(ctx)
{
var player = new views.Player();
player.context = ctx;
$("#my-album-player").append(player.node);
});
});
Thanks to ikenndac who sent me on the right track!
I am having trouble removing the time field from a playlist in the Spotify App. I only want to display Song title, Artist and Album. Any help on this topic would be truly helpful.
You can specify which track attributes to display using the List object. An example is here: http://deceptacle.com/2011/12/26/spotify-app-api-some-things/
var list = new views.List(playlist, function (track) {
return new views.Track(track, views.Track.FIELD.NAME |
views.Track.FIELD.ARTIST |
views.Track.FIELD.ALBUM);
});
$("#playlist").append(list.node);
Update
More fleshed out example:
var pl = m.Playlist.fromURI("spotify:user:rhino_records:playlist:6sSFeKDgDxVR81YqNOuPf2");
var list = new v.List(pl, function (track) {
return new views.Track(track, views.Track.FIELD.NAME |
views.Track.FIELD.ARTIST |
views.Track.FIELD.ALBUM);
});
document.body.appendChild(list.node);
m is the models namespace, v is the views namespace. For some reason, it's not quite working for me. It seems like the observer methods aren't being called at the moment. Seems to be a spotify backend thing though. It seems to get called eventually after some prodding
is it possible, from an spotify application, to hide or overwrite the "now playing" pannel (the cover and artist name/track name of the playing track) ?
Thx, for your help.
I try to modify the Album object or the Track object provided to the player but it don't work :
models.Album.fromURI("spotify:album:3ty039P7JO7bTcWtWi1AP6", function(a) {
var player = new v.Player();
var track = a.get(0);
//a.artist = "TOTO";
//a.cover = "sp://import/img/placeholders/300-album.png";
//track.image = 'sp://import/img/placeholders/300-album.png';
track.name = "Test";
player.play(track,a);
});
This is not possible in the current API, mainly because we don't want people overwriting now playing information with adverts and stuff.
I'm trying to create a show function which needs to access to two documents: The document in 'doc' reference and another document called 'users'
My function looks like:
function(doc,req){
var friends = doc.friends;
var listFriends = [];
for(int i = 0; i<friends.length; i++){
var phone = friends[i].phone;
if(users[phone] != "" ){
listFriends.push(users[phone]);
}
}
return JSON.stringify(listFriends);
}
I'm not an expert nor javascript neither couchdb. My question is, Is it possible to access to the second document (users) in a similar way like in the code? So far it returns a compilation error.
Thanks
You can only access one document in a CouchDB show function. You could look at using a list function, which works on view results instead of documents.
Create a view where the two documents collate together (appear side-by-side in the view order) and you achieve an effect pretty close to what you wanted to achieve with the show function.