October 2, 2012

Paging with JSOM

If there are many list items you try retrieve with javascript object model,paging could be very useful. Today I came across a wonderful blog post series about javascript object model in SharePoint: The SharePoint javascript object model - Resources and Real World Examples posted by David Mann and published on Aptilon Blog. There is an example how to achieve paging with JSOM. The key is items.get_listItemCollectionPosition() and query.set_listItemCollectionPosition() I have refactored David’s example to avoid global variables and to put into a module. Here is it. If you have a Tasks list in your site with many items, just hit F12 to open the console and paste this and see the result:

September 30, 2012

Simplify js and css development with Web Essentials (Visual Studio Extension)

If you develop much javascript and css, this is the exension to Visual Studio you just can’t live without: Web Essentials (It is even released for VS2012). You can do many things with it. Here are two examples for simple but very useful functions: 1. Show which browsers support a css attribute: 2. Collapse javascript functions and create #region areas like in C# code: There is much more, like less and coffeescript parsing. Just check the documentation. And it is fully appliable in SharePoint development.

September 27, 2012

Toastr.js and SharePoint

Have you used SharePoint javascript Notifications (SP.UI.Notify)? Are you looking for something new and fresh? Well then check out the Toastr.js - a simple, beautiful, fully responsive and light-weight javascript lib for notifications, developed by John Papa and Hans Fjällemark and released under the MIT License. By the way, toastr was one of many things I discovered and learned on John Papa’s online course by pluralsight: Single Page Apps with HTML5, Web API, Knockout and jQuery. It is a really awesome course, where you learn how to create an amazing SPA. Well, how’s about SharePoint. While whatching the course videos about toastr, I thought: Can we use it in SharePoint? Yes we can! Just load the toastr css and js and start using it:

September 26, 2012

Multiple events listeners in jQuery

Maybe it is not so often we face this situation where we one event handler for different events in javascript. But in my project I use many custom events and in some situations it is the same handler which listens to different events. What I found you can define multiple event listeners at the same time.

function myClick() { console.log("tada"); }
$(".selector").on({
  "click mouseover": myClick
});

September 24, 2012

JSOM: Alter a column's ShowInDisplayForm property

When you create a content type, you can define if your fields will be shown in DisplayForm, EditForm, NewForm. You can hide or show them, just as Yaroslav Pentsarsky says. If your list is already provisioned, you can change them with Server Object Model, why not in PowerShell: Technet: Setting ShowInDisplayForm, ShowInEditForm, ShowInNewForm properties with powershell. If you don’t have access to the server, then the same can be done with JSOM. Here is the code:

September 24, 2012

JSOM: Last Modified Date of a List

The data transfer between server and client can heavily affect the performance. One of the measures to reduce the amount data transferred from the server to the client is storing data on the client. In many modern browsers we can use html5 localStorage. Even in older browsers there are ways to store data. I would recommend a nice js lib called amplify.js. The interface is much easier, then:

amplify.store("key", { title: "value" });
```It comes in nicely, if we have much data which we get with JSOM. But we have to care about eventual changes to list items done after we got them the last time. So we have to store the [last modified date](http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.splist.lastitemmodifieddate.aspx). This property is also available in JSOM:

var ctx = SP.ClientContext.get_current(); var web = ctx.get_web(); var lists = web.get_lists(); var list = lists.getByTitle(“Tasks”); ctx.load(list, “LastItemModifiedDate”); ctx.executeQueryAsync( function() { var lastmodified = list.get_lastItemModifiedDate(); }, function() {} );

September 20, 2012

The original Visual Web Part template is missing in Visual Studio 2012

Today I encountered a weird issue, the classic Visual Web Part template was gone in Visual Studio 2012. When I created a Visual WebPart, a webpart was created with a generated .g.cs file, like the sandboxed visual webparts. I am not exactly sure why it happened. According to the MSDN guide Creating Web Parts for SharePoint, the structure of Visual Webparts should be the same as in Visual Studio 2010. It could have happened after I installed the power tools. However, if someone runs into the same issue, here is the solution: Copy this zip file from a computer with VS2010 installed:

September 18, 2012

The right URL regardless AAM zone

For a while ago my colleague gave me a nice tip of getting the right absolute url regardless sharepoint zone in Alternate Access Mappings. I want to share it, because it is brilliant:

var url = SPUtility.AlternateServerUrlFromHttpRequestUrl(new Uri(value)).AbsoluteUri;

September 5, 2012

Windows 8: shutdown button on your start and desktop

If you think that “Go to corner” -> Settings -> Power -> Shut down are three steps to much if you just want to shutdown your Windows 8 machine, than do as I did: create a shortcut on you desktop and a tile on your start screen. Create a shortcut as usual: Write in the location field:

shutdown /s /t 0

Name it something, why not “shutdown”? Change the default icon: There it is. Now we can pin it to Start: Done. Now, if you want to shutdown, you have to click only once: Enjoy!

August 15, 2012

Using SharePoint tooltips

I found a great post about using sharepoint tooltips on Andrey Markeev’s (@amarkeev, omlin) blog: JavaScript ToolTip’ы для SharePoint. He describes how he found the standard sharepoint tooltips and how they can be reused. The best part of it his “research”. Andrey’s conclusion is to create an own, simplified javascript class which enables “sharepoint” tooltips. I modified it somewhat. I think there is no need to instantiate a TooltipManager…

var Takana = window.Takana || {};
Takana.ToolTipManager = function () {

    var \_divId = "my\_tooltip";
    var \_innerDivId = "my\_tooltip\_inner";

    function createTitleAndDescriptionHtml(title, description) {
        return String.format(
            '<div>{0}</div><div>{1}</div>',
            title,
            description);
    }

    function showTooltip(element, rawHtml) {

        var tooltipDiv = $get(\_divId);
        if (tooltipDiv == null)
            tooltipDiv = createTooltip();

        $get(\_innerDivId).innerHTML = rawHtml;

        displayTooltipNextToElement(tooltipDiv, element);
    }

    function displayTooltipNextToElement(tooltipDiv, element) {

        tooltipDiv.style.display = '';
        var loc = Sys.UI.DomElement.getLocation(element);
        tooltipDiv.style.left = loc.x + 'px';
        tooltipDiv.style.top = loc.y + element.offsetHeight + 2 + 'px';

        if (tooltipDiv.curTimeout != null)
            clearTimeout(tooltipDiv.curTimeout);
    }

    function createTooltip() {
        var mainDiv = document.createElement('span')
        mainDiv.id = \_divId;
        mainDiv.className = 'ms-cui-tooltip';
        mainDiv.style.width = 'auto';
        mainDiv.style.position = 'absolute';

        var bodyDiv = document.createElement('div');
        bodyDiv.className = 'ms-cui-tooltip-body';
        bodyDiv.style.width = 'auto';

        var innerDiv = document.createElement('div');
        innerDiv.id = \_innerDivId;
        innerDiv.className = 'ms-cui-tooltip-glow';
        innerDiv.style.width = 'auto';

        bodyDiv.appendChild(innerDiv);

        mainDiv.appendChild(bodyDiv);

        document.body.appendChild(mainDiv);

        return mainDiv;
    }
    function hideDiv() {
        $get(\_divId).style.display = 'none';
    }

    var manager = {};
    manager.attachToolTip = function (element, title, description) {
        $addHandler(element, 'mouseover', function (e) { 
            showTooltip(element, createTitleAndDescriptionHtml(title, description)); 
        });
        $addHandler(element, 'mouseout', hideDiv);
    }

    manager.attachToolTipRaw = function (element, rawHtml) {
        $addHandler(element, 'mouseover', function (e) { 
            showTooltip(element, rawHtml); 
        });
        $addHandler(element, 'mouseout', hideDiv);
    }
    return manager;
}();

Now a manager is created on a page per default. To add a tooltip, just use the TooltipManager: