Article 7 from 30 : What is TypeScript? Shall I use it for SharePoint 2013 Apps?

This post is article-7 from the 30 Articles App series for SharePoint.

1st Oct 2012 was the day when Microsoft has released TypeScript.

It was too tempting and I could not stop myself including it in this series ūüôā !!

What is TypeScript ?

TypeScript is a language for application-scale JavaScript development.
TypeScript is a typed super-set of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.

Why Should you use TypeScript as a Microsoft Technology Developer ? :

Many people who use Dart or CoffeScript are not convinced with the idea behind creating TypeScript and there are mix responses for TypeScript in Developer Community. It makes much more sense when you believe that TypeScript is created to help Microsoft Developer Community.

You can use Visual Studio ==> familiar tool for development.

Get the Visual Studio TypeScript Plugin from here .

You can create JS code faster, robust and more manageable finally with class :P!

Advantages over simple JavaScript :

It has classes, modules, and interfaces.

It is statically typed so will provide auto-completion for statements and point out binding errors at compile time.  ( very important feature for debugging + creating error free code )

I would never compare TypeScript with Dart and CoffeScript. It’s just not fair. But below is for those who compare ūüėČ

Advantage over Dart :

Dart is written from scratch while TypeScript is build on JS.  In short whatever you write in JS , you use it without any change in  TypeScript.

Advantage over CoffeeScript :

CoffeeScript has its own  syntax so you need to learn it while TypeScript is super-set of JS so virtually there is no learning curve.

I do quite like CoffeeScript and also see a good potential for TypeScript. TypeScript is like CoffeeScript on Steroids ūüôā .

Here is an example that for CoffeeScript you need to make sure that compiled JavaScript is actually correct .

Shall I use it for SharePoint 2013 Apps?

Of-course YES.

TypeScript can be used wherever you use JavaScript.

Remember Article-1 : There is a big NO to any server-side code for SharePoint Hosted Apps.

SharePoint hosted Apps relies on JavaScript for Cosmetics + functional Support.

SharePoint 2013 has much more improved JavaScript API which is good enough for building Apps.

I want you to explore this new product and so TypeScript will belong here in our App series..!! Do you mind??¬† of course not..!! ūüėõ

Part-3 : How to show/hide SharePoint Quick Launch for users with specific permission

In this post, I will discuss about how to hide/show Quick Launch/left navigation and related area for specific permission group.

This post is part 3 from the Quick Launch series,

part-1 : customizing quick launch to pick up 3 or more level of sub-menu items

Part-2 : How to add 3 or more level of menu items in SharePoint quick launch

Part-3 : How to show/hide SharePoint Quick Launch for users with specific permission

Let’s start with what we get with out of box functionality

For publishing site / OR team site with publishing features enabled you can choose audience targeting for links added to Quick launch ..!!

  • Go to site settings -> Look and Feel -> Navigation
  • Choose a link item and select Edit.. or Add Link ;¬†In both¬†you will find an option for targeting audience.
  • Let say you have chosen GroupA¬†and GroupB¬†in audience and save it.
  • Now users from only GroupA¬†and GroupB can able to see this link and no one else…Isn’t this great out of box functionality:)



But this is not enough for real projects !!¬† And so we will go ahead with code for little¬†more… You can do this with sharepoint¬†designer / visual studio project / or even from browser itself by dumping webpart on the page [keep in mind browser way will not make changes to master page]

If you want to show/hide or make any branding changes which are consistent throughout your site you must make the change in master pages.

1)  Hiding Quick Launch for all users

.s4-ql{ display:none !important; }

Quick launch is gone…!!

2) Getting rid of whole left navigation

#s4-leftpanel{ display:none !important; }

Left panel is gone !!

Well but you still find blank big junk white space on left side …

Do you want to get rid of it then add following as well.

.s4-ca{ margin-left:0px !important; }

3) Let’s say now you want to hide it for only specific users with some specific permission..

In sharepoint 2010 you can run/render  script/control  for specific permission access…

<Sharepoint:SPSecurityTrimmedControl runat=‚ÄĚserver‚ÄĚ Permissions=‚ÄĚManageLists‚ÄĚ>

put your stuff here that you want security trimmed

This section will only run for users with  Permissions -> ex. ManageLists here..

In our case (1)  or (2) will come here in style tag..


4) More on SPSecurityTrimmedControl :  What to choose as permissions attribute ?

  • In simple language, Permissions are roles in SharePoint
  • If user is a member of¬†that role then whatever inside SPSecurityTrimmedControl¬†will run/render.
  • You can also make your check¬†like if user is in role A or B or C then run my script or render my control.
  • To check multiple roles condition SPSecurityTrimmedControl¬† takes PermissionsString property instead of Permissions with a comma separated list of roles.

Below is the MSDN link which will give you brief idea about what are the available permission roles in SharePoint 2010.

5) Little bit about quick launch related css classes if you need to go ahead with other stuff for left navigation.

css class/id

Represent what section on SharePoint 2010

s4-notdlg Whole navigation top/left everything
#s4-leftpanel [id] Whole left navigation
S4-ql Quick Launch
s4-specialNavLinkList Special Navigation links on left side bar ex.Recycle bin, All site contents..
s4-specialNavIcon Special navigation icons..
ms-quickLaunch Covers quick launch, special nav links, tree view

SharePoint 2010 : How to add menu items at 3 or more level in quick launch -part 2

This post is part 2 from the Quick Launch series,

part-1 : customizing quick launch to pick up 3 or more level of sub-menu items

Part-2 : How to add 3 or more level of menu items in SharePoint quick launch

Part-3 : How to show/hide SharePoint Quick Launch for users with specific permission

In this post, I will discuss about how to add menu items to quick launch programmatically.

There isn’t any out of box settings that will allow you to add items to quick launch at 3rd or more levels. And so going with code solution again.

Here I am adding all views for task list at 3rd level Menu items under Tasks.


You can also get quick launch from web.Navigation.GlobalNodes and customize as per what you want.

MSDN links for Quick Launch:

Hope that helps..!!