in

Dot Net Mafia

Group site for developer blogs dealing with (usually) .NET, SharePoint 2013, SharePoint 2010, Office 365, SharePoint Online, and other Microsoft products, as well as some discussion of general programming related concepts.

Kyle Kelin on .Net

February 2010 - Posts

  • Why Not Make Your SharePoint 2010 Menus Sortable?

    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.

    image

    image

    image

    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:

    <script type="text/javascript" src="_layouts/jquery.min.js"></script>
    <script type="text/javascript" src="_layouts/ui.core.js"></script>
    <script type="text/javascript" src="_layouts/ui.sortable.js"></script>

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

    <script type="text/javascript">
        $(document).ready(function () {
            $(".ms-cui-tts").sortable(); ;

        });
    </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

    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:

    image

    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 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:

    <script type="text/javascript" src="_layouts/jquery.min.js"></script>
    <script type="text/javascript" src="_layouts/ui.core.js"></script>
    <script type="text/javascript" src="_layouts/ui.draggable.js"></script>

    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 type="text/javascript">
        $(document).ready(function () {
            $("#draggable").draggable();

        });
    </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

    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

    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.

2012 dotnetmafia.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems