MyBoard – A SharePoint Task Management App

April 2015: This little app has become very popular and now has its own page – HERE – that includes feature description and a video of it in action. – Paul

Almost a year ago I started to (finally) gain interest in learning Grunt – the Node.js task execution framework most used in building JavaScript projects. I have been a long time user of Ant, mainly because I use the Eclipse IDE, where support for Ant is built in. But as my work with front end web projects increases significantly (I recently accepted a position as a web GUI engineer) the need to become familiar with these type of build tools was essential to ensuring a productive and streamlined workflow. In addition, I wanted to continue working with the SharePoint platform and specifically, attempt to understand how the Ribbon is composed and whether I could create my own plugin for adding custom Ribbon tabs.

For this, I stared to develop a project I call MyBoard – a SharePoint Single Page Application (SPA) that turns any SharePoint list into a list board (Kanban) complete with drag-and-drop and easy access widgets for managing the cards on the board. This is now a fully working “app” (not a SharePoint App) that I am using in several different projects where we needed to manage a list of work items across a small group of people. It’s simple and efficient and all it takes to get it going is uploading one single ASPX page to a document library. Oh, yeah: and it works on SP2010 and 2013 (and probably even SP 2007 if the proper document header is used).

MyBoard - AppIn working this app, I have ended up with several reusable components that I’m sure I’ll take advantage of in future projects. Some of which I’m also thinking of also making available as open source projects on github – along side some of my other projects, including the SharePoint widgets library.

About MyBoard

I like Trello. It’s clean, fast and efficient as it allows you to apply several action on the cards via each card’s menu. With that service as the model, my requirements for MyBoard were the following:

  • simple to setup and configure including support for zero-configuration
  • adaptive of site’s existing data (lists, Document libraries)
  • multi-user support and bookmarkable urls
  • integrated into the site’s look and feel
  • quick actions available from each card

The app works by having the user select the current site’s List to be used in retrieving data for display, along with the list Column that will be used to build the Board. The Column needs to of type Lookup or Choice, so that its values can be used as the Kanban board’s columns.

A little more on these, including what I have learned and where I currently stand with them:

Simple to Install, Setup and Configure

As I already mentioned above, the entire app is contained within a single ASPX file, which includes all needed dependencies include a private version of jQuery – thus there is no issue or conflict with deploying this to a SharePoint site that already uses jQuery. You drop that file into a Document Library and everything else is configured from the app once you click on the file.

This single file is the result of the build process, which uses grunt as the task execution tool. It takes all if the code files, it combines them into one file, minimizes it and finally inserts the code into the ASPX file. In addition, I have a grunt task that also copies the built ASPX file to the document library on SharePoint – essentially “deploying” the app. Grunt tasks were strait forward to setup and there are tons of examples online on how to achieve any task. I did have to write some functions for embedding contents of one file into another, something that I could not find good example on. There are tons of concatenation examples – but I needed to include the content in specific locations. Perhaps I’ll write about that in the future.

The project source, however, is laid out very differently on disk, with several individual files. For development and debugging I have a special ASPX file that loads each file individually so that I can easily use the browser development tools to focus on the set of functionally I’m working with rather than having to browse through a long list of code all in one place.

So this allowed me to become very familiar with Grunt – just as Gulp is starting to gain some ground. I have not tried it, but the approach it uses seems allot more attractive to me: code-over-configuration.  Perhaps that tool is another excuse for me to create a new project where I can apply it.

Adaptive of site’s existing data (lists, Doc libraries)

I wanted the app to be able to use the site’s existing data and not impose a specific format to be followed or predefined structure. The only requirement is that the List or Document Library have a column of type Lookup or Choice, which is needed to build the board. This design makes it feasible to use this app immediately with existing site’s data.

The only portion of this design I am not happy with is how slow the editing of a card is. When editing the card content, the SharePoint list Edit form is shown in in a dialog, thus loading all the bloat that makes up that form. I may implement my own edit form and add some of the features found in Trello (like inline editing, and progressive saving).

Multi-user support

Multi-User support here simply means that updates by others users are near-instantly seen by others whom may also have the card displayed on their board. For this I built a library that provides data persistence between the SharePoint list data and the web application. This layer is so cool (if I can tune my own horn here) that I know use it on all SharePoint projects that needs to get data out of SharePoint lists.

It uses the GetListItemsSinceToken API operation and depends on Knockout.js and it’s Observables to achieve its automatic insertion and removal of items from the query result as well as the notification of any bound listeners. You use it the same as SPServices GetListItems, but you get back a Promise that resolves with a Knockout observable array containing the list item matching the defined filter. From that point forward the query continues to check the list for changes on the query used on input and reflects that on the results array if any are found – which in turn are reflected on the UI if the Observable Array is bound to the UI (presentation/view). This library also provides a custom binding called SPField that handles the display of sharepoint data – including the format of it (like lookup, Date Values, etc.).

I’m considering releasing this library as open source via github. The code is pretty solid right now, but I need to spend some time documenting the external API and provide some usage examples – maybe even a sample app.

In addition to having constantly updated data displayed on the board, the app also needed to support the ability for the user to “preserve” the setup, so that they did not have to create it on every page visit. This is supported with two approaches:

Predefined Board Setups

An administrator (one having write permissions to the folder where the MyBoard ASPX file is stored) can create boards and then save them as predefined setups. These show up on the Ribbon menu, under the ‘Board’ button:

MyBoard - pre-defined

Stateful URLs

This is a very common approach with SPAs – using the hash portion of the URL to represent the “page” the user is visiting – also called routes.  MyBoard uses the Sammy.js library to achieve this functionality and thus any user can create and configure a Board and then bookmark the page. As they configure the board, the URL is updated to “maintain state” and thus will recreate the view once loaded again. This also makes it ideal to send the url to others, if wanting to share information. Here is an example of such a URL:

/MyBoard.aspx#!/v/Tasks/Task+Status/Status[matchType]=Eq&Status[logicalType]=Or&Status[values][]=Completed

Integrated into the site’s look and feel

This is a work in progress, but the primary thing I wanted to accomplish was to utilize the Ribbon to provide navigation and controls for this app. With time, I’ll look to also use the styles used to brand the given site so that the entire apps feels integrated.

Customizations of the Ribbon are well covered now a days in blog posts, which is done through declarative XML. This is the official and supported way of doing it. But this does not mean it’s the only way. I thought: there has to be a way to create these via JavaScript from a client side script – after all, the entire Ribbon is made up of HTML, CSS and JavaScript. After much searching of the web and debugging of the various ribbon JavaScript files, I have been able to come up with a library that allows you to create your own custom ribbons – or to clarify: add tabs to the OOB SharePoint ribbon. The screen capture above shows the MyBoard Ribbon created with this library.

It does not support all the possible controls that the Ribbon can provide – a vast and rich set. Currently I have support for large buttons, small buttons (usually stacked vertically), Flyout Menus (pop out menu with buttons) and Flyout Areas (my own creation – a pop out are that can be used to display anything). All of this in a client side JavaScript library that frees you from having to use the declarative XML approach and place files on the server side. I am currently using it with SharePoint online O365) as well as SharePoint 2010 on premises.

This is yet another library that I’m thinking making available as open source via github. For the most part, much like the data persistence library, the code is pretty solid. The documentation effort, however will be significant and will delay when I make this available (I don’t like to release a half-baked library 🙂 ).

Quick actions available from each card

Having to open each card just to make a small changes, like setting a value in a column is overkill. Simple tasks like that should be possible right from the card menu – just like Trello. So each cards menu (currently) supports:

  • assigning users to the card
  • email the card
  • showing the cards direct URL

MyBoard - quick actions

Other actions that are In the backlog and will be implemented sometime in the near future are:

  • set categories (labels)
  • subscribe to alerts
  • ability to set any single value columns (those of type Lookup or Choice)

Most of these action are possible only after the user configures the board, which once created, allows the user to set which of the selected list columns will support the action (ex.: which column should be used as the card Assignee, which column should be used for labels, etc.)

So what am I going to do with this app?

Right now I’m keeping this app private and using it in a few projects. I was thinking about converting it to a SharePoint App, but I’m not a VisualStudio person and with my ever decreasing focus on building tools/apps on SharePoint, not sure that will happen (Ps. Would love for Microsoft to support packaging SharePoint apps outside being forced to use their own toolset). The thought of putting up for sale has crossed my mind. Nothing outrageous, but a small fee. But perhaps in the end, I might make available a free “closed source” limited functionality version with an option to license the full version. That last option may be the one I ultimately pursue. It will give the opportunity/excuse to convert this project to use Require.JS and split up the code into modules. Once they are in place, using a (Grunt) build task that creates both versions will be fairly strait forward.

If you have made it this far in reading, let me know what you think I should do it. Do you think there is a market for a paid version?

Special Thank You

I have asked a set of folks who are much more involved with SharePoint than I am, to evaluate this app and received some feedback – specifically from Stefan Bauer (@StfBauer, blog at http://www.n8d.at/blog/). His UI/UX constructive feedback was outstanding and although I have not yet followed up on all of his feedback, I will at some point in the future.

I also have to give kudos to Daniel Walker (@spevilgenius, blog at http://spevilgenius.blogspot.com/ ), whose blog post on how to create Ribbon tabs and buttons via JavaScript helped and inspired me kick start the Ribbon library I reference above.

Advertisements

75 thoughts on “MyBoard – A SharePoint Task Management App

  1. Hi Paul, yes I read the whole post and yes a small fee or license would be warranted with the valuable contribution you have created. Please send the app via email as I would like to test it with share point 2010 and 2013. Thank you.

  2. Hi,

    Light version is fully supportive for me, the only thing which I need is

    1. Edit the task view/edit form in dialog.
    2. This generic form should be bound with one list. (which I can also myself from changing the code.)

    3. Is it possible to provide lighter version with in-line code.

    Thanks,

  3. Paul, slick solution. Could you please send me a trial version. We would like to try this with our change management solution in SharePoint 2013 on-premise. How is this licenced?

  4. Hi Paul – Looking for something like this and would love to trial the latest version. My CIO loves Trello, but I’d like to integrate everything into Sharepoint, as that’s where the majority of our company lives. This could be the answer.
    -Alan

    1. Hi Alan.
      Thanks for your interest on this. I too am a big fan of Trello and it was it that inspired me to build this app – for the same reasons that detailed above.
      I will send you more details on this via email.

  5. Hi Paul,
    I woud like to test your app in our Sharepoint 2013
    Could you send also license info and costs?
    Many thanks
    Kind regards

  6. Hello Paul,
    I am interested on using Myboard in our sharepoint 2013 environment.
    Now I am using trello for a lot of projects, but I would like to move the task lists to sharepoint.

    Thanks in advance.

    1. Paul,

      How much do you charge to install remotely your app on our share point for testing?

      Are you Portuguese?

      Get Outlook for iOS

      1. Olá João.
        Yes. I’m Portuguese. 🙂

        I’ll send you email regarding this app via email and will include a full version trial so you can play with it.
        Thanks for the interest.

  7. Hi Paul, This looks great, and I have just been googling whats available as far as adding this sort of functionality to SharePoint are. Any chance of getting a look at the final release?

  8. Hi Paul,

    Seems to be exactly what I m looking for my dev.teams

    I didn’t have the chance to receive an email with more information about licenses model ? maybe my post never reach you

    Stephane Huck

    1. Sure. This is actually the original post when I started the project. It now has a page of its own that includes a video of it in action and a test app. See link at the top of this post.
      I will email more information on the full app.

  9. Hi Paul, Can I get some information on how to purchase your app? Looks great and something I have been looking for.

  10. Hi Paul – I’d like give this solution a spin to see if it works for what my team is trying to do. Could you send some information on how I could try it? Thanks.

  11. Hello Paul,

    I’m missing a feature in this board. Is there a way to move the cards up and down (same column) and hold them on his position after refreshing the page?

    I’m also looking for custom sorting..

    I hope you could give a solution! thanks

  12. Hi Paul – I’m looking at Kanban boards for Sharepoint and discovered Myboard. It looks very promising, so I’m wondering if I can test it. As our organisation is not using Kanban boards yet I’m now starting using Trello, but as I would not want to migrate too much it would be super if I can test your solution in some way alongside trello. Thanks in advance.

  13. I would really like to purchase this. I’m looking to do just this with 2010. Can you reach out via email with a cost and such? Love the work.

  14. Hi Paul – I would also be interested in looking at your solution for our needs. I’m currently consulting at a large, non profit here in the Seattle area and we need to design a work intake and tracking mechanism to support our operational reporting. Please reach out to me. Thanks!

    Imran

  15. I work in health IT and would be interested in this solution (although we’re still using Sharepoint 2007) if it’s available. Could you shoot me an email? Thanks!

    1. Hi Zinta. Thanks for your interest.
      Unfortunately this solution needs SharePoint 2010 or higher… Mainly because it uses the Ribbon as the navigation menu for it. If I get more requests to have it work on SharePoint 2007, I could change it to use a custom menubar widget instead of the builtin SharePoint Ribbon, but I have no plans today for that.

  16. I would be interested in a copy. I have a few projects I know I could implement this on and have a large base of potential end users from which to solicit feedback from that I would share with you that may have value to you for future enhancements. Regards, Todd

  17. Hey Paul, I would like to know if I can buy your Task Management tool for my share point 2010. I think it’s a very good job you’ve done! Congratulations!.

  18. Paul, There are a few task / kanban / scrum boards in the SharePoint apps store already … none of them offer the functionality you are describing. I would not buy it from the app store, but would consider purchasing it as a package to install on the host web where it would be much more useful and extensible. Even better as a well documented sample to help others build this type of mashup (JavaScript Libraries / SharePoint ootb). There is a new middle tier coming into focus for Office 365 developers … those not able to deploy provider-hosted apps and those where SharePoint hosted (App web) is not enough or security is an issue.
    I appreciate your work! Thanks for contributing.

    1. Thanks Greg… Appreciate the comment.
      You are in deed correct in that O365 and SP2013 overall has placed a greater focus on the “middle tier” that us client-side developers have known for a long time. The SharePoint API is great and offers a vast amount of functionality… With the advances that web standards (ES5/6, HTML5, CSS3) have made in the recent years, building sophisticated UIs has never been easier… SharePoint, in my opinion, is an excellent example of a platform that can be leverage as a “backend” supporting system to a great front-end application. That’s the way I use it.

      Back to this project – My Board.
      When I mentioned “app” I was actually not thinking (yet) of making it a SharePoint (2013) official store app, but rather to keep as it is today: 1 single ASPX file that any user can just “install” on any SharePoint deployment. All they need to have is permission to upload the file to a Document Library. And the beauty is that it works with existing site lists, so one can take advantage of for existing data (as long as there is a column of type Lookup or Choice to be able to build the Kanban). I too believe that many organization will not allow apps to be installed by users and thus this approach continues to allow users to work around those restrictions.

      I have in fact decided that I will try to sale this app (the “full” version)… I will probably use https://sellfy.com/ as the merchant. If you are interested, let me know. 🙂 At some point in the future I will also make available a free limited-functionality version.

      Thanks again for reaching out.

      1. Paul,
        A possible niche for this app would be for independent consultants to run a SharePoint project interacting with the client inside SharePoint. So often Excel or OneNote holds the backlog or even VisualStudio online. The awesomeness would be to use a collaborative tool, hmm SharePoint? It would be wonderful to have a modern UI and tool within SharePoint to manage a backlog, sprints, etc…
        I used your Agile example from BlackMagic, it was a great example of code reuse … but it had a rather large footprint.

      2. Yes… this one is much-much lighter… I’m actually using it to manage a development backlog across a team of 10 developers and its working very nicely… I just love the fact that all I had to do is drop a single file into a document library and I was up and running. That being said, I am also thinking about taking the Agile project from the BlackMagic book and creating a more sophisticated version of it that is “easy” to install.
        Thanks for the feedback.

      3. Thanks Greg. You touch on another feature I will eventually add: collaborative interaction. I plan to come up with a reusable library that will use a Discussion list as a way to have a “conversation” for each board card.
        Just last week I was exchanging allot of email between coworkers around a specific card (user story). I ended up PDFing the email and attaching it to the card because I did not want to loose it. Having the card support that will be awesome (IMO). The drawback of using SP will be notifications and the ability to use email as a way to respond to a discussion. SP is lacking in that department without having a custom solution in place (aka: server side code).

    1. Hi Grezel. No, not yet.
      Question: Would an app like this be something you would consider purchasing?
      I have been leaning towards a paid app for about $5 initially. With a free limited functionally version in the near future.

    2. Grazel,
      Thanks for you reply… That’s good feedback to me (and inspiration to keep doing this stuff 🙂 )… I’m going to email you directly… Maybe we can work something out.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s