Introducing TypeScript – Microsoft’s new open source JS language

Written by Keith Tuomi. Posted in Javascript, Jquery, Office 365, SharePoint 2013, TypeScript

TypeScript Introducing TypeScript   Microsofts new open source JS language SharePoint 2010 typescript sharepoint 2013 office 365 jquery javascript

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

http://www.typescriptlang.org/#Download

Starts from JavaScript, Ends with JavaScript

TypeScript starts from the syntax and semantics that millions of JavaScript developers know today. With TypeScript, you can use existing JavaScript code, incorporate popular JavaScript libraries, and be called from other JavaScript code. TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any other ES3-compatible environment.

Contribute

Read the specification in doc or pdf

Discuss and provide feedback on the language.

Play with the bits and file bugs.

Join the #typescript Twitter discussion and follow the CodePlex project.

Learn

Tutorial – Best way to get up to speed on TypeScript.

Forums – Great place to get help with using TypeScript.

Incoming search terms:

  • claims authentication sharepoint 2013
  • sharepoint 2010 claims based authentication
  • typescript in Office 2013

View Source Chart for IE

Written by Keith Tuomi. Posted in Branding, CSS, Development, Javascript

Thought i’d share that there’s an IE port of a valuable plugin i’ve used in Firefox for a while, View Source Chart:

Steps to get beautiful, visually sensible HTML source viewing in IE9:
1. Copy the script below and paste it into a new browser bookmark.
2. Click the bookmark from any page to view its source chart.

For other browsers, check the first code block on this page.

About View Source Chart

sitelogo1.png.scaled10001 300x69 View Source Chart for IE SharePoint 2010 javascript development css branding

Cross-browser bookmarklet now available at viewsourcechart.com

A PICTURE SAYS A THOUSAND WORDS
Eyesight is the most efficient way for the human brain to process information. By placing visual boundaries where they already exist invisibly, Source Charting enables you to take in DOM structure and hierarchy as fast as your brain possibly can.

IT’S BETTER BECAUSE…
When mentally building tag boundaries by reading a tag name, then using manual actions like clicking, finding and scrolling, we experience forced breaks in cognitive processing. As the DOM becomes more complex, more productivity is lost. It doesn’t take long before mentally navigating the DOM becomes impossible.

Source Charting eliminates the need for processing any other way but the fastest: visually. It provides an instant and complete visualization of hierarchical nesting of any tag in the view port.

SUMMARY
Source Charting…
* Defines HTML Tag Boundaries (so you don’t have to)
* Defines DOM Structure and Hierarchy (so you don’t have to)

Case In Point: The Misapplication of Flowchart-style UI for DOM Inspectors
DOM inspectors and Folder Viewers have historically (and mistakenly) used flowchart-style GUIs to help users navigate hierarchies. The problem is that this type of GUI is intended to convey sequential movement or flow, not structure.

Because sequence and flow is measured one step at a time, the lines connecting elements in a flowchart-like GUI span only one generation (parent-child). When used to depict complex hierarchical structures like the DOM, the user is forced to inefficiently and inaccurately measure hierarchical nesting levels using white space indentation. (See image #3 above)

It is precisely this subtle but monumental mistake that View Source Chart overcomes.

The only way to visualize structure accurately is to measure hierarchical nesting. This is done simply by pictorially delineating element boundaries, which results in a manifestation of document structure.

For a full de-bugging How-To, visit http://viewsourcechart.com/what-why-how

Cross-browser bookmarklet available at http://viewsourcechart.com/get-the-bookmarklet

Incoming search terms:

  • sharepoint 2013 css chart
  • cascading style sheet reference sharepoint 2013
  • sharepoint 2013 css guide
  • sharepoint 2013 style sheet

Telerik acquires Fiddler

Written by Keith Tuomi. Posted in Browsers, CSS, Development, Errors, Javascript

slides 300x136 Telerik acquires Fiddler SharePoint 2010 javascript errors development css browsers  Great news, the greatest little open source web debugger, Fiddler, has now been aquired by the great vendor of .NET controls, Telerik. Expect some nice upgrades to Fiddler soon, and yes, it will remain free.

Full story:

http://www.telerik.com/automated-testing-tools/blog/christophereyhorn/12-09-10/here-we-grow-again-telerik-acquires-fiddler-what-s-next.aspx

“We have some very exciting news to share with the Telerik community. Telerik has just acquired Fiddler! Even more exciting is that Fiddler’s brilliant creator Eric Lawrence will come over from Microsoft to join the team fulltime. For those of you who don’t know, Fiddler is a web debugging proxy which logs all HTTP(S) traffic between your computer or device and the Internet. In other words, it is an essential tool for any web, desktop or mobile developer. The popularity and sophistication of Fiddler is hugely impressive considering this has been Eric’s informal side project for more than 8 years. With Eric joining the team he will be able to deliver on his vision for Fiddler with the full financial and resource backing of Telerik.

It might be apparent why Eric would jump at an opportunity to turn his side passion project into a full time position, but what might not be readily obvious is why Telerik would need a product like Fiddler in our portfolio.

Our strategy has always been to acquire when it makes sense and to use the new technology to improve our core products for the benefit of our customers. In the case of Fiddler, this was a natural extension because Fiddler is already in use as the core technology behind Test Studio’s load and performance features. Additionally, we gain a formidable competitive edge over other tools as both Eric and Fiddler join the Test Studio product family. The collaboration for enhancing Fiddler is already underway as well as discussions to further expand our portfolio and extend support for our customers.

The Fiddler community is very important to us. We have learned from the mistakes of others who have acquired free tools only to turn the tables on the community and monetize them at a later date. We admire what Fiddler has delivered to the community and want to expand that value by investing in things like expanded platform support, user interface improvements and a first class website with extensive community and support features.

That is why, as part of our commitment to keeping Fiddler free and making further investments into the tool, we have launched a poll on the Fiddler website asking the community to vote on the first improvements we will target. Whether you are an avid or occasional Fiddler user we would love to get your opinions on what you would like to see happen first.

To give you some insight into how popular Fiddler really is here are some stats, year to date. On average Fiddler receives over 9,000 installations EVERY DAY, and when I say average that is including weekends. That number jumps to over 10,000 for weekdays. The website has received more than 5 million unique visitors this year alone with over 80% of them being first time visits. Needless to say that the Fiddler community is not just big, it’s HUGE.

So please help me in welcoming Eric and the Fiddler community into the Telerik family. Great things are ahead for Fiddler as we continue to invest in and build an even better tool and community. To see how Fiddler is already powering Test Studio’s load and performance features download a trial today.”

Incoming search terms:

  • telerik sharepoint 2013
  • telerick sharepoint 2013

CSSRegistrations and ScriptRegistration in SP 2010

Written by Keith Tuomi. Posted in Branding, CSS, Javascript, Master Page, SharePoint 2010

The CssRegistration control adds each of the style sheets to an internal collection in the SPContext and the CssLink renders each of them in alphabetical order before rendering the primary, default, and alternate CSS links. If you want one of them to appear after core.css, set the DefaultUrl property of CssLink.

CSSLink Example:

<Sharepoint:CssLink runat="server" DefaultUrl="<% $SPUrl:~SiteCollection/Style Library/en-us/Core Styles/Style.css %>"/>

CssRegistration Example:

<SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/en-us/Core Styles/Style.css %>"
After="corev4.css" runat="server" EnableCssTheming="true"/>

It’s very easy to get confused by this because the CssRegistration controls are after CssLink, but they don’t render the links, CssLink does!
One advantage that the publishing definitions have over the SharePoint default.master is the $SPUrl expression that allows dynamic creation of the URL for sites under the root web that use the root web’s master pages. Unfortunately, while CssRegistration is part of the core Microsoft.SharePoint.dll, $SPUrl requires the publishing features to be turned on.

For a JS reference, it’s important to note that ScriptLink doesn’t support the expression builders like <% ... %>. If the script available in top-Level site, you can use:

<SharePoint:Scriptlink runat="server" name="~SiteCollection/Style Library/en-us/Core Styles/JS/script1.js" 
language="javscript" />

If the script avaialble in the current site, we can use:

<SharePoint:Scriptlink runat="server" name="~Site/Style Library/en-us/Core Styles/JS/script1.js" 
language="javscript" />

Incoming search terms:

  • system accessviolationexception: attempted to read or write protected memory this is often an indication that other memory is corrupt at microsoft sharepoint portal webcontrols locstringidlookuptable cctor()
  • sharepoint 2013 CssRegistration
  • csslink sharepoint visualstudio
  • sharepoint 2013 cssregistration after
  • sharepoint:cssregistration foundation

Anchor links / tags in SharePoint 2010

Written by Keith Tuomi. Posted in Javascript, SharePoint 2010

Standard HTML Anchor links are a traditional and useful means to send users to specific locations in web content. A basic primer on how to create an HTML Anchor link can be found here.

Unfortunately in some areas of SharePoint 2010 like Wiki pages, users experience a side-effect of all the gadgetry involved in the system: normal HTML anchors that they may enter into the content areas are “broken” and do not respond. I did some checking and found the following behavior:

-IE 8 – goes to the Anchor Tag on the new page, then jumps to the top. From my understanding this is due to the ribbon bar or something on the page that overrides focus
-IE 7 – works
-IE 6 – works g
-FireFox 12 – page loads and never generates a focus anywhere…not even the jump you get from IE 8

Solution 1 (Basic HTML editing comfort required):
Add the target anchor link as normal, in the following example Chapter1 is the text you replace with your own anchor name & text:

<a name="#Chapter1">Chapter 1</a>

Add the following as the hyperlink to the target:

<a onclick="javascript:this.href='#Chapter1';" href="javascript:;">Chapter 1</a>

Solution 2:
Edit your publishing page and select some text. Now click “Insert/Link/From Address”. In the pop up window just type “/” for the “Address” field. Remove “/” from the URL field and add “#Chapter1” or equivalent value to “Bookmark”. Now you will be able to create an anchor to “#Chapter1”. Just select some other text in your page. Now click “Insert/Link/From Address”. In the pop up window just type “#Chapter1” for “Address”. Save and your inpage link will work.

Incoming search terms:

  • anchor tags sharepoint 2010
  • anchoring managed metadata sharepoint
  • css html anchor within sharepoint page
  • how to do jump links in sharepoint
  • infopath link anchor
  • SharePoint 2010 Anchor Tag Fix
  • sharepoint 2010 anchor tags
  • sharepoint 2010 anchor to webpart
  • sharepoint anchor tags

Open modal dialog and refresh the parent page from custom form SharePoint 2010

Written by Keith Tuomi. Posted in Client Object Model, Javascript

What

You need to open a SharePoint 2010 popup (SPModalDialog) and refresh the parent page on close.

So What

End Users get griefed when they add an amazing new bit of content to SharePoint, but after submitting it’s not immediately visible on the page they just “came from” (even though geeks know the score).

Now What

Add the following code (assuming you are up to snuff on the basics of the SP Modal Dialog methods – here’s a good primer):

<script type="text/javascript">
    function openMyDialog(itemid,title) {
        var options = SP.UI.$create_DialogOptions();
        var layoutsUrlView = SP.Utilities.Utility.getLayoutsPageUrl('WebParts/MyWebPart/ViewDialog.aspx')
        options.url = layoutsUrlView + "?itemid=" + itemid + "&title=" + title;
        options.autosize = true;
        options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
        SP.UI.ModalDialog.showModalDialog(options);
    }
    function CloseCallback(result, target) {
        location.reload(true);
    }
</script>

Now when you close the popup, the parent page is refreshed.

Incoming search terms:

  • sharepoint 2013 client object model open dialog
  • sp ui modaldialog showmodaldialog sharepoint 2013
  • sharepoint 2013 close modal dialog
  • sharepoint 2013 close popup
  • sharepoint list edit form popupwindow dialogreturnvaluecallback as recent added list item
  • sharepoint 2013 sputilities
  • sharepoint 2013 sp ui modaldialog showmodaldialog(o) null
  • sharepoint 2013 sp ui modaldialog height
  • sharepoint 2013 sp ui $create_dialogoptions() in the application page sample
  • SharePoint 2013 open new list item dialog

Modify Welcome Menu username Jquery

Written by Keith Tuomi. Posted in Javascript, Jquery, SharePoint 2010, User Profile

Needing to deal with grabbing the username displayed in the top-right SharePoint welcome menu and reverse the lastname, firstname format it was in, I came up with the following Jquery script.

It takes the welcome menu root takes in the style of “Smith, Joe” and turns it into “Joe Smith”, with having to mess with User Profile Synching or feature stapling. You could adapt it for any other need in a jiffy. The important thing to note is that grabbing the client side ID of the welcome menu is done with a wildcard expression, since the clientside ID is prone to changing – for example it could be “zz16_Menu_tt” one time and “zz12_Menu_tt” the next:

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(ReOrderUsername, "sp.js");
        function ReOrderUsername() {
		var userName = $('[id$=_Menu_t]').children("a").children("span").text();
		if(userName.indexOf(", ")!=-1) {	
		      var fnstart = userName.indexOf(", ", 0);
		      var fnend = userName.indexOf("<",fnstart);
		      var lastName = userName.substring(fnstart, fnend);
		      var firstName = userName.split(", ").pop();        
	              $('[id$=_Menu_t]').children("a").children("span").text(firstName + ' ' + lastName);
	         }	
        }		
</script>

Incoming search terms:

  • sharepoint 2010 specified value is not supported urloffile import-spweb
  • sharepoint 2013 cross domain error the query string siteurl is missing or invalid
  • sharepoint 2013 jquery ms-welcomemenu
  • sharepoint 2013 welcomemenu
  • standard menu custom welcome username sharepoint 2010

Firefox Friday #1 – Useful Plugins for SharePoint Development

Written by Keith Tuomi. Posted in Browsers, Development, Javascript, Jquery, Security, SharePoint 2010, SharePoint Designer, SharePoint Enterprise, SharePoint Foundation

As SharePoint developers we are bound to IE but often fallback to other browsers for various reasons such as performance, HTML standards compliance, or in my case with Firefox – the plugins available.   The official Technet on what is and is not supported on various browsers (Chrome is notably not even in there): http://technet.microsoft.com/en-us/library/cc263526.aspx. I will follow up this post with a list of what specifically will not work with SharePoint when using Firefox (so you can’t say I didn’t warn you!)

While Google Chrome is definitely a solid choice, if you are using Firefox the following plugins will help you out:

FasterFox Plugin

Download: http://fasterfox.mozdev.org/
Description:
Various network tweaks that deliver a zippy experience. This will also speed up your SharePoint user experience greatly too.

  • Prefetch Links
    Dynamic speed increases can be obtained with Fasterfox’s unique
    prefetching mechanism, which recycles idle bandwidth by silently
    loading and caching all of the links on the page you are browsing.
  • Tweak Network
    Fasterfox allows you to tweak many network and rendering
    settings such as simultaneous connections, pipelining, cache,
    DNS cache, and initial paint delay.
  • Page Load Timer
    A millisecond accurate page load timer tests the effectiveness
    of your settings.
  • Block Popups
    A popup blocker for popups initiated by Flash plug-ins is also
    included.

Notes:
1. Remember, just because you’ve got a turbocharged browser doesn’t mean your colleagues or clients do.  This plugin is a double-edged sword because you can get lazy or indifferent about performance problems on web applications. If you are developing, testing, or QA’ing systems you should either use a different browser (COUGH IETester COUGH) or temporarily disable Fasterfox.

2. The out of the box setting in the Firefox > Add-Ons > FasterFox > Options menu is “Optimized“. Set that bad boy to “Turbo Charged” and to hell with playing nice with server resources – our time is worth more!

FasterFox Add On Options Firefox Friday #1   Useful Plugins for SharePoint Development SharePoint 2010 sharepoint foundation sharepoint enterprise sharepoint designer sharepoint 2010 blog security jquery javascript development browsers

Windows Media Player Plugin for Firefox

Download: http://www.interoperabilitybridges.com/windows-media-player-firefox-plugin-download
Description: Lets you run Windows Media content in Firefox. In particular you will be able to stream WMV videos such as the ones we have in the newly minted it groove SharePoint center directly in your browser window.

Web Developer Toolbar

Download: https://addons.mozilla.org/en-US/firefox/addon/web-developer/
Description: Adds a toolbar with a slew of options essential for anything webby. CSS, Forms, Images, Cookies, Viewing Source – instantly get Xray vision into any web page.
Web developer toolbar Firefox Friday #1   Useful Plugins for SharePoint Development SharePoint 2010 sharepoint foundation sharepoint enterprise sharepoint designer sharepoint 2010 blog security jquery javascript development browsers

iMacros for Firefox

Download: https://addons.mozilla.org/en-US/firefox/addon/imacros-for-firefox/?src=collection&collection_id=da0ecd99-2289-7ab0-7d57-e7c489c845c3
Description: Automate Firefox. Record and replay repetitious work. If you love the
Firefox web browser, but are tired of repetitive tasks like visiting the
same sites every days, filling out forms, and remembering passwords,
then iMacros for Firefox is the solution you’ve been dreaming of!
***Whatever you do with Firefox, iMacros can automate it.***

Colorzilla

Download: https://addons.mozilla.org/en-US/firefox/addon/colorzilla/
Description: With ColorZilla you can get a color reading from any point in your
browser, quickly adjust this color and paste it into another program.
You can Zoom the page you are viewing and measure distances between any
two points on the page. The built-in palette browser allows choosing
colors from pre-defined color sets and saving the most used colors in
custom palettes.

Basic end-user usage could be grabbing the color code for the blue from a clients logo and matching it up to another design element.

Firebug

Download: http://getfirebug.com/
Description: Firebug integrates with Firefox to put a wealth of web development tools
at your fingertips while you browse. You can edit, debug, and monitor
CSS, HTML, and JavaScript live in any web page.

Learning to use Firebug is a whole different topic but it is possible for non-developers to get working with it to quickly id and delegate issues due to Javascript or CSS issues, broken images, etc.

Firebug also is required for Yahoo YSlow and the Google Pagespeed Firefox Plugins

Incoming search terms:

  • firefox sharepoint plugin
  • sharepoint firefox
  • sharepoint 2013 popup menu
  • sharepoint firebug

SharePoint 2010 Get Current Username / Logged in User

Written by Keith Tuomi. Posted in Client Object Model, CSS, Javascript, Jquery, SharePoint 2010, SharePoint Designer, SharePoint Enterprise, SharePoint Foundation, SharePoint Standard

Have been exploring the SharePoint Client Object Model and in particular the Javascript Object Model

While there are methods to get the current user info, you can also simply borrow the logged in username from the top right of the screen:


<script type="text/javascript">// <![CDATA[
 var Username = document.getElementById("zz16_Menu").innerHTML ;
 var end = Username.indexOf("<");
 var nameOnly = Username.substring(8, end);
 document.write(nameOnly);

// ]]></script>

This technique is a little complex for my liking however, so here’s a snappier way to grab the current login name (using Jquery):


var Username = $("#zz16_Menu").text();
document.write(Username);

Note that the #zz16 identifier will vary based on your Master page. Use the Firefox Web Developer tools or Internet Explorer F12 tools to find out what the ID should be on your SharePoint site.

Using this type of technique is definitely more brittle than actually using a CAML query however in my mind would be more performant than actually doing a lookup in the DB. Would love to know if someone knows the scoop on that..

Update 05/12/2011

As my colleague Colin pointed out – the name that appears on the top right can really be anything and can change – for example if a user gets married and their name changes. A better approach would be to retireve the value programmatically using SPServices ( http://spservices.codeplex.com/wikipage?title=$%28%29.SPServices.SPGetCurrentUser ). As of version v0.6.1, you can also request the ID of the user by specifying fieldName: “ID”.  Much more stable to use in most scenarios:

$().SPServices.SPGetCurrentUser({
	fieldName: "ID",
	debug: false
});

Incoming search terms:

  • sharepoint javascript get current user
  • sharepoint 2010 get current user
  • SHarePoint 2010 current user
  • sharepoint get current user
  • sharepoint get username
  • sharepoint javascript current user
  • sharepoint get user name
  • sharepoint get current user javascript
  • sharepoint get current user name
  • sharepoint 2010 get user id

Follow me on Twitter