How do you add a Rally card renderer using a custom app in the starter kit?

Question

I saw the example in the Developer Portal for creating a customer card renderer with JS within an HTML document. (Where the definition of the renderer begins "var DiscussionTagCardRenderer = function(column, item, options)") I am trying to do the same thing (for example to add the rank to a cardboard of user stories) using only a js file as the source of a custom app then building the HTML with the starter kit, and I'm having trouble figuring out how to make the calls and config settings and where to place them.

While the straight js file passes the cardboard config to the app's add method to display the cardboard, the dev portal's HTML example passes the config and a data source to the cardboard's constructor then calls the cardboard's own display method. The config in the HTML example looks very similar to the config in the js example, so I would think that the card renderer property in the js version could use the same sort variable as the HTML example uses, but I can't figure out what to pass to renderer's contructor (item, column, etc.) when defining the variable in the pure js file.

I'm building off the basic getting started example in the starter kit where the user story cardboard is defined and added in the app's launch routine. I am guessing there is some ext magic in how the constructors are getting called, but I can't figure out how to translate HTML example to pure js.

I'd be most gtateful for any help in replicated the dev portal's examples of custom card renderers to pure js in the starter kit.

Answer 1

Here is an example from the 2.0p4 preview docs of customizing a card (in this case changing the header color based on defect priority):

http://developer.rallydev.com/appsdk/2.0p4/doc/#!/example/ColorCodedDefectBoard

You can also add most fields to cards simply via the CardBoard's cardConfig rather than having to extend Rally.ui.card.Card:

var cardboardConfig = {
    cardConfig: {
        fields: ['Name', 'Rank'] 
    }
}