Clone wiki

cardboard / Home

Cardboard

Cardboard is a team 'scrum' board that can be used with any back end. It is divided into a Client and Server projects.

Cardboard Sample

License

This project in licensed under BSD

Cardboard.Client

Server agnostic jQuery plug-in to build a visual board of cards.

Requirements

  • jQuery
  • knockout
  • underscore
  • bootstrap

Getting Started

  • Install via NuGet to pull in all dependencies and a sample page.
Install-Package Cardboard.Client
  • Open 'CardboardSample.html' in browser to load a sample board.

Create your own board

  • Add a script reference to cardboard.js and links to cardboard.css.
<link href="Content/Css/cardboard.css" rel="stylesheet" />
<script src="Scripts/cardboard.js"></script>
  • Create cardboard on a jquery element and provide the cards metadata.
$("#board").cardboard({
    boards: [{
        id: "FirstBoard",
        columns: [
        {
            name: "",
            width: "10%"
        },
        {
            name: "Todo",
            width: "40%"
        },
        {
            name: "In Progress",
            width: "10%"
        },
        {
            name: "Done",
            width: "40%"
        }]
    }],
    getCardsAsync: function() {
        var cards = [{
            id: "CardId",
            title: "CardTitle",
            owner: "Federico",
            priority: 1,
            status: "In Progress"
        }];

        return $.Deferred().resolve(cards).promise();
    }
});

Card and Board Options

Refer to the Cardboard.d.ts type definition for all available options.

Cardboard.Server

Helper classes to create an ASP.NET server to load cards into the board.

Requirements

  • ASP.NET WebAPI
  • Ninject

Use

  • Install via NuGet on an existing ASP.NET WebApplication
Install-Package Cardboard.Server
  • Implement the ICardService interface
public class TestCardService: ICardService
{
    public IEnumerable<Card> GetCards(string boardId)
    {
        return new Card[] 
        {
            new Card()
            {
                Id = "1",
                Owner = "Federico",
                Priority = 1,
                Title = "Task 1",
                Status = "In Progress"
            }
        };
    }
}
  • Register the CardService with Ninject in Global.asax
NinjectConfig.Register(GlobalConfiguration.Configuration, kernel =>
{
    kernel.Bind<ICardService>().To<TestCardService>();
});
  • Create cardboard on a jquery element and provide the cards metadata.
$("#board").cardboard({
    boards: [{
        id: "FirstBoard",
        columns: [
        {
            name: "",
            width: "10%"
        },
        {
            name: "Todo",
            width: "45%"
        },
        {
            name: "Done",
            width: "45%"
        }
    }]
});

Updated