SharePoint 2013: Use Twitter Bootstrap for SharePoint App development

If you have not heard of Bootstrap, it’s a CSS framework just like javaScript framework jQuery. Using Bootstrap, you can get various CSS classes that can be used in web design to make your web site looking consistent and impressive.

Introduction to Bootstrap

Bootstrap was initially developed by Twitter to enable consistent design across all Twitter tools. But now it’s the popular free CSS framework. Simply to understand the Bootstrap, let’s say you would like to add some styles in your web page. You are using HTML table in your web site and you want all tables to have same design/style all across the web site. In Bootstrap framework, you will find some CSS classes that you can use to have nice, impressive look for table all across the site. To apply default Bootstrap table style, just apply the CSS class “table”. If you would like to add hover style in the table add “table-hover” CSS in the the table class. Applying the following table styles results in the table shown in figure 1. The table has rounded corner, alternate color and nice/slick border width.

<table class="table table-bordered table-striped table-hover">
</table>

Figure 1: Table with round corner and slick look with Bootstrap CSS styles

 

You can check the default table styles provided by Bootstrap at this link: http://twitter.github.com/bootstrap/base-css.html#tables

While you will develop SharePoint Apps, you can easily integrate Bootstrap in your app and can get impressive look and feel.

 

How to integrate Bootstrap with SharePoint App

To use the Bootstrap in your app, first download the Bootstrap from Twitter Github. Once you extract the zip file, you will find three types of resources you need to use: CSS files, JavaScript Files and image files.

Step1: Copy the Bootstrap files in corresponding App folders (shown in Figure 2):

• Copy contents of the the the Bootstrap “css” folder to “content” folder in your app in Visual Studio. I would recommend you to copy min file(s) only.
• Copy contents of the Bootstrap “img” folder to the Visual Studio “Images” folder.
• Copy contents of the Bootstrap “js” folder to the Visual Studio “Scripts” folder. I would recommend  you to copy min file(s) only

Figure 2: Copy Bootstrap files in your Visual Studio App project

 

Step 2: Make Image/img folder related Changes

Bootstrap uses two images files which defines icons. These image files supposed to copy in App “Img” folder, as Bootstrap looks for these images in “img” folder. But SharePoint image folder name “Images” whereas Bootstrap Images folder name is “img”. So we need to update Bootstrap CSS file. Open the file “bootstrap.min.css” in the Visual Studio from “Content” folder. Then find for “.png” using Ctrl + F, and finally modify the image path from “img” to “Images” as shown below. You need to make changes in few places in the file:

Figure 3: Update Image Reference in Bootstrap Css file.

 

Step 3: Add Reference to the Bootstrap files in your page

The final step is to add reference to these Bootstrap reference in you page. Add the following references in your page in App under content place holder “PlaceHolderAdditionalPageHead” or any other suitable places:

<link rel="Stylesheet" type="text/css" href="../Content/bootstrap-responsive.min.css" />
<link rel="Stylesheet" type="text/css" href="../Content/bootstrap.min.css" />

<script type="text/javascript" src="../Scripts/bootstrap.min.js"></script>

 

Download Source Code

I’ve created a sample SharePoint 2013 App project with the Bootstrap integrated. You can download the sample project BootstrapTest from my Skydrive.

Conclusion

With the growing popularity of Bootstrap, we should  know about the framework and need to use it for appropriate applications. I’ve not tried Bootstrap with SharePoint webparts or full-trust applications but I’ll try to investigate in future. However, if you have not already tried Twitter Bootstrap please give a try, I do believe you’ll like it!

SharePoint 2013: Workflow Debug/Diagnosis

In SharePoint 2013, new workflow model introduced. Now the workflow runs in different servers (or farms) and SharePoint communicates to the workflow server via REST endpoints. This is really scalable and decoupled architecture but it brings new challenges for workflow developers. Now debugging is not so easy as it was before with SharePoint 2010 workflows. Still you can develop/debug SharePoint 2010 workflows in SharePoint 2013 but it’s not recommended anymore. I’ll explain the techniques you can use to debug your workflow. If the workflow fails to run you will find the workflow error like HTTP 500 or Internal server error. You need to find out by yourself what went wrong. Till date, Workflow doesn’t have inherent functionality to trace the requests though as per this forum post, Workflow team is working on some tracing tools for next version.

Now let me describe few external tools/techniques you can use to diagnosis your workflow.

Event Viewer

Windows Server running workflow service can trace workflow manager and service bus activities. By default the Analytic and debug log for workflow manager is disabled. You can enable the event viewer and see what’s going on under the hood. You can find out details on how to enable the event viewer in the link: http://technet.microsoft.com/en-us/library/jj193526

 

HTTP Traffic Tracing

You can use some HTTP packet traffic tracing tools in SharePoint Server and trace the request back and forth between SharePoint and Workflow server. One such nice tool (though not free) that I’ve found is HTTP Debugger. However you can use any other tools that watch HTTP traffic at the network level (not browser level). So tools like Fiddler will not help as it just trace requests made from Browser whereas we need tools that trace HTTP traffic at network level.

 

Database Log

In the workflow Management database, there’s a table ‘DebugTraces’. I’ve noticed that sometimes Workflow Manager write down errors/debugs in this database tables. You can go and take a look if something is useful for your workflow debugging.

 

Conclusion

You can use all above tools in combination in finding out problem in different parts of the full workflow lifecycle. You can use HTTP Tracing tools to find out if the Workflow Service call from SharePoint goes to Workflow Manager or vice versa. Using event viewer or database log, you can find out if there’s any errors in your workflow during execution. Until some built-in tools are available for workflow tracing, you can use these tools to find out your problem relatively quickly.