CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: js

Export Any Web Part using a Bookmarklet

My blog post about exporting any webpart from a SharePoint Page is one of the most read articles on my blog. I use this method a lot. Now what I want to do is to simplify the process. Inspired by my colleague Dan Saedén’s awesome bookmarklet for reading and updating web properties, I decided to make my own bookmarklet. That was easy. Now we can export any web part from any SharePoint page without even looking at any ids in the html markup and assembling the export url manually. Just add the bookmarklet or run  the javascript code in the browser console. The code (js and bookmarklet) is on Github.

Here is an animated gif that explains how to use it:

export-webpart-002

AngularJS: sync $location.search with an input value

I have used AngularJS for a while and to me this seems to be the best MVC javascript framework.

Today I wanted to implement a search which uses an input and a hash query string like in google. The input value and url have to be synced like:

index.html#?term=something

To do this we have to inject $location into our angular control. See the Angular Guide about $location. Then we have to observe both the $scope.term (which is bound to the input value) and $location.search().

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
    </script>
    <script src="project.js"></script>
  </head>
  <body>
    <h2>Hash Search</h2>
    <div ng-controller="SearchCtrl">
        <input type="text" ng-model="term"/>
    </div>
  </body>
</html>

and javascript (project.js):

function SearchCtrl($scope, $location) {

	var termKey = "term";

	$scope.$watch(function () { return $location.search(); }, function() {
	  $scope.term = $location.search()[termKey] || "";
	});
	
	$scope.$watch('term', function(term) {
	   $location.search(termKey, term);
	});
	
}

In order to be able to listen to changes on $location.search, you have to provide an anonymous function in $watch. Thanks to Renan Tomal Fernandes’ answer on stackoverflow.

Determine if Silverlight is installed (javascript)

For a while ago I needed to provide an alternative solution when Silverlight isn’t installed. I searched  for javascript code for this and found this:

I didn’t need to determine the version of Silverlight, so I wrote a simplified js function (but it works in all browsers):

var isSilverlightInstalled = function() {    
    var installed = false;
    try {
	installed = !!navigator.plugins["Silverlight Plug-In"]
	     || !!(window.ActiveXObject &amp;&amp; new ActiveXObject('AgControl.AgControl'));
    }	
    catch (e) {}
    return installed;
};

This function first checks if a Silverlight plugin is installed in almost all web browsers except IE, then if it is not it tries to create an ActiveXObject (IE) for Silverlight. If an error occurs, the function returns false and indicates that Silverlight is not available.

Masked Inputs

Just a quick tip today. If you are looking after masked inputs like the old ASP.NET Ajax Control Toolkit MaskedEdit, you can try jQuery plugin called Masked Input from DigitalBush or even better jquery.inputmask.

javascript: developing for performance

Many words have been said about the importance of performance when working with javascript files. Here I want to summarize what developers can do to increase the performance related to javascript. I found many tips on blogs. Here comes my aggregated list of actions one can do to speed up sharepoint (and not only) sites with focus on javascript:

1. Load only sharepoint stuff you need

Use prefetch option to only load sharepoint javascript files that needed. To see the difference, just add ?prefetch=0 to your sharepoint url in the browser.

The downside of this lazy loading is that you wrap all sharepoint related javascript into ExecuteOrDelayUntilScriptLoaded otherwise you maybe invoke some of javascript objects and functions that are not loaded. So the prize of this huge performance improvement is a high awareness by a developer when and which scripts are loaded and run.

2. Load only custom stuff you need

The same lazy loading principle should be used for your scripts as well, unless your javascript code is little. If your projects have much of functionality on client side, than you can increase loading performance enormously. This post is not about details, but when you want to know more about “On Demand javascript“, take a look about SP.SOD, head.js, require.js.

3. Minify all your scripts

Minify or crunch your javascript files. There are many tools available for doing that: google closure compiler, jscrunch… But the best javascript minifying tool for SharePoint development I found is Mavention SharePoint Assets Minifier which is developed by Waldek Mastykarz and highly integrated with Visual Studio and SharePoint debug/release modes.

4. Minimize your scripts

Not only how much javascript is loading matter, but how many files as well. Like sprites in CSS, you can combine your scripts into one that you load. Just organize your scripts as they were classes (one class – one file), then use T4 to generate a composite javascript file.

5. Check your javascript for memory leaks

Thinking about memory leaks is important, and not only in SharePoint Server Side. It is important to avoid memory leaks in javascript as well. Especially when your audience uses older browsers. See this amazing post about javascript memory leaks on Ying’s blog.

This is all so far. Have I missed something, please comment.

Discovering SharePoint

And having fun doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

RealActivity - Real-time and trustworthy

Blog site of founder, RealActivty - Paul J. Swider

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points!!

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode, ya mama

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

blksthl

Mostly what I know about SharePoint - CommunicoCuspis