Wiki
Clone wikicardboard / 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.
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
#!c# 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
#!c# 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