Card Board

Deprecation Warning! The content below is only applicable for use within deprecated 1.x versions of Rally's App SDK. Use of the component(s) and/or code on this page is not supported. To develop custom apps within our current environments, please see App SDK 2.0 documentation.

The Card Board component allows the visualization of Rally objects on a board organized by columns. Cards can also be moved between columns (and thus update values), as well as re-ranked by dragging and dropping.

The Card Board component is customizable:

  • Most Rally objects can be displayed as a card
  • Most drop-down values can be used for the columns
  • The column and card display can be modified for different looks (such as colors)

Both the Rally Story Board and Story Map Apps are based on the Card Board component.

cardboard

Other topics include:

Create a Card Board

First include the App SDK javascript:

<script type="text/javascript" src="/apps/[version]/sdk.js"></script>

Instantiate a new Card Board:

var cardboard = new rally.sdk.ui.CardBoard(config, rallyDataSource);

The parameters for rally.sdk.ui.CardBoard are as follows:

Parameter Description Example
config* A card board configuration object { types: ["defect"], attribute: "priority" }
rallyDataSource* An instance of rally.sdk.data.RallyDataSource new rally.sdk.data.RallyDataSource("__WORKSPACE_OID__",
  "__PROJECT_OID__",
   "__PROJECT_SCOPING_UP__",
   "__PROJECT_SCOPING_DOWN__"
)
  * = required parameter

The Card Board configuration object supports the following properties:

Parameter Description Example
types* An array of Rally object types. ["Defect", "HierarchicalRequirement"]
attribute* The attribute whose values the board's columns are based on. "State", "ScheduleState"
columns The columns to display on the board. The value of this property may be one of three formats:
  • An array of strings corresponding to the column attribute values
  • An object of name-value pairs corresponding to the column attribute values and additional data to be passed to column renderers
  • A function which when invoked by the board will callback with an object in the format specified above
  • If not specified, the board will automatically determine the columns based on the specified types and attribute configuration properties.

    ["Ready", "Accepted"]

    { "Ready": { displayValue:"Ready",
    someData:15}, "Accepted": { displayValue:"Accepted",
    someData:5} }


    function getColumns(callback) {
       //Get columns and callback
       callback(myColumns);
    }
    items The items to display on the board. The value of this property may be one of two formats:
  • An array of items
  • A function which when invoked by the board will callback with an array of items
  • If not specified, the board will automatically query for the items based on the specified types and attribute configuration properties.

    [{"_ref": "/defect/12345.js", ObjectID: "12345", ScheduleState:"Accepted"}, {"_ref": "/defect/23456.js", ObjectID: "23456", ScheduleState: "Ready"}]

    function getItems(callback) {
       //Get items and callback    callback(myItems); }
    order The field by which items will be sorted in each column (default = Rank). Note: Re-ranking is disabled if anything but Rank. "CreationDate"
    sortAscending If true, items will be sorted in ascending order; otherwise descending (default = true). Note: Re-ranking is disabled if false. false
    fetch A comma-delimited list of fields to be returned.
    This data can then be used by card renderers
    (default = ObjectID,Rank,FormattedID,Name,Owner).
    "ObjectID,Name,FormattedID,ScheduleState"
    query A query filter string or Query object used to further limit items retrieved and displayed on the board. 'Priority = "High Attention"'
    columnRenderer The column renderer to use (default = rally.sdk.ui.cardboard.BasicColumnRenderer). MyColumnRenderer
    cardRenderer The card renderer to use (default = rally.sdk.ui.cardboard.BasicCardRenderer). MyCardRenderer
    cardOptions An optional options object which will be passed to the configured card renderer. { showTasks: true}
    maxCardsPerColumn For performance reasons, columns are limited to this number of cards (default = 100). 200
    maxColumnsPerBoard For performance reasons boards are limited to this number of columns (default = 12). 20
    enableRanking Whether to enable re-ranking (default = true). false
    readOnly If true, all drag-and-drop functionality is disabled (default = false). true

      * = required parameter

    See Customizing Columns for more information on custom card renderers.

    Display a Card Board

    Once created, use the display method to query Rally for the specified data and then show the board:

    cardboard.display(domElement);
    Parameter Description Example
    domElement* The element in which to display the chart. This may be either an element or an element ID. "cardboardDiv",
    document.getElementById("cardboardDiv")
      * = required parameter

    Methods

    The Card Board component defines the following methods:

    Method Name Parameters Description Example
    display element* Display the cardboard in the specified element. cardboard.display("aDiv");
    destroy - Removes this component. cardboard.destroy();
    refresh config* Refresh the board in place using the specified config. cardboard.refresh(config);
    refreshItem item* Refresh a card on the board with the specified new data. cardboard.refreshItem(updatedItem);
    getItem oid* Get the item with the specified Object ID. cardboard.getItem(12345);
    getItems type, value Returns items from the board based on the specified type and value.
    If type is specified, only items of that type are included in the return value.
    If value is specified, only items in the corresponding column are included in the return value.
    cardboard.getItems();
    getColumns - Returns an array of the columns in the board. cardboard.getColumns();
    resize - Causes the board to resize itself based on the size of its container. cardboard.resize();
      * = required parameter

    Events

    Events are used to notify users of a component when actions occur.
    The following methods are provided in order to interact with this component's events:

    Method Parameters Description Example
    addEventListener eventName*, listener*, scope Registers the specified listener with the component's queue for the specified event and returns an object which can be used to remove the event listener later. The listener parameter should be a function with two parameters: 1) the component that fired the event; 2) an eventArgs object with properties specific to the event being fired. This function will be called by the component when the event occurs. If the optional scope parameter was specified the function will be called on that object (like scope.listener(sender, args);). function listener(sender, eventArgs) {
       //Respond to event
    }
    var eventObj =
    component.addEventListener(eventName,
    listener);
    removeEventListener eventObj* Unregisters the specified event from the component.
    The eventObj parameter should be the return value of addEventListener() when the listener was originally registered.
    var eventObj =
    component.addEventListener(...);
    component.removeEventListener(eventObj);
      * = required parameter
    The Card Board component supports the following events:

    Event Name Description Event Arguments Example
    onColumnsRetrieved Fired when the allowed column values have been retrieved. The eventArgs object passed to any event listeners contains the following properties:
  • Columns: An array of the column objects represented in the board
  • function onColumnsRetrieved(c, eventArgs) {
       //Add another value to the beginning
       eventArgs.columns.unshift ({columnState:"Default", options: {displayValue: "None", someData: 5 }});
    }
    cardboard.addEventListener("onColumnsRetrieved",
       onColumnsRetrieved);
    onDataRetrieved Fired when the board data has been retrieved. The eventArgs object passed to any event listeners contains the following properties:
  • Items: An object containing properties corresponding to each column in the board with arrays of items as values
  • function onBoardDataRetrieved(c, eventArgs) {
       var items = eventArgs.items;
    }
    cardboard.addEventListener("onDataRetrieved",
       onBoardDataRetrieved);
    onLoad Fired when the board has finished rendering. The eventArgs object passed to any event listeners contains the following properties:
  • Columns: An array of the columns represented in the board
  • Items: An object containing properties corresponding to each column in the board with arrays of items as values
  • function onBoardLoaded(c, eventArgs) {
       var columns = eventArgs.columns;
       var items = eventArgs.items;
    }
    cardboard.addEventListener("onLoad",
       onBoardLoaded);
    onBoardResize Fired when the board has been resized. This event is useful when creating a custom column renderer. The eventArgs object passed to any event listeners contains the following properties:
  • WindowSize: The current size of the window
  • BoardSize: The current size of the board
  • AvailableHeight: The available height in pixels
  • MaxHeight: The maximum current height of a column
  • MaxWidth: The maximum current width of the board
  • NumColumns: The number of columns in the board
  • function onBoardResized(c, eventArgs) {
    }
    cardboard.addEventListener("onBoardResize",
       onBoardResized);
    preUpdate Fired just before an item update is performed. The eventArgs object passed to any event listeners contains the following properties:
  • FieldsToUpdate: The object fields to be updated
  • OriginalItem: The original item
  • Type: The operation that triggered the update (reorder, move or card)
  • Attribute: The attribute the board was constructed with
  • function on Before Update(c, eventArgs) {
    eventArgs.fieldsToUpdate["field1"] = "value1";
    }
    cardboard.addEventListener("preUpdate",
       onBeforeUpdate);
    onCardPickup Fired when a card has been picked up. The eventArgs object passed to any event listeners contains the following properties:
  • Item: The item that was picked up
  • FromColumn: The column the item was picked up from
  • function onCardPickedUp(c, eventArgs) {
    }
    cardboard.addEventListener("onCardPickup",
       onCardPickedUp);
    onCardDrop Fired when a card has been dropped. The eventArgs object passed to any event listeners contains the following properties:
  • Item: The item that was picked up
  • FromColumn: The column the item was picked up from
  • ToColumn: The column the item was dropped in
  • function onCardDropped(c, eventArgs) {
    }
    cardboard.addEventListener("onCardDrop",
       onCardDropped);

    Example

    Copy and paste the following into a Rally Custom app page.
    Another example: Color Coded Defect Board

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- Copyright (c) 2011 Rally Software Development Corp. All rights reserved -->
    <html>
    <head>
       <title>Component Example: Card Board</title>
       <meta name="Name" content="Component Example: Card Board" />
       <meta name="Version" content="2011.2" />
       <meta name="Vendor" content="Rally Software" />
       <script type="text/javascript" src="/apps/1.26/sdk.js"></script>
       <script type="text/javascript">

         function cardboardOnLoad(cardboard, args) {
           var items = args.items;
           var itemsByType = cardboard.getItems(null, "Defect");
           var itemsByState = cardboard.getItems("Accepted");
           var itemsByTypeAndState = cardboard.getItems("Backlog", "Defect");
         }

         function onLoad() {

           var rallyDataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
                                            '__PROJECT_OID__',
                                             '__PROJECT_SCOPING_UP__',
                                             '__PROJECT_SCOPING_DOWN__'
    );
          var cardboardConfig = {
              types : ["Defect", "HierarchicalRequirement"],
              attribute: "ScheduleState",
               fetch : "Name,FormattedID,Owner,ObjectID"
          };

             var cardboard = new rally.sdk.ui.CardBoard(cardboardConfig, rallyDataSource);
            cardboard.addEventListener(cardboard.getValidEvents().onLoad, cardboardOnLoad);
          cardboard.display("cardboard");
         }

         rally.addOnLoad(onLoad);

       </script>
    </head>
    <body>
       <div id="cardboard"></div>
    </body>
    </html>

    Appearance

    The simplest way to customize the appearance of the Card Board component is through a stylesheet.
    The layout of the board, columns, and cards are all defined using CSS classes.
    Full details of the defined classes can be found using a debugging tool like Firebug or the Chrome developer tools.

    Below are the styles used by the default board, column, and card renderers used by the Card Board component.
    For information on writing custom renderers see Customizing Columns and Customizing Cards.

    Board styles

    The following styles are used by the default board renderer:

    Class Description
    .cardboard Defines scope for all other styles; added to display element
    .cardboard .board Style for the board element

    Column styles

    The following styles are used by the default column renderer:

    Class Description
    .cardboard .column Style for each column element
    .cardboard .firstColumn Additional style given to the first column element
    .cardboard .lastColumn Additional style given to the last column element
    .cardboard .columnHeader Style given to each column header element
    .cardboard .columnContent Style given to the drag-and-droppable card area element of each column

    Card styles

    The following styles are used by the default card renderer:

    Class Description
    .cardboard .card Style given to each card element
    .cardboard .cardHeader Style given to each card header element
    .cardboard .cardOwner Style given to the owner image element in the card header
    .cardboard .cardOwnerName Style given to the owner name element in the card header
    .cardboard .cardContent Style given to the card content element
    .cardboard .defect .cardHeader,
    .cardboard .defectsuite .cardHeader,
    .cardboard .hierarchicalrequirement .cardHeader,
    .cardboard .task .cardHeader
    Additional styles given to card header elements based on item type

    Example

    The default renderers create boards that look like this:

    default

    This example adds some custom CSS which modifies the board in the following ways:

    • Smaller, greener column headers
    • White card backgrounds and bold text
    • No owner avatar in card headers
    css

    Copy and paste the following into a Rally Custom app page.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- Copyright (c) 2010 Rally Software Development Corp. All rights reserved -->
    <html>
    <head>
       <title>App Example: Card Board Custom Styling</title>
       <meta name="Name" content="App Example: Card Board Custom Styling" />
       <meta name="Vendor" content="Rally Software" />
       <script type="text/javascript" src="/apps/1.26/sdk.js"></script>
       <script type="text/javascript">

         function onLoad() {
           var cardboard;

           var rallyDataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
    '__PROJECT_OID__',
    '__PROJECT_SCOPING_UP__',
    '__PROJECT_SCOPING_DOWN__'
    );
           var cardboardConfig = {
             types: ["Defect", "HierarchicalRequirement"],
             attribute: "ScheduleState",
             fetch:"Name,FormattedID,Owner,ObjectID"
           };

           cardboard = new rally.sdk.ui.CardBoard(cardboardConfig, rallyDataSource);
           cardboard.display(dojo.body());
         }
         rally.addOnLoad(onLoad);

       </script>
       <style type="text/css">
         /*Make cards have bold text on a white background*/
         .cardboard .cardContent {
           background-color:#fff;
           font-weight:bold;
         }

         /*Make column headers smaller and green*/
         .cardboard .columnHeader {
           color: #6AB17D;
           font-size:12px;
         }

         /*Hide the owner avatar*/
         .cardboard .cardOwner {
           display:none;
         }
       </style>
    </head>
    <body>
    </body>
    </html>

    Customize columns

    The Card Board component is built using a flexible architecture which allows specifying custom column renderers.
    Column renderers are responsible for creating the columns in the board and responding to events fired during use.
    Examples of when to create a custom renderer include changing the column headers or the way columns resize themselves.

    Column renderer signature

    The default renderer (rally.sdk.ui.cardboard.BasicColumnRenderer) defines the following methods:

    Method Name Parameters Description
    constructor* board, value, options Constructor for a column renderer. The board, column value, and options are passed in by the board.
    render* - Called by the board to create the column layout. This method should create all the elements of the column (header, drag-and-drop area, ...) and then return the root column container element to be inserted in the board.
    getDndContainer* - Get the element which is the target container for drag-and-drop actions. This is also the element cards in which cards will be displayed.
    getColumnNode* - Get the root column container element. This should be the same as the return value for the render method.
    clear - Empty the column of cards and reset any running totals to zero.
    cardAdded item Called by the board when a new card has been dropped in the column. This can be useful for keeping running totals of item fields or updating the display based on the number of cards in the column. The default renderer keeps a total of the cards in the column.
    cardRemoved item Called by the board when a card has been dragged from the column. This can be useful for keeping running totals of item fields or updating the display based on the number of cards in the column. The default renderer keeps a total of the cards in the column.
    getCardCount - Get the total number of cards in the column.
    mayDrop items Called by the board when the specified items have been picked up to determine if the column is a valid drop target. The default renderer always returns true. Returning false will prevent the items from being dropped in the column.
    addNoDropClass items Called by the board when the specified items have been picked up to determine if the column should appear as an invalid drop target. The default renderer always returns false. Returning true will add a noDrop CSS class to the column but will not prevent dropping.
    onItemUpdated cardRenderer, args Event handler called when an update is triggered from a card in the column. The default renderer moves the update up to the board.
    onBoardResized board, args Event handler called when the board is resized. The default renderer will resize each column equally to fit in the available space.
    getValidEvents - Returns the valid events on this column renderer. The default renderer contains one: onItemUpdate.
      * = required

    Example

    The easiest way to create a custom renderer is to extend the existing basic renderer and override methods with new functionality. The default renderer creates columns that look like this:

    default

    Below is an example of a column renderer which extends the default renderer with the following functionality:

    • Displays the # of cards in the header
    • Gives visual feedback when there are more cards than permitted in the column
    wip limit

    Copy and paste the following into a Rally Custom app page.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- Copyright (c) 2010 Rally Software Development Corp. All rights reserved -->
    <html>
    <head>
       <title>App Example: Card Board Custom Column Renderer</title>
       <meta name="Name" content="App Example: Card Board Custom Column Renderer" />
       <meta name="Vendor" content="Rally Software" />
       <script type="text/javascript" src="/apps/1.26/sdk.js"></script>
       <script type="text/javascript">
         var WipLimitColumnRenderer = function(board, value, options) {
           //Extend the basic renderer
           rally.sdk.ui.cardboard.BasicColumnRenderer.call(this, board, value, options);

           var that = this;
           var dndContainer;
           var cards = 0;
           var columnDiv;
           var capacity = Infinity;
           var resourcesDisplay;

           this.render = function() {
             columnDiv = document.createElement("div");
             dojo.addClass(columnDiv, "column");

             var columnHeader = document.createElement("div");
             dojo.addClass(columnHeader, "columnHeader");
             columnHeader.appendChild(document.createTextNode(options.displayValue || value));
             if (options && options.wipLimit) {
               capacity = options.wipLimit;
               resourcesDisplay = document.createElement("div");
               dojo.addClass(resourcesDisplay,"capacityDisplay");
               setCapacityText();
               columnHeader.appendChild(resourcesDisplay);
             }
             columnDiv.appendChild(columnHeader);
             dndContainer = document.createElement("div");
             dojo.addClass(dndContainer, "columnContent");
             columnDiv.appendChild(dndContainer);

             return columnDiv;
           };

          function setCapacityText() {
             if (options && options.wipLimit) {
               dojo.empty(resourcesDisplay);
               resourcesDisplay.innerHTML = getCapacityText(cards, capacity);
               if (capacity >= cards) {
                 dojo.removeClass(columnDiv, "overCapacity");
               } else {
                 dojo.addClass(columnDiv, "overCapacity");
               }
             }
           }

           function getCapacityText(cards, wip) {
             if (wip === Infinity) {
               return " (" + cards + '/<span class="infinitySymbol">&#8734;</span>)';
             }
               else {
                 return " (" + cards + "/" + wip + ")";
             }
           }

           this.addNoDropClass = function(items) {
             if (capacity === Infinity) {
               return false;
             }
             return capacity <= cards;
           };

           this.cardRemoved = function(card) {
             cards--;
             setCapacityText();
           };

           this.cardAdded = function(card) {
             cards++;
             setCapacityText();
           };

           this.getDndContainer = function() {
             return dndContainer;
           };

           this.getColumnNode = function() {
             return columnDiv;
           };

           this.clear = function() {
             dojo.empty(that.getDndContainer());
             cards = 0;
             setCapacityText();
           };
        };

          function onLoad() {
             var cardboard;

             var rallyDataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
    '__PROJECT_OID__',
    '__PROJECT_SCOPING_UP__',
    '__PROJECT_SCOPING_DOWN__'
    );
            var cardboardConfig = {
               types: ["Defect", "HierarchicalRequirement"],
               attribute: "ScheduleState",
               fetch:"Name,FormattedID,Owner,ObjectID",
               columnRenderer:WipLimitColumnRenderer, //Specify custom column renderer
               columns: {
                 Backlog: {wipLimit:Infinity},
                 Defined: {wipLimit:3},
                 "In-Progress": {wipLimit:2}
               } //Specify columns with options
           };

           cardboard = new rally.sdk.ui.CardBoard(cardboardConfig, rallyDataSource);
           cardboard.display(dojo.body());
         }
         rally.addOnLoad(onLoad);

       </script>
       <style type="text/css">
         .cardboard .infinitySymbol {
           font-size: 16px;
           position: relative;
           top: 2px;
         }
         .overCapacity .columnHeader {
           color: #FC5350;
         }

         .overCapacity .columnContent, .dojoDndMove .columnContent.noDrop.dojoDndContainerOver {
         {
           background-color: #F9E2E1;
         }

         .cardboard .columnHeader {
           height: 35px;
         }

         .cardboard .capacityDisplay {
           font-size: 12px;
           line-height: 20px;
         }
       </style>
    </head>
    <body>
    </body>
    </html>

    Customize cards

    The Card Board component is built using a flexible architecture which allows specifying custom card renderers.
    Card renderers are responsible for creating the cards on the board.
    Examples of when to create a custom card renderer include adding new CSS styles or displaying more information (like tasks or defects).

    Card renderer signature

    The default renderer (rally.sdk.ui.cardboard.StandardCardRenderer) defines the following methods:

    Method Name Parameters Description Example
    constructor* column, item*, options Constructor for a card renderer. The item to be rendered is passed in by the board. MyRenderer = function(column, item, options) { };
    renderCard* - This method is called by the column to display a card. Returns a DOM node (usually a div) representing the information you want to show on each card. this.renderCard = function() {
       var card = document.createElement("div");
       card.appendChild(document.createTextNode(item.Name));
      return card;
    };
    renderDndCard* - This method is called by the column when the card is being dragged. It should return a DOM node much like the renderCard method. The default implementation is the same as render card but with an added CSS class avatar. this.renderDndCard = function() {
       var card = document.createElement("div");
       card.appendChild(document.createTextNode("Being Carried"));
       return card;
    }
    getCardBody - This method is called by both the rally.sdk.ui.cardboard.BasicCardRenderer and rally.sdk.ui.cardboard.StandardCardRenderer to get the content displayed in the card body. The default implementation returns a div element containing the item name. Overriding this is the easiest way to customize what is displayed in the card. this.getCardBody = function() {
       var div = document.createElement("div");
       div.innerHTML = item.Name;
       var descriptionDiv = document.createElement("div");
      descriptionDiv.innerHTML = item.Description;
       div.appendChild(descriptionDiv);
       return div;
    };
    updateItem item*, callback, errorCallback This method provides a convenient way to trigger updates from card renderers. Columns listen for onItemUpdate events (which this method fires) and then the actual update is handled by the board. that.updateItem({_ref:item._ref,Blocked:true}, function()
    {
       //put post update code here
    }, function(errors) {
       //put error code here
    ));
    getValidEvents - Returns the valid events on this column renderer. The default renderer contains one: onItemUpdate. this.getValidEvents = function() {
       return {
          onItemUpdate: "onItemUpdate"
       };
    }
      * = required

    Example

    The easiest way to create a custom renderer is to extend the existing basic renderer and override methods with new functionality.
    The default renderer creates cards that look like this:

    card

    Below is an example of a card renderer which extends the default renderer with the following functionality:

    • Displays the # of discussions
    • Displays the tags
    tag card

    Copy and paste the following into a Rally Custom app page.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- Copyright (c) 2010 Rally Software Development Corp. All rights reserved -->
    <html>
    <head>
       <title>App Example: Card Board Custom Card Renderer</title>
       <meta name="Name" content="App Example: Card Board Custom Card Renderer" />
        <meta name="Vendor" content="Rally Software" />
    <script type="text/javascript" src="/apps/1.26/sdk.js"></script>
       <script type="text/javascript">
         var DiscussionTagCardRenderer = function(column, item, options) {
           //This will allow you to inherit functionality from the BasicCardRenderer
           rally.sdk.ui.cardboard.BasicCardRenderer.call(this, column, item, options);
           var that = this;

           this.getCardBody = function() {

             var contentDiv = document.createElement("div");
             contentDiv.innerHTML = item.Name;

             //Show discussions
             if(item.Discussion && item.Discussion.length > 0) {
               var discussionDiv = document.createElement("div");
               discussionDiv.appendChild(document.createTextNode(
                 item.Discussion.length + " Discussions"));
               contentDiv.appendChild(discussionDiv);
             }

             //Show tags
             if(item.Tags && item.Tags.length > 0) {
               var tagDiv = document.createElement("div");
               var tagNames = [];
              rally.forEach(item.Tags, function(tag) {
                 tagNames.push(tag.Name);
               });
              tagDiv.appendChild(document.createTextNode("Tags: " +
                   tagNames.join(", ")));
            contentDiv.appendChild(tagDiv);
               }

           return contentDiv;
             };
            };

         function onLoad() {
           var cardboard;

           var rallyDataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
                                                                               '__PROJECT_OID__',
                                                                               '__PROJECT_SCOPING_UP__',
                                                                               '__PROJECT_SCOPING_DOWN__'
    );
            var cardboardConfig = {
              types: ["Defect", "HierarchicalRequirement"],
              attribute: "ScheduleState",
                fetch:"Name,FormattedID,Owner,ObjectID,Tags,Discussion",
              cardRenderer:DiscussionTagCardRenderer //Specify custom renderer
         };

           cardboard = new rally.sdk.ui.CardBoard(cardboardConfig, rallyDataSource);
         cardboard.display(dojo.body());
         }
         rally.addOnLoad(onLoad);

       </script>
    </head>
    <body>
    </body>
    </html>

    Feedback

    Need more help? The CA Agile Central Community is your one-stop shop for self-service and support. To submit feedback or cases to CA Agile Central Support, find answers, and collaborate with others, please join us in the CA Agile Central Community.