Google

28 August 2014

SharePoint 2013 Minimal Download Strategy and JavaScript

SharePoint logoToday I welcome our Lead Developer Jayant Rimza to the blog. He is often researching how to solve different problems that occur during the development process, and here he will share his solution to a common issue in development for SharePoint. The article is primarily intended for other developers: Jayant Rimza photo

SharePoint is growing rapidly, and Microsoft is putting lots of effort in making it faster, better and more user friendly. Minimal Download Strategy (MDS) and Client-Side Rendering (CSR) are big steps to achieve these goals.

Minimal Download Strategy (MDS) reduces data download on each page. When a user requests a page, only the changes are downloaded and not the whole page. It seems that SharePoint is soon going to be a single page application where all your content will load on a single master page.

You can identify MDS by these ugly looking URLs in SharePoint: "https://test684.sharepoint.com/_layouts/15/start.aspx#/Lists/TimeCard_Jayant%20Rimza/DispForm.aspx?ID=12&Source=https%3A%2F%2Ftest684%2Esharepoint%2Ecom%2FLists%2FTimeCard%5FJayant%2520Rimza%2Fcalendar%2Easpx”.

It is possible to enable and disable MDS in SharePoint 2013. For more information on MDS and how to enable and disable it, refer to http://msdn.microsoft.com/en-us/library/office/dn456544(v=office.15).aspx.

Problems in JavaScript
JavaScript logo In SharePoint 2013 I have faced various problems with my old JavaScript code, that was running fine in SharePoint 2010. When MDS is enabled in SharePoint 2013, you will get errors like "object undefined", page load event code is not working etc. This is because the whole page is not loaded but only the required part, so page load events do not occur.

Garbage Collector
The major feature of MDS is that it also works as Garbage Collector for JavaScript. It removes all global “var” definitions from JavaScript, and you get an error: “Object undefined”. It also removes the definition of “var” like this:

var myobject = {
           Version:”1.0.1”,
           Isdebug:false,
          Getname: function(){

}
};

The good thing is that MDS keeps all JavaScript functions. You will also notice that if you refresh the page all these errors will go away, because a page refresh is a full page load when everything is loaded.

Common solution
There are many suggestions available when you search on the internet, and most of them say you should use the “RegisterModuleInit” SharePoint function to register your module to load in MDS case. I hope it will help you, but I am not sure it does. It also requires condition and check if MDS is enabled or not.
http://sharepointannoyances.wordpress.com/2014/04/09/loading-javascript-via-customaction-and-initializing-functions-with-sharepoint-2013s-minimal-download-strategy/.

My solutions
 I would suggest to instead create a universal code that will work on both cases, whether MDS is enabled or not. To take advantage of the fact that the SharePoint MDS does not remove functions but only clears variables, you can create self-executing functions or JQuery like a library. Here are two solutions for global JavaScipt object replacement:

  • JQuery Like JS Library
    This is a good way of writing your own JavaScipt files for shared and global code. JQuery like a library or self-executing functions are always loaded, and SharePoint will not give an “undefined” error. This method is good for big SharePoint applications and many JS files. From this example you can understand how to create such a library.

    (function () {
        // K returns new Library object
        var K = function () {
            return new Library();
        };
        var Library = function () {
            this.version = '1.0.1';
            return this;
        };
        // Extend the Library object.
        K.fn = Library.prototype =
        {
            kSPErrorMode: {
                _errorStatus: false,
                get_ErrorStatus: function () {
                    return this._errorStatus;
                },
                set_ErrorStatus: function (status) {
                    this._errorStatus = status;
                    //return this._errorStatus;
                }
            }
        };
        if (!window.K) {
            window.K = K;
        }
    })();

    To access object code like this: K().set_ErrorStatus(true);

    Now everything in your code is within a function. MDS will not remove things from your JavaScript, and your code will work well with both MDS enabled and MDS disabled sites.

  • Create Object when needed.
    You can create a function that returns an object of properties and a new object when you need it or new it when the object is undefined. This is good for simple or small applications.

    var Person = function () {
        var myObj = {};
        myObj. Name = "";
        myObj.Email = “”;
        myObj.IsAdmin = false;
        return myObj;
    };

    var objPerson = new Person ();

    You can define objPerson globally and when accessing it, just checkif it is undefined or not.  If undefined, then create object:
    if (typeof (objPerson) === "undefined") {
            objPerson = new Person();
        }
  • Take one more step and create a Closures function that will handle both check for object undefined and create objects. By the closures function you can write a whole logic of object undefined check and initialization in it and access properties:

    function MYBigObject() {   
       if (typeof (objPerson) === "undefined") {
           objPerson = new Person();
        }   
        return {
          MYPerson: function () {
                return objPerson;
            }
        };
    };

    To access person object: 
    Var PersonaName = MYBigObject().MYPerson().Name;
    Like Person you can create many objects and make the return type in MyBigObject function.

Summary
Minimal Download Strategy (MDS) only loads changed content.
Minimal Download Strategy (MDS) works as a JavaScript Garbage Collector and removes all global vars.
To solve this issue, use the SharePoint “RegisterModuleInit” function, create a JavaScript like library or use create object instead of direct var.

This article has also been published in the kalmstrom.com Tips section.
Jayant Rimza
Lead Developer
kalmstrom.com Business Solutions

26 August 2014

Manipulate The SharePoint Navigation

SharePoint logoIn my tutorial series on SharePoint Links I have now published the fourth article and demo. Here I describe various ways to manipulate the links in the SharePoint navigation areas Top Bar and Quick Launch.

SharePoint Server Publishing Infrastructure
How much you can customize your SharePoint navigation depends on a SharePoint feature called SharePoint Server Publishing Infrastructure. It is present in all SharePoint licenses except the Foundation versions, but even if it is there, SharePoint Site collection features it has to be enabled for each site collection.

If you have a license with the Publishing Infrastructure and it is enabled, you will get more customization options. But also without them, there are some possibilities to make changes in the SharePoint navigation. In the kalmstrom.com Tips article on how to manipulate the SharePoint navigation you can find a list of the options I show.

Manipulation and kalmstrom.com Solutions
When you are using a kalmstrom.com SharePoint Solution we recommend you to not manipulate the Quick Launch on the users interface of that product. It is possible, but in general it is better to have several SharePoint subsites instead of cramping many different things in one page.Kanban Task Manager for SharePoint logotype

The Top Bar is often a global navigation for the whole site collection, and you can manipulate it as you like when you use a kalmstrom.com SharePoint Solution. It is convenient to be able to reach all other sites in the collection from the Top Bar in your Kanban Task Manager or TimeCard page. TimeCard logotype

Top Bar dropdowns
Even if I recommend the use of subsites, I am aware of the drawback: when you have many sites in a site collection there will be a long row of links in the Top Bar. This can be avoided if you have the Publishing Infrastructure. Then you may use dropdowns for the Top Bar navigation. They are not difficult to create, and in the end of the demo below I show how to do it.

All the SharePoint Links tutorials are gathered under their own heading in the table of contents of the kalmstrom.com Tips section. You can find many other articles there too, on SharePoint as well as on other platforms. You are very welcome to browse!

Peter Kalmstrom
CEO and Systems Designer
kalmstrom.com Business Solutions

21 August 2014

Resource Booking in SharePoint - First Glimpse Of New Solution

Shahnawaz Khan imageMaybe you read the blog post about our new Senior Developer a few weeks ago and got interested in the new SharePoint solution for corporate resource booking he is working with? Today Shahnawaz Khan is back to tell you more about Calendar Browser for SharePoint:

Microsoft favors SharePoint

SharePoint was first launched as an intranet for content and document management. Today Microsoft has added a lot of other possibilities to SharePoint, and the platform has become the most important for corporate collaboration.

The kalmstrom.com team makes intense use of SharePoint, so it is logical that we also increase the development of new solutions that make SharePoint do more.
Resources in SharePoint calendars
The SharePoint version of Calendar Browser builds on the same idea as the Outlook version: each resource has its own calendar, and users book a resource by making an appointment/creating an event in its calendar. Most people already know how to manage a calendar, so Calendar Browser is very easy to learn.
Calendar Browser for SharePoint buttons
The Calendar Browser features Search and Resource Decriptions, make the booking even easier, as they help users to quickly understand what resources are free at any given time and which of them will be most suitable for each occasion.

Booking system in the cloud
kalmstrom.com cloudThe main advantage of the Calendar Browser SharePoint version compared to the Outlook version, is that you can reach it via the internet. This is becoming increasingly important. More and more people work in the cloud, and Microsoft is favoring their cloud platforms strongly – just like kalmstrom.com does!

Where ever you are, when you need to book one of your organization's resources – a room, a car, a lecturer or anything else you can think of – just log into your team site, go to the Calendar Browser page and make your booking.

Calendar Browser for SharePoint page
Calendar Browser for SharePoint logotypeWe still have to wait a couple of months left before the new solution can be released, but we already have a web page with a presentation of the new kalmstrom.com resource booking solution for SharePoint.

This page will be continuously updated as the development proceeds, and new pages will be added. Therefore, please visit it often if you are interested in Calendar Browser for SharePoint.

Challenging development
My task to lead the development of Calendar Browser for SharePoint is very interesting, but it is not a simple one. Innovative development is never easy and always full of challenges, and that is just how I want my work to be.

There are many problems to solve and new methods to figure out, and I often have stimulating discussions with my colleagues. Their input is invaluable to me, and together we will create a great SharePoint solution!
Shahnawaz Khan
Senior Developer
kalmstrom.com Business Solutions

18 August 2014

SharePoint Image Links

SharePoint logo In the third Tips article about SharePoint links I am describing how to upload an image to SharePoint and make it a button link. Any images can be used as SharePoint links, but I preferred to show how to create a new image in PowerPoint.

Text or image links?
A SharePoint page with a number of text links will look rather boring, and it might also take a few seconds to find the link you need. When you let each link be represented by an image, users will often find the right link quicker than if they have to read text. Images need more space, but that disadvantage is not always important.

PowerPoint image
PowerPoint iconYou can upload any image to SharePoint and transform it into a button by adding a link. If you don't have a suitable image, it is easy to create one in PowerPoint. Once you are satisfied with the image, save it as a picture and upload it to the SharePoint site.

At uploading the image will be saved in the Site Asset library of the site you are using. It will also be inserted on the SharePoint page you are editing, at the spot where you have placed the mouse cursor.

Link from SharePoint or Address
The image link can be inserted in two ways. In the demo I copy the path from an address, and this method can be used for all kinds of links.

When you want to link to another place in the same site collection, you may also use the "from Sharepoint" option and select the SharePoint item you want to link to.



Tips articles
All kalmstrom.com tutorials on SharePoint and other Microsoft platforms are gathered in the Tips section of our website, and the SharePoint links articles have a common entry in the table of contents.

In the Tips article about SharePoint image links you can find two step by step descriptions: how to create an image button in PowerPoint, and how to upload an image to SharePoint and link it.

Peter Kalmstrom
CEO and Systems Designer
kalmstrom.com Business Solutions




14 August 2014

Outlook Resource Descriptions For Correct Bookings

Calendar Browser logo When you want to reserve a room, a car or some other resource, a description makes it easier to decide what resource to book. With the kalmstrom.com Outlook add-on Calendar Browser, you can create or link to such descriptions and help users to book the resource that is right for them.

Book resources in the Outlook calendar
In Calendar Browser you have a separate calendar for each of your company’s resources, and you can book the a resource by making an appointment in the desired calendar on the required date and time.

Describe resources
One of the advantages of Calendar Browser is that you can create elaborate descriptions of each resource. By adding images, links and text to the resource descriptions, you can make it easy for users to decide what resource will be best for them at each booking.
Calendar Browser settings, calendar tab

URL or HTML
In the Calendar Browser settings, the resource descriptions may be added in two ways:
  • URL: Specify the path to an existing description.
  • HTML: There are two ways to describe resource calendars using HTML.
    • HTML Editor: In the Calendar Browser HTML editor you can enter the content without worrying about HTML syntax. The editor has buttons for things like inserting images and formatting text, so it is easy to use even for a person who is not familiar with HTML coding.
    • HTML Code: When you are well-acquainted with HTML code, you can either write the code directly in the HTML editor or paste existing HTML code into it.
See descriptions
When you want to see the description of a particular resource, select the calendar of that resource and click on the Description button in the Calendar Browser ribbon group in Outlook. Whatever you have added to the resource calendar description will be displayed in a new window.
Calendar Browser resource description in Outlook
For more information, please watch the Calendar Browser Descriptions demonstration below and read about Calendar Browser on kalmstrom.com.


Peter Kalmstrom
CEO and Systems Designer
kalmstrom.com Business Solutions

12 August 2014

SharePoint Links To Network Share

SharePoint logoSometimes you want SharePoint user to be able to reach files and folders in a network share or in a local file system without uploading them to SharePoint. In those cases it is convenient with a link to the folder or file directly in SharePoint. Such a link can be added, but you need to use some tricks to get it to work.

In the second video demonstration in my series on SharePoint links, I am showing how to link from SharePoint to a folder or file in a file system.
SharePoint Insert link button

UNC path
When linking from SharePoint to a folder or file in a file system, you cannot use the path you find in the Documents address field, for example D:\Tips\SharePointLinks. The file system needs to be shared with the SharePoint site, and for folders you can find the network path under Properties. This is the path to use.

File + slash
Another trick comes when you insert the network path in SharePoint, because it cannot be used as it is. You have to add "file://" in front of the actual path. This is to indicate to the web browser that it is a link to the file system, and it is used for both folders and files.
Insert Hyperlink dialog
Create shortcut
When you link to a file you cannot find the whole UNC path in the file properties. You may of course add the file name to the location path, but it is quicker to create a shortcut and then copy the full path from the shortcut properties.

I show how to do in the demo below, and in the kalmstrom.com Tips article about linking to a file system you can find step by step descriptions for inserting SharePoint links to folders as well as to files.


By Peter Kalmstrom
CEO and Systems Designer
kalmstrom.com Business Solutions

07 August 2014

SharePoint Resource Booking Solution By New Senior Developer

Today I am happy to lend this space to our new senior developer, Shahnawaz Khan. With his inventiveness and problem solving skills he has already proved to be a valuable member of the kalmstrom.com team. You will all see what he can achieve when we release Calendar Browser for SharePoint. Welcome, Shahnawaz!

Shahnawaz Khan photo I want to thank our CEO Peter Kalmstrom for giving me this opportunity to introduce myself. I also want to thank Jayant Rimza, the kalmstrom.com Lead Developer. He knows my potential, and that is why I am now a part of the kalmstrom.com team.

IT Professional studies
My father wanted me to become a doctor, as he himself has been a medical practitioner in my home town Ujjain for about 30 years and still is doing good. But I had something different in mind: I wanted to become an IT professional.

I have a Master of Computer Application exam from the RAI University in New Delhi and a NIIT certification in web applications. At NIIT I learnt HTML, CSS, JavaScript, Java, C-Sharp, SQL Server and the Microsoft Office suite. Because of my quick learning skills, I got my first opportunity to work as a software engineer as early as in 2006, while I was still a student.

Freelance and employed
After my MCA exam in 2008 I moved to Indore and started freelancing for various Indian companies. This helped me to better understand what clients want and how to finish a project after starting it from scratch. In early 2011 I took a full time job in an Indore based company.

Joining kalmstrom.com
I joined the kalmstrom.com team as a Senior Software Developer two months ago. I am very happy with the office ambience, and I like that I am given the freedom to plan my work as I find best.

TimeCard
TimeCard for SharePoint logotypeAt kalmstrom.com I have assisted in the development of the new TimeCard version, TimeCard for SharePoint. TimeCard is our time reporting solution, and there is already a workgroup and a single version for the Outlook calendar. We hope to soon release the new SharePoint version.

Calendar Browser
Calendar Browser for SharePoint logotypeI also have my own project: I am responsible for the development of a SharePoint version of our resource booking solution Calendar Browser, which will be released later this year. I am grateful for this opportunity to cooperate with, and learn from, a SharePoint expert like Peter Kalmstrom.

Close family
I have a small but big-hearted family that encourages me to pursue whatever I want in my life. My mother is a house-wife, and she has always been there for me, my younger brother and my elder sister. They are both happily married now, and I have three nephews with whom I spend my weekends.

Engagement
I am likely to get married soon. My fiancé, Shehnaz, is currently pursuing a fashion designing course in Ujjain. The photo below is from our engagement. The man in the white shirt is my father, and behind us are my brother and sister-in-law and two of the nephews.
Engagement photo
Sports fan
I am very interested in watching sports like Formula 1 racing, football, tennis, snooker and cricket, and I love to drive my bike when it's raining. At college I played football and cricket.

Confidence
Learning new things and stay updated in my field is one of my passions and something that I do on a daily basis. I always enjoy accepting new challenges and getting them done within a timeframe. I tend to do things with great confidence, and that helps me achieve my target without any barriers. I think I can do anything – almost!

I am looking forward to pursue my career at kalmstrom.com Business Solutions for a long time. It will help me achieve greater heights in my career and learn new things, because our CEO is always keen on doing things in a different and innovative way with emerging technologies.

Shahnawaz Khan
Senior Software Developer
kalmstrom.com Business Solutions

05 August 2014

SharePoint Links Tutorials On kalmstrom.com

SharePoint logoSharePoint would not work without hyperlinks, and you can get much more out of the platform if you know what linking possibilities SharePoint gives. I am therefore recording a series of demos on SharePoint links, and you can see the first one below.

SharePoint Tips
The kalmstrom.com Tips section was created as a service to subscribers of the kalmstrom.com Solutions, which are built to enhance Office and/or SharePoint. As the number of articles has grown, this section of our website has become popular also outside our subscriber Community.

Most often I do the recording myself, and then other members of the kalmstrom.com team help me edit the demos and write Tips articles about them. A Tips article usually contains a step by step instruction, while the blog post I write about my demo is more of reasoning around the subject. My intention is that the article and the post should complement each other.
SharePoint Quick Launch link and URL
SharePoint Links Intro
In the introduction to the SharePoint Links tutorials I talk about he importance of hyperlinks, also called links, URLs, web addresses and anchors in SharePoint and other web-based systems. I use SharePoint 2013 in the demo, but most of what I show is applicable to SharePoint 2010 too. Below is the demo, and you can find more info in the kalmstrom.com Tips article about the SharePoint Links series.


Future SharePoint Link Tips
So far we are planning the following tutorials in the SharePoint link series:

SharePoint Folder/File Links: How to create a link that points to a folder or a file in a file system.

SharePoint Image Links: How to link an image. I also show how to create a nice-looking button image in PowerPoint.

SharePoint Navigation Links: How to manipulate the navigation links in the Quick Launch/Current Navigation and the Top Link Bar/Global Navigation.

SharePoint WikiLinks: How to use the Wiki-functionality in SharePoint 2013 (and 2010) to create links within a SharePoint team site. I show linking to existing pages, new pages, lists, libraries and items.

SharePoint HTML Map: How to make an image with clickable regions. This type of image is called HTML map or hotspots image, and in my example I use it as a site map. I create the HTML map in SharePoint Designer 2010 and insert the result in a SharePoint 2013 site page.

My contacts with customers, visitors, followers and participants in my SharePoint courses continuously inspire me to new tutorials, so more SharePoint links related demos may follow. They will all be gathered under a SharePoint Links entry in the table of contents of the kalmstrom.com Tips section.

Peter Kalmstrom
CEO and Systems Designer
kalmstrom.com Business Solutions