James Callaghan

Category: Development

  • Gist extension for VS Code

    Gist is a big part of my workflow. I’ve always been on the lookout for a desktop tool. Well, it turns out I was looking in the wrong place. A few days I discovered two VS Code extensions Gist and GitHub Gist Explorer. They both really great extensions and so far I’m really enjoying having Gist at my fingertips in VS Code.

    vscode-gist-profiles
    Gist
    Screenshot
    GitHub Gist Explorer

    Once you have installed the extension you will need to grab yourself an access token for GitHub – you can get a personal access token by going to settings and then accessing Developer Settings. Make sure you just give the token access to Gists.

    GitHub Gist Explorer seems to be my favourite so far. Having the explorer available in the side pain really helps and the command bar paste and save from clipboard features are really great!

    How do I use Gist

    The majority of my use if private where I have created secret Gists. I have a number of markdown Gists which I have named Gistsmarks which I use as bookmarks to jump to a collection of Gists like boilerplates for my blog articles.

    Any code I share on my blog is shared as a Gist. This allows me to embed the code in the article with a nice editor and provides me with version control too. When I started using Gists I painstakingly went through all my posts and converted any previous code blocks into Gists. Oh, and when I reference code I use the highlighted line(s) URL which is a cool trick too.

    Highlighting code in a Gist with the URL

    I also use Gist to share code and snippets with friends and customers (when it is appropriate of course). I also have runbook like Gists to quickly reference which provide basic lines of PowerShell to perform tasks and run common commands against Microsoft Teams in Office 365 for example. I also have a markdown file for each of my demo environments where I hold information about different personas I have created, areas where I have built out certain functionality and a basic changelog.

    While I’m on the topic of VS Code extensions I think I will write another post and share my favourites VS Code extensions.

    Hopefully, you got the Gist of things! See what I did there….I’ll get my coat.

  • Event Receiver to Remove “Recent” from SP2013 Quick Launch

    Event Receiver to Remove “Recent” from SP2013 Quick Launch

    I’m sure removing the Recent heading from the Quick Launch in SharePoint 2013 has been talked about a million times over since SharePoint 2013 was launched. It’s been solved in this way and that way, by hand, with javascript and programmatically. In this post, I share the code to remove the heading with the ListAdded event receiver.

    With and without the Recent heading on the Quick Launch navigation.
    With and without the Recent heading on the Quick Launch navigation.

    Event receiver code

    It’s based on code provided as an answered on the SharePoint StackExchange website by Remko van Laarhoven. I’ve then wrapped in a list added event receiver so that it is executed each time a new list or library is added. As the list/library is then not available on the Quick Launch I’ve added a couple of lines to then show it.

    Update (22nd June 2014): since creating this solution I have since discovered that the Recent heading still is created even with the event receiver triggering when lists/libraries created from templates. I resolved this by adding a sleep before the code to remove the heading is executed.
    [code language="c"]
    System.Threading.Thread.Sleep(1500);
    This in conjunction with the jQuery method prevent users from ever seeing the Recent Heading whether they are viewing the page or editing the links on the page.
    [code language="js"]
    // Hide Recent on Quick Launch
    $("#ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager .ms-core-listMenu-root li:contains('Recent')").children().remove();
    $("#ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager .ms-core-listMenu-item:contains('Recent')").remove();
    [code language="c"]
    public class ListAddedEventReceiver : SPListEventReceiver
    {
    public override void ListAdded(SPListEventProperties properties)
    {
    base.ListAdded(properties);
    SPWeb web = properties.Web;
    if (web != null)
    {
    //Sleep
    System.Threading.Thread.Sleep(1500);

    //Remove heading
    var title = SPUtility.GetLocalizedString("$Resources:core,category_Recent", null, web.Language);
    SPNavigationNodeCollection nodes = web.Navigation.QuickLaunch;
    foreach (SPNavigationNode node in nodes)
    {
    if (node.Title.ToLower().Equals(title.ToLower()))
    {
    // Delete the recent heading node
    node.Delete();
    break;
    }
    }
    // Show list on the quick launch
    SPList list = web.Lists[properties.ListId];
    list.OnQuickLaunch = true;
    list.Update();
    }
    }
    }

    Download Remove Recent Heading Solution

    For those who don’t want to create the event receiver themselves in Visual Studio or don’t know how to, I have a packaged the solution so that you can deploy the WSP to your environment. For those who don’t know how to use this code, I will write a post explaining how to create this event receiver using Visual Studio from an IT Pros perspective very soon.

    jcallaghan.removerecentheading.wsp

    As with anything you download from the internet remember to review, rename and test this code/solution before using it in a production environment.

  • Easily add jQuery tabs using the “Reusable Content” feature

    Easily add jQuery tabs using the “Reusable Content” feature

    This post is quite a fun one. Whilst I was working with a customer today someone came up to me and asked if it was possible to add tabs to their content pages to which I gave it a few seconds thought and I responded “sure that’s absolutely possible – leave it with me!”.

    I then spent my commute home thinking about how tabs could be delivered for end-users to make use of without them having to meddle around with any code. Sure getting tabs to work in SharePoint is pretty straight forward and is something we’ve all done at least on a couple of occasions but I give more thought about making it easier for the end-users to consume rather than just meeting the customer’s requirement by putting in a solution that isn’t pretty nor easy to use.

    Solution

    I eventually decided to use, what I thought was a very simple approach to giving users the option to use tabs. My solution makes use of the tabs from the jQuery UI (http://jqueryui.com/tabs/) library. It starts with a small modification to the master page that is currently being used. The following code should be added before the closing </head> tag.

    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
    // <![CDATA[
    $(function() {
    $("#tabs").tabs();
    });
    // ]]>
    </script>

    I then added the following to the “Reusable Content” list in the root site of the Site Collection where I was adding tabs. Make sure that the “Automatic Update” is unchecked for this piece of reusable content.

    Reusable Content item
    Reusable Content item
    Reusable Content Lists
    Reusable Content Lists

    Below is the code that should be added to the Reusable HTML field.

    <div id="tabs">
    <ul>
    <li><a href="#tabs-1">Overtype tab 1 title here</a></li>
    <li><a href="#tabs-2">Overtype tab 2 title here</a></li>
    <li><a href="#tabs-3">Overtype tab 3 title here</a></li>
    </ul>
    <div id="tabs-1">Overtype tab 1 content here.</div>
    <div id="tabs-2">Overtype tab 2 content here.</div>
    <div id="tabs-3">Overtype tab 3 content here.</div>
    </div>

    To add the tabs onto a content page you can simply select the item that has just been added to “Reusable Content” list by clicking on the “Insert” tab whilst editing the page and expanding the “Resumable Content” menu.

    Reusable Content menu
    Reusable Content menu

    Rich text that represents the HTML markup for the tabs is then added onto the page. Each tab is represented by a bullet list item “<li>” and a content area “<div>”. The names of tabs you require can then be added by carefully overtyping the existing tab names. You must be careful not to introduce or remove any markup as this might prevent the tabs from working correctly.

    Once you have entered the names of the tabs you can then add the appropriate content by overtyping the content that you wish to include in that tab. This content can consist of rich text such as tables, images and also web parts. Again you must be careful not to introduce or remove any markup. Any tabs that are no longer required can be carefully removed by deleting the bullet list item and content area.

    Tabs demonstration
    Tabs demonstration

    There are other ways to achieve the same result but I thought this was a simple approach using out-of-the-box functionality. Happy tabbing!