Kyle Kelin on .Net

Why Not Make Your SharePoint 2010 Menus Sortable?

2010-02-22T22:12:43Z

One big improvement in SP2010 is in the rendered markup. You will see fewer tables and more lists and div elements.When I saw this I immediately thought of what this would allow with jQuery. The Ribbon control and menus in SP2010 are rendered as unordered lists. This allows us to apply interactions to them from the jQuery UI framework. In this post I am going to walk you through an example. In the example we are going to apply the sortable interaction to the SharePoint menu. After deploying our Web Part , the user can then reorder the menu items. In the screen shots below I am moving the Browse menu item to the right of the Page menu item. Now in this example I don’t save the result so the page refresh would reset the users sorting but you could easily write some JavaScript code that saved the order to a SharePoint list.

Step 1 – Create a new Visual Web Part project in VS2010. There are already many articles on this subject so I will allow you to just go ahead and Google this if you need to.

Step 2 – Download and reference jQuery and JQuery UI.
There are a number of ways to do this. I chose to simply download the files and drop them in the layouts folder of the 14 hive. You can also directly link to them on Google. Here are my references:

Step 3 – The rest of the code in the Visual WebPart

});
</script>

This is all the code that is required! The class of the UL element that wraps the menu we are trying to make sortable is ms-cui-tts. To keep this example simple I used a Visual Web Part but it would be better to add the above JavaScript block to the master page so that all pages had the same functionality.

Add Dragging Functionality to SharePoint 2010 in Five Minutes

2010-02-22T21:26:57Z

In this post I am going to outline a quick example of using the jQuery UI framework to enable elements on your SharePoint page to be dragged around. This would probably work in SP 2007 too but I have some plans to apply this to the Ribbon control in the near future.

What we are building:

A Visual Web Part (Web Part + User control) that will contain a div element with a blue border and “Drag me around” text. The blue box can be dragged around the page by the user. Simple enough.

Step 1 – Create a new Visual Web Part project in VS2010. There are already many articles on this subject so I will allow you to just go ahead and Google this if you need to.

Step 3 – The rest of the code in the Visual WebPart
To finish off the Visual WebPart (remember that is just a user control) add this code:

});
</script>

<div class="demo">
    <div id="draggable" style="width: 150px; height: 150px; padding: 0.5em; border:1px solid blue">
        <p>Drag me around</p>
    </div>
</div>

The JavaScript function just attaches the draggable function to any elements with an id equal to “draggable” when the HTML document finishes loading. The html code is the element that we are going to allow the user to drag plus some styling.

Step 4 – Deploy
Just right click on the solution and select Deploy. Then create a page and add your new Web Part to the page.

A few final comments about this. The way I deployed the js files is bad. And you would never want to do that in a real-world scenario. Instead you would want to add those as part of the feature and wsp. And you can also create a specific jQuery UI JavaScript file that contains all the features you want in one file. Here I just copied the draggable JavaScript file to the layouts folder. Also don’t forgot to explore the jQuery UI for cool options besides the plan drag example I am using here.

PowerShell: My First Look

2010-02-19T21:15:34Z

Even before the details of SharePoint 2010 were announced I’ve been wanting to learn PowerShell. Of course now that SP2010 is relying on PowerShell almost entirely I have extra motivation to learn the tool. I thought what I would do in this post is document step by step what I did to get familiar with the tool. Readers new to PS can follow along to help them get started.

I first went to this link and downloaded the PowerShell cheat sheet here . This way as I learn commands I don’t really have to remember them.

After fixing some printer issues I read this article from James Kovacs here

The paragraph below gives you a basis for how PowerShell commands are structured:

Believe it or not, you probably already know a fair amount of PowerShell. Many of the commands you’re familiar with in cmd.exe work in PowerShell. (More surprisingly, many of the common commands you know from bash, tcsh, or other Unix shells also work!) The command line arguments are often different, but the basic familiar commands are there. So try out dir, cd, copy, del, move, pushd, popd, … (If you’re a old Unix hacker, you can try out ls, man, kill, pwd, ps, lp, cp, … Unfortunately there is no grep equivalent built in, which is terribly unfortunate.) All of these commands are actually aliases to PowerShell commands, which are named by VERB-NOUN, where NOUN is singular. For example to get a list of running processes, you run Get-Process, which is aliased to “ps”.

PowerShell is very conducive to experimentation. You can always find out more about a command or alias typing “Get-Help [CmdName|Alias]” or simply “help [CmdName|Alias]” since help is an alias for Get-Help. (N.B. PowerShell is case insensitive.) You can also look for commands by typing part of the command and pressing tab repeatedly. For example, if you want to find all set- commands, type “set-[TAB][TAB]…” to display Set-Acl, Set-Alias, etc. You can also look for commands using wildcards. Type “*-Acl[TAB][TAB]…” displays Get-Acl and Set-Acl.

After that I watched Hanselman’s PowerShell tutorial on DnrTV. After that I immediately installed PowerTab. This tool adds intellisense to PS which is a huge help. Best part is it is free.

Since my main reason for learning PowerShell was to use it with SharePoint the final step was to read this article by Corey Roth which shows you how to load up the SharePoint PowerShell commands.

My First Attempt At Using the SharePoint 2010 Client OM from WPF

2010-02-17T21:34:00Z

I took a crack at building a WPF application that interacts with a SharePoint 2010 site. I’m going to skim over how to create a WPF application since you can find that in other blog posts. After creating your WPF app you need to add two references: Microsoft.SharePoint.Client and Microsoft.SharePoint.Client.Runtime. Both assemblies are in the 14 hive of any server running SharePoint 2010.

Next add two using statements in the code behind class of the main window:

using Microsoft.SharePoint.Client;
using SP = Microsoft.SharePoint.Client;

Then in the constructor of the MainWindow (still in the code behind class) add the follow lines of code like so:

        ClientContext context;
        IEnumerable<SP.List> listsCollection;
 
        public MainWindow()
        {
            InitializeComponent();
 
            try
            {
                context = new ClientContext("http://sp2010/");
                Web site = context.Web;
                context.Load(site, osite => osite.Title);
                context.ExecuteQuery();
 
                Title = site.Title;
                ListCollection lists = site.Lists;
                listsCollection = context.LoadQuery(lists.Include(l => l.Title, l => l.Id));
                context.ExecuteQuery();
 
                ListBox1.ItemsSource = listsCollection;
                ListBox1.DisplayMemberPath = "Title";
 
            }

This code assumes that there is a ListBox named ListBox1 in your XAML of MainWindow. So you should go and create that now. The first thing the code snippet does is create a ClientContext object based on the URL to our SP site. The next line is using the Load method of the context object. The lamda expression being passed in as the second parameter allows us to only load that property. So we are getting the site but only loading the title property. It is also important to note that the Load method doesn’t execute until we call the ExecuteQuery. Both of these methods were written this way to improve performance by cutting down on either database calls or payload sizes.

The next 3 lines follow a similar pattern of setup then execute. This code uses the site name to retrieve all the lists for that site. Again we only the title and id to reduce the amount of data coming from the server. And again we call ExecuteQuery, failing to do so would result in listsCollection being null.

The final two lines simple bind our list collection to the ListBox so we can display the titles of the lists.

The next thing I wanted to do was to try out updating a list. So add a textbox and button to your window. Add an event handler to the button like so:

private void button1_Click(object sender, RoutedEventArgs e)

{

var list = (SP.List)ListBox1.SelectedItem;

list.Title = textBox1.Text;

list.Update();

context.ExecuteQuery();

}

Again same pattern of setup and then execute. I grab the item that is selected in the ListBox and cast it. Be sure you are casting it to the client List object and not the SPList object. As our requirements grow we could simply set more properties or add columns just like we did in SharePoint 2007. Then we call ExecuteQuery to execute the changes. Note: do not forgot to call list.Update before the ExecuteQuery. If you don’t the code will execute without error but the list title would not get updated.

Side Note:

This is my first blog post where I used Visual Studio 2010. In doing so I needed to install CopyAsHtml so I could paste my code in this post properly. I had forgotten about a previous post that Corey Roth had written about getting this add-in to work in VS 2010. Click Here.

Some other UI Hooks in SharePoint 2010

2009-11-11T03:57:25Z

In my last post I wrote about the Ribbon Control. In this post I’m going to review three new UI features in SP 2010 that SharePoint itself uses but you as a developer can leverage in your own applications.

Status Bar

The status bar is for persistent information like page status or version. It will show just below the ribbon control and you can select 4 different background colors. The javascript api is pretty simple:

SP.UI.Notify.addNotification(strHtml, bSticky, tooltip, onclickHandler)

SP.UI.Notify.removeNotification(id)

Notification Bar

The Notification bar is less intrusive then the status bar and used for more transient information. By default each message remains on the screen for five minutes. Let’s look at some javascript to add and remove these notifications:

SP.UI.Status.addStatus(strTitle, strHtml, atBeginning)

SP.UI.Status.updateStatus(sid, strHtml)

SP.UI.Status.removeStatus(sid)

SP.UI.Status.removeAllStatus(hide)

SP.UI.Status.setStatusPriColor(sid, strColor)

Dialog Platform

One of the first things you will notice about SP 2010 is the effort the development team has put forth to reduce the number of page refreshes. One way to do that is to make use of Modal Dialog boxes. Just create a new list item and you will see exactly what I am talking about. You can make use of this Modal Framework using the javascript API. You will pass in another webpage or a DOM element. For example:

function myCallback(dialogResult, returnValue) {alert(“Hello World!”);}

var options = {url: “/_layouts/somepage.aspx”, width: 500, dialogReturnValueCallback:myCallback};

SP.UI.ModalDialog.showModalDialog(options);

I obtained the information in this post from Elisabeth Olson’s UI Presentation at the SharePoint 2009 Conference.

Customizing the Ribbon Control in SharePoint 2010

2009-11-11T03:56:47Z

The first time I saw the html source of a page with the Ribbon control my mouth started to water thinking about all the possibilities. First the ribbon is rendered as an html list. No tables. So tweaking the styling of this is super easy. Also I have implemented some drag and drop functionality using jQuery and jQuery UI and the most common html I worked with was a html list. Most of the things going through my mind right now are just cool visual effects in that area but having that much control is going to allow for some pretty cool functionality with the ribbon.

Besides jQuery and Javascript there is a built-in way to add elements to the Ribbon control. You simply create a feature and a RibbonButton.xml file. Since I haven’t had too much time with the Beta take a look at this post for more details:

http://blogs.msdn.com/jfrost/archive/2009/11/06/adding-custom-button-to-the-sharepoint-2010-ribbon.aspx

I obtained the information in this post from Elisabeth Olson’s UI Presentation at the SharePoint 2009 Conference.

Speaking at TNUG tonight

2009-10-26T21:04:27Z

I’m giving a quick presentation over Telerik at the Tulsa .NET User’s Group meeting tonight. I go on at 6:45pm, pizza starts at 6pm.

TCC (Tulsa Community College) Northeast Campus
3727 East Apache
Tulsa, OK 74115
918-594-8000
Campus Map | Live | Yahoo | Google | MapQuest
We meet in the Main Academic/Administration Building, Seminar Center, Room 109.

Why You Should Care About SharePoint 2010

2009-10-26T02:13:03Z

I spent last week at the SharePoint 2009 Conference learning about the new features in SharePoint 2010. I must say that I am pretty impressed. The product has dramatically improved especially for developers. There are tons of post already out there about specific features but I wouldn’t to write a brief post highlighting what I think the most important features are. Of course depending on what you used SharePoint 2007 for, what is most important is going to very. Since I am trying to keep this post brief I encourage you to search for each topic to gain more insight and details into each one. Note: these items aren’t in any particular order.

1. Data Access

There are now four ways to access data (3 new ones):

· Server Object Model – same as in SP 2007

· Client Object Model – this OM is used when your code isn’t running on the server. Examples Javascript, Silverlight, or a WPF app.

· REST – the lists are exposed as rest services

· Linq to SharePoint – you can use SPMetal to generate classes based on lists and then use linq queries on them. I have been waiting for this for a long time.

In 2007 to get SharePoint data into SL, WPF or Surface you had to write your own WCF service that used the SharePoint OM or ASMX. I imagine we are going to see some really cool ways to expose SharePoint data now that this is simpler.

http://msdn.microsoft.com/en-us/sharepoint/ee513151.aspx

http://msdn.microsoft.com/en-us/sharepoint/ee513152.aspx

2. Deployment is so much easier

This one feature is going to make SP developers’ lives a lot less painful. You now have F5 deployment to your local environment from inside Visual Studio. But as easy as it is, it is also very open and extensible. Plus you can run SharePoint on Windows 7 64 bit.

http://www.binarywave.com/blogs/eshupps/Presentations/From%20.NET%20to%20SharePoint%20-%20Introduction%20to%20SharePoint%20Programming%20for%20.NET%20Developers%20%5BSEF2008%5D.zip

3. New Business Connectivity Services (formerly known as BDC)

BDC was read only so I could view data from a database in SharePoint but couldn’t edit it. So now we can easily pull in SQL data expose it as lists and users get all the sorting, filtering and editing capabilities of a list. This also ties nicely into Office

http://msdn.microsoft.com/sharepoint/ee513153.aspx

4. Relationships between lists

Another feature that I have been waiting for. If you have a Customer and Orders list, you can add a lookup column on Order that points to Customers. The really cool thing is you can display as many columns from Customer as you would like. Also you can enforce referential integrity.

5. Validation

You can set validation rules using an Excel-like formula when you create columns. You no longer have to write event-receivers for this.

6. New UI improvements

They have cut out lots of page refreshes to make it faster to create and edit documents and pages. Safari and Firefox are 100% supported! I did a view source on the page and there are very little tables. Also in edit mode there is a ribbon at the top of the page which allows users quick access to those buttons needed to edit the page. The ribbon control is easily customizable. I added a new button in lab in about 10 minutes.

http://msdn.microsoft.com/sharepoint/ee513157.aspx

7. Managed Metadata Services

Completely revamped approach for meta data. There is now a central repository that will allow you to manage your taxonomies in a much more centralized way. There is a new column type called Managed Metadata which is tied to a term set. This is similar to a choice column except it is centrally managed. Let me give an example. You could have a term set called Months and the terms would be January, February etc… Months never really change but the power comes with terms sets that do and now all those columns get automatically updated. Also another cool feature is a use can type in January, Jan, or 1 and all those get stored as January.

8. SharePoint Designer

SharePoint Designer is really improved and you can export most of your work as a wsp which means those changes are portable. Huge improvement from 2007.

9. SharePoint Workspace

There is now a desktop application called SharePoint Workspace (formerly Groove) that allows users to sync with SharePoint and then work offline. Then sync those changes back the next time they go online. I haven’t used it but if it works as promised, users are going to love this.

Some part of your SQL statement is nested too deeply

2009-08-13T17:48:20Z

I received the following error last week:

Some part of your SQL statement is nested too deeply. Rewrite the query or break it up into smaller queries.

Here is a good article describing the problem: http://rapidapplicationdevelopment.blogspot.com/2007/05/caml-nested-too-deep.html

The article describes the cause of the error was trying to insert a large amount of list items in a batch query. The solution is to break up the batch into smaller chunks. However I was doing a select query. After some googling and coming up short, I copied the CAML query into a text file and took a look at it. The query was several hundred lines long. It seems that the where clause of the CAML query was being added dynamically inside a loop like this

foreach (HistoryItem distinctItem in distinctItems)
{
spQuery.Or(HistoryListColumns.Number, SPFieldTypes.Text.ToString(), distinctItem.Number);
}

This loop builds up a CAML query by adding an OR element for each item in the distinctItems collection. This worked fine until distinctItems grew to over 1,000 items making the resulting CAML query too long for SharePoint/SQL to parse it. The simple solution for me was to break distinctItems up into subLists of 200 items and create separate CAML queries for each then combine the results.

So remember if you need to dynamically build your CAML queries pay attention to the size and how big the query could possibly get.

Who the Hell Wrote This?

2009-05-28T14:00:09Z

A colleague yesterday showed me a cool tip with TFS that I would like to pass along. If you have a code file open you can right-click to the left of the code in the gutter, under the source control menu, select the Annotate option. It will open the file up in a new file and show you who wrote that line.

Creating a List from a List Template

2009-05-28T13:59:46Z

I recently struggled with this code and thought I would document it here.

SPListTemplateCollection listtempColl = web.ListTemplates;

SPListTemplate myListTemplate = listtempColl["Random List Template"];
web.Lists.Add("MyList", "my list description", myListTemplate );

Pretty simple code. I use the ListTemplate collection of the SPWeb to get a template I have already deployed. I then use that template in the Add method to create the list instead of one of the built in templates.

Post Build Actions Are Evil

2009-05-28T13:58:15Z

This post is in response to the last SharePoint project I was on. Though this wasn’t the first time I have seen this. The developer was using wsp builder and a file called PostBuildActions.bat that was executed when they built their solution. This allowed him and other developers to simply hit F5 to build the solution and deploy it locally to their SharePoint environment. The problems started when the solution grew. It was up to 19 projects when I saw it and most projects had a bat file that was copying assemblies and ascx files after building in order for the wsp builder to work. As you can imagine this was pretty complex and unmanageable. And the build times were over 5 minutes long. Build times this long really interfere with a developers flow. I would hit F5 got get a cup of coffee or minimize the vpc and surf the web. Not a very good use of my time so I decided to cut this down.

There are three solutions that you could take:

1. Create additional build modes to Debug and Release

Use Debug and Release for compile only and create a DebugDeploy and ReleaseDeploy that will then call your PostBuildActions.bat. The does speed up the process because we now can just build if we wanted. But it still to me seemed difficult for a new developer to catch on.

2. Create a manual deploy file

This is the method I chose. I removed all post build actions and copied those files into one large bat. I ended up creating two bat files, one called buildwsp.bat that copied all the files necessary assemblies and ascx files and included the wsp builder commands to create the wsp file. Next I created a file called deploy.bat that would rectract and redploy the solution package. The process was hit F5, then click buildwsp, then finally deploy. I had the two bat files on my task bar for easy use. This cut down the total deployment to about 2 minutes but it also gave me the flexibility to quickly build in just under 30 seconds.

3. Use MSBuild

I didn’t use MsBuild in this situation because I didn’t have a lot of time and I don’t know MSBuild. For my next SharePoint project though I am going to use this. I think this could give me the speed and flexibility I have been wanting. There are even some MsBuild templates for SharePoint out on CodePlex.

The .NET Framework version 4 cannot be installed because the .NET Framework version 1.0 is already installed on your computer

2009-05-21T04:05:41Z

I ran into this error message while trying to install the .NET Framework 4.0 Beta. I went into Programs to remove it and it wasn’t listed. Hmmm. So the first thing I did was download this tool:

http://www.raymond.cc/blog/archives/2008/11/06/how-to-check-what-version-of-microsoft-net-framework-is-installed-in-computer/

Run in and it will tell you which versions of the .NET Framework you had installed. Sure enough 1.0 was listed. So a quick google search brought me to this tool that removes versions of the .NET Framework.

http://cid-27e6a35d1a492af7.skydrive.live.com/self.aspx/Blog|_Tools/dotnetfx|_cleanup|_tool.zip

Just a quick note that this comes with no warranty. It worked for me but the cleanup tool is messing with the Registry so do so at your own risk.

Improving This Blog

2009-03-31T16:31:45Z

I winding down on my current project and decided to spend some time improving my blog. The first step was downloading Live Writer. Using Live Writer instead of Word should reduce the friction of posting. In theory this should make me post more frequently.

Another thing I did was sign up for Technorati which requires me to post their link here
<a href="http://technorati.com/claim/j6277u6ajx" rel="me">Technorati Profile</a>

And the final step is to clean up my online presence a little bit. I started by updating bio on this blog but will also do that on other sites like twitter, delicious, linkedin, and facebook. And see if I tie all these together while making them consistent.

Slides and Code from SharePoint Saturday

2009-03-31T15:41:00Z

I ended up doing 3 sessions this past Saturday at the Tulsa School of Dev/ SharePoint Saturday put on by David Walker. I did two end-user sessions right after lunch, Document Library Basics and Introduction to InfoPath. After those I did a session over Unit Testing SharePoint with TypeMock. The turnout for that talk was smaller than I would have liked since David put me up against a Silverlight 3.0 talk. At the bottom of the post you will find slides and code for the unit testing session. If you want the InfoPath slides or example code just email me.

DotNetMafia also had our second Beer and Code (SharePint) event. Despite the snow, we still had some people turn out and we had a good time with plenty of food and beverages. Our next event will be during Tech Fest 2009. Thanks again to TekSystems for sponsoring the event.

Technorati Tags: SharePoint 2007,SharePoint Saturday