TypeScript presentation (take 2) at SPSMEL

/

 

Earlier today I delivered possibly my best TypeScript session ever at SharePoint Saturday Melbourne.  The attendees were great, and I feel like I cracked jokes all the way through!

The secret, and this I think many attendees may not have realized, is that I started almost 10 minutes early.  So they went through 70 minutes of solid TypeScript wonderland with me.  I hope that extra time was good.

As I have actually done the rounds with TypeScript for a whole year.  I think this might be a good time to sunset this particular topic. 

Download Links

 

 

The Future of TypeScript

 

TypeScript, now that it has reached version 1, will never disappear:

There are some really big projects within Microsoft that is using TypeScript.  There is no alternative for them to switch to.

  • Dart - is not focused on building JavaScript.  Dart believes that JavaScript is broken fundamentally, and the only way to fix it is to introduce a new Virtual Machine.  Dart compiles down to JavaScript is almost a side-effect for adoption.  If Flash and Silverlight are bad for the web, what do you think people's reaction would be to Dart VM?
  • Coffee Script is great, and solves a genuine problem with JavaScript - that the language is too loose, and gives you too many ways to hang yourself.  Coffee Script's syntax, being so close to Ruby, will ensure a smooth path for them to work on Ruby and Coffee Script. 
    In the same vain that I feel a Ruby Developer should never use TypeScript - they should use CoffeeScript; a C#/.NET/Java/C++/JS developer should never use Coffee Script - they should learn the TypeScript syntax that's closer to what they already know, plus TypeScript will greatly help them learn, understand and write better Javascript.
  • ECMA Script v6 - is really the holy grail that will fix a lot of the odd JavaScript syntax (along with "option strict").  But ES6 does not include Type information.  What that means is that even with the eventual convergence of the Evergreen Browsers to ES6, TypeScript will still have a place as a superset to ES6.  The Type information is important for the tools to correctly check your code for you during design and compile time.

TypeScript sits in its own place.  It tries to give you "invisible railings" for your JavaScript. 

With TypeScript, you start with JavaScript, and you work within self imposed railings (which magically disappear when it's compiled back in JavaScript) so you get the benefit of a strong typed language to help you write code, but none of the performance penalties.

TypeScript enables teams to work together.  For projects that have hundreds of thousands of lines of JavaScript - there is no way back.

Remember: As your JavaScript codebase grow, it will become unmanageable and you will have code rot.  TypeScript is a great way to help you avoid that gruesome spaghetti situation. 

Nintex Workflow Inline Function to check if SPFile is locked

/

 

IsDocumentWritable

 

Nintex Workflow has a fairly useful function "IsDocumentWritable" that checks if the current item that the workflow is running on is writable.

There is a small problem, it only checks if the file is Checked Out (SPFile.CheckedOutType) and not if the file was locked, say by a Desktop Client Application.

 

Add Nintex Workflow Inline Function

We can add a simple Nintex Workflow inline function to get the behaviour we wanted:

I followed Vadim's excellent blog entry: http://www.vadimtabakman.com/nintex-workflow-developing-a-custom-inline-function.aspx

 

/*
* & 'C:\Program Files\Nintex\Nintex Workflow 2010\NWAdmin.exe' -o AddInlineFunction -functionalias "fn-IsFileLocked" -assembly "MY_DLL, Version=1.0.0.0, Culture=neutral, PublicKeyToken=9f7c41d4a6ea1fb3" -namespace "MYNamespace" -typename "MYInlineFunctions" -method "IsFileLocked" -description "Checks if file is locked." -usage "fn-IsFileLocked(itemPath)"
*/

public static bool IsFileLocked(string itemPath)
{
    bool result = false;
    try
    {
        SPSecurity.RunWithElevatedPrivileges(() =>
        {

            using (SPSite site = new SPSite(itemPath))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPFile file = web.GetFile(itemPath);
                    if (!file.Exists)
                    {
                        return;
                    }

                    // true if checked out

                    result = file.LockType != SPFile.SPLockType.None;
                    return;
                }
            }
        });
    }
    catch (Exception ex)
    {
    }
    return result;
}

 

You can call this method from within Nintex Workflow Designer.

image

Reading InfoPath template's default values in code

/

 

String xml = "";
FormTemplate template = this.Template;
using (Stream s = template.OpenFileFromPackage("template.xml"))
{
    XPathDocument reader = new XPathDocument(s);
    XPathNavigator nav = reader.CreateNavigator();
    XPathNavigator repeat = nav.SelectSingleNode("/my:myFields/my:Repeats/my:Repeat[1]", this.NamespaceManager);
    if (repeat == null)
    {
        return;
    }
    xml = tender.OuterXml;
}
if (!String.IsNullOrEmpty(xml))
{
    XPathNavigator destination = this.CreateNavigator().SelectSingleNode("/my:myFields/my:Repeats", this.NamespaceManager);
    destination.AppendChild(xml);
}

 

The top part of the code is particularly useful if you want to use the Default Values for repeating sections in InfoPath.  Your code will read the xml for the default values and insert them into the repeating section.  I've previously hardcoded these XML segments for insert, but that's extremely error prone when you inevitably update your XML template with new and more exciting child elements and attributes.

IE11 (+Win8.1.1) F12 Developer Tools for the SharePoint Dev

/

 

This blog post is about all the new nifty features I'm finding in the latest IE11 F12 developer tools.  I updated my Windows to 8.1 update 1, and IE11 was updated.  I started seeing a few cool new features, and went on Twitter to find the official documentation.

http://msdn.microsoft.com/en-us/library/ie/dn641599(v=vs.85).aspx

Was supplied by @AdamTReineke

https://twitter.com/AdamTReineke/status/454678702169677824

 

Rather than bore you with a list of features, which is on MSDN.  I want to just quickly share how I'm using some of them.

Disclaimer - I had just watched LEGO movie.  So EVERYTHING IS AWESOME!

 

DOM Explorer

 

1. CSS Changes

 

  • When you "touch up" CSS in SharePoint to get the exact look you want.  You often forget which rule you had applied.
  • The DOM Explorer's "Changes" tab tracks all the individual changes, and you can revert an individual rule, or copy them all and paste to your CSS file.
  • Copy All.  Awesome!

image

 

2. Pseudo Rules

 

  • You know those pesky :hover and :visited CSS rules in SharePoint that can never find to eliminate? 
  • Now you can apply :hover or :visited and see the effect rule without actually trying to catch your mouse hovering.  Haha.  Awesome!

image

 

The super cool updated Console object

 

3. Console info, warning, error

  • My "warnings" are currently filtered. 
  • use console.info() console.warn() and console.error() to write to these.

image

image

  • No ribbon button but you can right-click to filter Log messages too.  For those really spammy libraries, which is pretty awesome!

 

4. Console handles objects, multiple objects and HTML

 

  • Chrome and Firefox both were able to log objects and inspect them.  IE11 used to just log the [object].tostring which was pretty useless.
  • The update now fixes that, and allow multiple arguments to be logged at the same time.

 

image

 

5. Console always available for dev. 

 

image

 

  • So you can have all your logs happening without trying to start the debugger before you load the page
  • Remember your end users won't have this on, so TEST before you deploy code.

 

6. Console can switch target to an iFrame. 

 

  • Note, I couldn't get this to work in IE8-Compat mode (which my SP2010 runs on).  This works fine for IE9, IE10, Edge.
  • This is awesome for debugging objects in the SP.UI.Dialog

image

 

Debug

 

7. Debugger can be attached without reloading the page

 

  • Not sure if we need a picture to describe how awesome this is.  I imagine the picture will involve unicorns, rainbows and kittens.  AWESOME!

 

8. Just My code

 

image

  • Debugger only stops on my code.
  • Note, some libraries can throw error when you call it wrong - so sometimes not so awesome.

 

9. Pretty Print

 

  • Oh crap.  Something in sp.runtime.js don't know how to read this...

image

  • Not anymore in 2014!
  • Hit pretty-print - the sp.runtime.js becomes actually readable, and you can set line-based debugging too!

image

  • I didn't switch to sp.runtime.debug.js - this is awesome!

 

10. Source Maps

 

  • Now finally we have source map support.  Here is me debugging Typescript in IE11

 

image

 

 

Summary

  • The developer story on IE11 (after this update) is awesome!

Building a 2013 No Code webpart for XKCD.com/now

/

Last week, XKCD (of nerd comic fame) produced this most excellent comic http://xkcd.com/now/

Now

 

This complex looking image describes essentially an outer ring and an inner ring.  The outer ring is the current time on your machine.  The inner ring is the regions of the world.  The chart tells you quickly what time it is for someone living in another part of the world.

Being the SharePoint lover that I am, you know what I'm thinking.

Time for a fun toy Web Part

Step 0.  Environment.
Step 1.  Create a SharePoint Sandbox Solution, add Client Web Part (Host Web)
Step 2.  Create the assets (images, HTML and CSS)
Step 3.  Plug in the javascript code.
Step 4.  Permissions.
Step 5.  Create a test page.  Add the App Part to play.  Change web.regional settings - see webpart change.

 

Step 0.  Environment

My Environment setup is very simple:

  • Office 365 with Developer site, at: https://sharepointgurus365.sharepoint.com/sites/Developer/
  • Visual Studio 2013
  • Running on Windows 8.1
  • I do not have SharePoint installed on this client PC
  • I have a paint program Paint.NET which is an excellent developer's tool when you don't have Photoshop

 

Step 1. Create a SharePoint Sandbox Solution, add Client Web Part (Host Web)


image

Select SharePoint-Hosted.  This App Part will be hosted by Office 365.

 

image

 

Step 2.  Create the images.

imageimage

 

I split the image into two layers.  Because I want to rotate them separately.  I also change the text labels for the time 6PM, Midnight and 6AM on the Time-Ring.  Since when it's upside down it still needs to be readable.

I add these to the Project, under Images

image

I also modify the App Part html

image

I added CSS for the two rings.  Position:fixed so that they overlap. 

<body>
    <style>
        .timezone-ring {
            background: url(../Images/xkcd-now-land.png) no-repeat top left;
            width:706px;
            height:705px;
            position:fixed;
            top:0px;
            left:0px;
        }
        .time-ring {
            background: url(../Images/xkcd-now-time.png) no-repeat top left;
            width: 706px;
            height: 705px;
            position:fixed;
            top: 0px;
            left: 0px;
        }
    </style>
    <div style="position:relative;">
        <div class="timezone-ring">
        </div>

        <div class="time-ring">
        </div>
    </div>
</body>

image

<ClientWebPart Name="xkcd-clock" Title="xkcd-clock" Description="Clock based on xkcd.com/now the outer ring rotates to current machine time.  The inner ring rotates to web region." DefaultWidth="720" DefaultHeight="720">

  • Note: tidy up the ClientWebPart definition.  Set the default width and height.

 

Step 3.  Plug in the javascript code.

 

There is very little JavaScript,  So I wrote them inline.  In practice, this made the debugging a lot more difficult.  I recommend always writing your Javascript in a separate file.

 

<script type="text/javascript">
    //'use strict';  // have to turn off 'use strict' because I use eval() later :-P

    // Set the style of the client web part page to be consistent with the host web.
    (function () {
        var hostUrl = '';
        if (document.URL.indexOf('?') != -1) {
            var params = document.URL.split('?')[1].split('&');
            for (var i = 0; i < params.length; i++) {
                var p = decodeURIComponent(params[i]);
                if (/^SPHostUrl=/i.test(p)) {
                    hostUrl = p.split('=')[1];
                    document.write('<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />');
                    break;
                }
            }
        }
        if (hostUrl == '') {
            document.write('<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />');
        }

/*** John's code starts here ***/

        function turn() {
            var hour = (new Date()).getHours() + 12; // clock faces up so need 12hr offset
            var degrees = -((hour % 24) * 15); // turn anti-clockwise so negative
            var rotate = "rotate(" + degrees + "deg)";

            $(".time-ring").css("transform", rotate);

            setTimeout(turn, 1000 * 60 * 15); // 15mins
        }

        var ctx = SP.ClientContext.get_current();
        var hostCtx = new SP.AppContextSite(ctx, hostUrl);
        var timezone = hostCtx.get_web().get_regionalSettings().get_timeZone();
        ctx.load(timezone);
        ctx.executeQueryAsync(function () {
            // has current timezone

            var description = timezone.get_description();
            var m = /UTC(.*\d+):/.exec(description);
            if (m) {
                var offset = eval(m[1]) -2;
                // map is aligned with Egypt (UTC+2) so need a 2hr offset.

                var degrees = -(offset * 15); // turn anti-clockwise so negative
                var rotate = "rotate(" + degrees + "deg)";

                $(".timezone-ring").css("transform", rotate);
            }

            turn();  // call turn

        }, function () {
            // failed.
        })

/*** JOHN'S CODE ENDS HERE ***/

    })();
</script>

 

Few quick notes here:

  • turn() function calculates the rotation degree for the outer ring, based on the current machine time.  See comments for all the offsets.
  • the clientContext query needs to get the App Host Web settting.  Otherwise it will return you the regional setting for the App Web which would be pretty pointless.
  • finally, once we have the timezone information from the regional setting, it looks like (UTC+10: Sydney).  I take the +10 and do more offset for the inner ring.
  • I only request region information once on page load.  But I put turn() on a timeout call every 15minutes.  So if you leave the webpart on a screen it'll keep checking and turn every 15mins.

 

Step 4.  Permissions.

 

image

By default, the App has no permissions to read from the Host Web.  We need to set up the permission to Read from the Host Web.

image

When deployed via VS.NET you'll see this pop up in the browser.  You'll also get this when you activate the App.

 

Step 5.  Create a test page.  Add the App Part to play. 

 

image

 

Results

 

image

I'm in Australia (AEST UTC+10).  Which is pointing up.  My current time is 11:40pm

image

Change the Host Web's region to (Pacific Time UTC-8).

image

Web Part still shows 11.45PM - that's my current time.  But the map has rotated to point to the West Coast.

 

Downloads

I did not test this on any other machine but it should work.  Let me know if it works for you.

And if you really enjoy using this in your company, please buy something from the XKCD gift shop.