This post is about how to create a Microblog with SharePoint Designer 2010 and the use of DVWPs, CSS and jQuery. A Microblog can be used for quick communication with team members in short sentences at the Intranet. This example works just like a SharePoint blog site, posts and comments are stored in separate lists that are linked by a lookup and team members can add posts and anyone can reply to posts. This Microblog is a basic no code solution and if you are looking for more advanced social features like hash tagging, direct messages, document uploading or integration of my site you should check out tools like NewsGator or Yammer among more. If you are looking for a basic comment function, maybe the OTB web part Note board could be an option. But let’s look into how you can use the DWVP for a Microblog.

Let’s try it out

  • Open the browser and create two custom lists in the root site of your Site Collection
    • Name it ListPosts
    • Name it ListComments
  • ListPosts
    • Create a column:
    • Name: Content – Multi lines of text with three lines for editing and plain text type.
    • Go to list settings, click the Created By column and change the presentation for this field to Name (with picture).
    • Add a new Item in the list with a title and a comment.
  • ListComments
    • Create two columns:
    • Name: PostsID – type Lookup. Get information from ListPosts in the ID column. Do not allow multiple values.
    • Name:  Comments – Multi lines of text with three lines for editing and plain text type.
    • Go to list settings, click the Created By column and change the presentation for this field to Name (with picture).
    • If you don’t use English language, rename the the (Title) column to Title, another way is just to set this column as optional if you prefer.
    • Add a new Item in the list with a title and a comment. Type a title, select PostID according to the ID from the ListPosts item you added and add a comment.

Create a Linked Data Source for the posts and comments lists

  • Open the root site with SPD and click at site objects in the left navigation at click Data Sources. Click at Linked Data Source in the ribbon. Give it the name MicroBlog in the General tab and click at configure Linked Source in the Source tab.
  • Select ListPosts and ListComments and add them to the right pane. If you can’t see the list you have to update SPD. Click at the next button and select Join and click at Finish and OK.
  • Open the root site with SPD and create a new folder named SPD-WebParts
  • Create a new ASPX page called MicroBlog and save it in the folder you created, open the page with SPD. IF you download my pages and will copy and paste you don’t need to do more now, but if you want to set this up by your self you can attach the page to your custom master page. Check it out, click at the Style tab in the ribbon, the button Attach and attach it as a custom master page. In the design view, click at the right arrow for the PlaceHolderMain place holder and click at create custom content.
  • Create a new ASPX page called MicroBlogForm and save it in the same folder as Microblog.aspx. Repeat the steps as you just did for the MicroBlog.aspx.

Create two ASPX pages

In the next step it’s time to create two DVWPs for MicroBlog.aspx, the first is for inserting posts and the second is for displaying current posts and their comments. If you want to build this by yourself you can just add a Display Item Form DVWP and use the Linked Sources and then insert field from the Comments as a Joined sub view. You will also have to create a New Item Form DVWP for the second page meant for inserting comments.

If I would describe all the steps from now including styling and jQuery this blog would be too long and for this reason I have prepared this so it’s just to download the pages and do some copy and paste. If you export or upload the DVWPs as web parts the CSS and the jQuery will not follow the web part. so cut the CSS from the MicroBlogForm page and paste this into an external CSS file. The same goes for the jQuery stuff in both pages, cut the scripts and paste them into the head section of your custom master or into an external JS file.

Read more about Linked data sources at the Microsoft Office SPD pages.

Insert the Dataviews into the ASPX pages

MicroBlog.txt

  • Open this page and copy the content into MicroBlog.aspx and save the page

MicroBlogForm.txt

  • Open this page and copy the content into MicroBlogForm.aspx and save the page

CSS

Copy this CSS into your custom CSS file

/* --- MicroBlog --- */
.PostBodyWrapper {width:100%;}
.PostWrapper {margin-left:5px}
.PostSeparator {border-bottom:1px #f1f1f1 solid; border-top:1px #fff solid; margin:5px 5px 5px 5px}
.PostImg {float:left; width:50px; height:50px; padding-right:10px}
.PostContentWrapper {background-color: #fff; height:50px;}
.PostEditor {font-weight:bold; color: #0072bc}
.PostContent {}
.PostLink {}
.PostComment {}
.PostCreatePost {padding:10px}
.FormFieldMicroBlogWrapper {margin-left:5px; width:100%; }
.FormFieldMicroBlog > span > textarea {
background-color: transparent; width:95%;
border:1px solid #ccc;        
overflow:hidden; overflow-y: hidden; overflow-x: hidden;   
font-size:14px; color:#999;
font-family:Arial, Helvetica, sans-serif;
padding:10px 20px 0px 10px;
margin-right:20px
}
.PostBtn {padding-right:3px; float:left}
.PostBtn Input {
width: auto;
padding: 5px 10px 5px 10px;
background: #617798;
border: 0;
font-size:13px;
color: #fff;
cursor: pointer!important;
float:right
}
.CommentWrapper {margin-left:60px; margin-right:5px; background-color: #f7f7f7; padding:10px; border-bottom:1px #fff solid}
.CommentImg {width:50px; float:left;}
.CommentContentWrapper {}
.CommentEditor {font-weight:bold; float:left}
.CommentEnd {margin-left:60px; margin-right:5px; border-top:1px #ccc solid; border-bottom:1px #fff solid; margin-bottom:20px}
.CommentContent {}
.CommentLink {}
.CommentNoComment {border-bottom:1px #fff solid; border-top:1px #fff solid; margin:0px 0px 15px 0px}
/* --- End MicroBlog --- */

Jquery

Copy this jQuery into your custom master or into a referenced JS file

$(document).ready(function() {
$(function() {
// Remove autofocus
$("textarea[title='Content']").blur();
// Set defaulttext
var defaultText = 'What are you working on?';
$("textarea[title='Content']")  
// Handle blur effect  
.val(defaultText)
.focus(function() {
if ( this.value == defaultText ) this.value = ''
})
.blur(function() {
if ( !$.trim( this.value ) ) this.value = defaultText
});});
});

Image Paths

If you not have activated the user profiles and my site, you have to change the image path in the MicroBlog file. You can create an image library in the root site and store the user images there if you want. Just name the images same as the Users ID. The path can looks like:

<img src=”/RootImages/{@Author.id}.jpg” alt=”” width=”50″ height=”50″ />

Ready to test

Finally it’s time to try this out, open your browser and to to the MicroBlog page

Behind the scenes

Some notes if you needs to change something

  • You have to reference the latest jQuery file in your custom master page
  • Save the two web parts into the web part gallery, or export them as files and you can use them at any page in the site collection, not only at the root site.
  • I have set a RowLimit variable to 5 In MicroBlog.aspx, change this as you prefer.
  • I changed the variable that Joins the list to get rid of the unwanted characters
    <xsl:variable name=”Rows” select=”../../../ListComments/Rows/Row[substring-before(@PostsID., ‘;#’) = normalize-space($dvt_ParentRow/@ID)]”/>
  • The link ‘Reply’ sends the current posts ID as a query string over to the next page (the dialogue). I have used a bit jQuery go get this ID from the URL in order to prepopulate a hidden drop down (the lookup column), and as you may know if there are 20 or more items in a list and you use lookup to this list, the select drop down will be converted to an input drop down and this needs to be solved as well.
  • In the dialog I used a SharePoint:SaveButton as I think is an easy way to close a dialog when click the save button.

The jQuery used in the MicroBlogForm that sets the Post ID into the hidden dropdown.

$(document).ready(function() {
var loc = window.location.href.substr(window.location.href.lastIndexOf("/")).replace('/MicroBlogForm.aspx?CID=', '').replace('&IsDlg=1', ''); 
var HiddenInput = $("input[title='PostsID']").attr("optHid");$("select[title='PostsID']").val(loc);	
$("input[title='PostsID']").val(loc);	
$("input[id='" + HiddenInput +"']").attr("value",(loc))
$('input[title="Title"]').val(loc); 
$(".FormFieldShow > span > textarea").focus(); 
});

More to do

If someone’s profile picture should be broken or missing, you can use jQuery to replace a broken image with an shadow image:

$(window).bind('load', function() { 
$('img.resizeme').each(function() { 
    if((typeof this.naturalWidth != "undefined" && 
        this.naturalWidth == 0 )  
        || this.readyState == 'uninitialized' ) { 
        $(this).attr('src', '/_layouts/images/O14_person_placeHolder_32.png'); 
    } 
}); 
})

Enjoy, and drop a comment if you have something to ask
/ Christian