REQUEST A DEMO

Introducing Dovetail Bootstrap

Over the years we’ve grown a lot of infrastructure for building web applications on Dovetail SDK. These infrastructure pieces get used by a lot of different Dovetail products. Today we are launching Dovetail Bootstrap which packages up many handy capabilities like dynamic case history and case creation on top of common infrastructure like: model projection, authentication, logging, and session management. The core goal of Dovetail Bootstrap is to get Dovetail SDK developers up and creating web applications quickly.

How do I get it?

The code for Bootstrap is open and available on GitHub. Feel free to watch, fork and improve the code. We’d love to work with you to add great new things to Bootstrap. I recommend reading the ReadMe as it takes you through setting up a development environment.

What Can Bootstrap Do?

Bootstrap is not a product but a starting point giving you the building blocks of your own applications. Let’s take a look at the basic features that are there now.

Authentication

Implementing authentication is a pain. Bootstrap’s “Hello Bootstrap” web application has a simple one. When a user is not authenticated they are redirected to the Sign In page.

bootstrap-authentication

After signing in, the user is taken to the URL they originally requested. Your code can easily get the current user of the current incoming web request. This is all pretty typical stuff for web developers but a pain to write and wire up. Below, the master layout uses a partial to display the current user.

bootstrap-home-with-signout

Case Listing

The home screen, above, demonstrates showing the user’s open cases. To accomplish this we are using a Model Map to pull case details from a view (qry_case_view) to a view model object which the Spark view engine will consume.

Clicking on the case ID takes us to the case history.

Dynamic History

We have invested a lot in our dynamic history infrastructure and here we are sharing it with you. Getting good case history is a tricky problem. There is the static history on the case record which is not that useful as its length maxes out at 32K. The better alternative is to use the activity entries logged for every action taken, but hand building history via activity entry queries and collating results is a tricky and manual data access task.

bootstrap-history

All the work to build this view is done by Bootstrap’s history assembler and it works for cases, subcases, and solutions. Better yet the output of the history generated can be extensively customized:

· Add or remove which history (activity) entries are shown

· Edit history contents, including getting records related to the activity entry.

· Child object history can be mixed in e.g. case history can contain selected sub case history items.

The output of the history assembler is a history view model and is rendered by the appropriate view.

Create Case

Most everyone wants to create a case at one time or another. Bootstrap comes with an example of doing this using our Dovetail SDK

bootstrap-create-case

Look in the /api/cases/create handler directory. The get_handler class is in charge of showing the form for GET requests of /api/cases/create url. The post_handler class handles POSTs to the same URL and creates the case based in the input model.

Take a look a the drop downs for the case Type, Severity and Priority. The dropdown values are automatically populated by a feature of FubuMVC called HTML Conventions.

bootstrap-create-case-dropdowns

In this case we set an attribute on the output model of the create case GET. We have trained the web application to render special Html when trying to display an input for this “special” attributed property. HTML Conventions are another whole blog post. I put together a gist containing all the moving parts that make this happen.

Application List Listing (try to say that fast)

Application lists (GBSTs) are used a lot in Clarify. In fact, I just talked a bit too much about conventionally showing drop downs for them above. As an example in Bootstrap we provide a simple listing and detail view of application lists.

bootstrap-gbst-listing

Take a look at how easy it is to do the ClarifyGeneric query used to generate the listing. Here is a detail view of one of the lists showing off its elements.

bootstrap-gbst-list-detail

To show this list detail view we project a view model from the Dovetail SDK’s list cache ordered by rank highlighting the default list element.

That finishes our fly through of the Bootstrap Web example. There is an extremely exciting About page that I did not show off. I’ll let you grab the code and take it for a spin to see that gem.

What exactly is in Bootstrap?

Bootstrap is written in .Net 4.0. It currently consists of 3 libraries and a web application pulling the libraries together showing it all off.

  • Bootstrap – SDK session management, history builder, settings (configuration) support.
  • ModelMap – map view models to your database schema and easily populate them (awesome).
  • Fubu – FubuMVC specific infrastructure: list rendering conventions, forms and token based authentication.
  • Web – An example Agent authenticated web application with a user customized home page, case history rendering, create case example, application lists

Retrieving data using ModelMap

Long ago I talked about the first iteration of ModelMap called DataMapper.

“DataMap ModelMap makes it easy to populate model objects from a Clarify/Dovetail CRM database. It is a sort of one-way Clarify specific object relational mapper tool.”

Model Map saves you from having to write a lot of data access code for querying and mapping data from query results into view models. For more details take a look at my original post and at the example map shipped with Bootstrap which is used by the home page to build a list of the current user’s open cases. If you don’t find anything else useful about Bootstrap do stop and take a look at the power of ModelMap at Dovetail we use it everywhere.

Web Application Framework

The Bootstrap web application is built on ASP.Net using the FubuMVC web framework. At Dovetail we use FubuMVC a lot. My secondary goal of Bootstrap is to make our customers more aware of “Fubu” by shipping great and useful examples of using it.

By no means are you required to write only FubuMVC apps using Bootstrap. In fact, I’ve updated our Dovetail Mobile product (based on ASP.Net MVC 2) to use Bootstrap to prove out this assertion. I may later provide guidance for using Bootstrap with ASP.Net MVC. Let me know if this interests you.

Wrap Up

That is about it for the main features and examples in the Bootstrap web application example. Bootstrap is by no means is done. We are starting to use Bootstrap as a foundation for our products at Dovetail and it has been really handy publishing the Bootstrap libraries as Nuget packages for use by us internally.

The name of the project is a blatant rip-off of Twitter Bootstrap which we use in the web application.

I apologize for glossing over a lot of FubuMVC detail there is an ever improving about of educational information on Fubu out there. Go ahead and follow them on the Twitters.

If you have any suggestions or find bugs hit me on or Twitter or create a GitHub issue. If you are stuck please do send me a line.