Archive for Quick Tips

Sort the LinkedIn People You May Know page by Shared Connections

UPDATE: Now available as a Chrome Extension via the Chrome Web Store:
Get the Sort ‘People You May Know’ Chrome Extension

If you’ve ever scrolled through the LinkedIn ‘People You May Know’ page, you may have noticed that the suggested connections are not sorted by the number of Shared Connections you have, despite frequent requests to do so.

As a quick tip, I knocked together a tiny snippet of JS (and some jQuery, which LinkedIn is already loading natively on the page) that will resort the cards in descending order according to the number of shared connections. To run it, simply open your browser console, copy/paste the script and hit ‘Enter’.

var PYMK = [];
$('.pymk-card').each(function() {
 var Markup = $(this)[0].outerHTML;
 var InCommon = parseInt($(this).find('.bt-incommon > .glyph-text').text()) || 0;
 var Person = {InCommon:InCommon, Markup:Markup};
PYMK.sort(function(a, b){
 return b.InCommon - a.InCommon;
var NewPeopleCardsList = '';
 NewPeopleCardsList += item.Markup;

Quick Tip: CorasWorks Variables in your Path References

Now nearly two years old, you have been using CAPS, the CorasWorks API for building solutions in SharePoint, for a while; and hopefully you’re hammering out some pretty slick custom displays. However you keep running into one place you can’t leverage your CorasWorks variables, be it Global Variables or our built-in ones. Namely, how do you centralize your resource files (i.e. JS, CSS, images, etc) and yet still be able to leverage a Global Variable to reference those files?

CAPS has the answer for you: the “GetFileContents” method!

You may say “Wait, that is not right; is it…?” but it is. Normally, you might use a CorasWorks CAPS HTML Viewer to call an HTML file that is the base of your display; and to keep things clean, you reference all your dependent JS, CSS & Image files inside that HTML file. However that means that you have to reference them either via fully-qualified domain names (which then are not portable) or via relative paths, which is not always conducive to centralizing those resources. Well here is the technique…

In your CorasWorks CAPS HTML Viewer, instead of pointing directly to the HTML file (a scenario discussed in a previous blog post), make a call like this:
%SiteURL%/_layouts/CorasWorksApps/CorasWorksApplicationService.ashx?RequestType=GetFileContents&FileUrl=[Your Global Variable]/Folder/YourFile.htm

Then in your HTML file, you can now freely use references like:

<link href="[Your GV]/Folder/YourFile.css" rel="stylesheet"/>
<script src="[Your GV]/Folder/YourFile.js"></script>
<img src="[Your GV]/Folder/YourFile.png" title="Your Image">

This also open up the use of any of the built-in CorasWorks variables or your own Global Variables for anything else in that HTML page (think maybe current Username or Site Title in an <h1> tag). The reason this works is because the contents of the file – in this case, an HTML file – that is being queried via the GetFileContents method is automatically being passed through the CorasWorks variable replacement engine, thus ensuring proper translation/insertion of variable values anywhere within that HTML. And because that HTML includes those resource file URLs, their location is automatically set using those variables.

How to “pin” a jQuery UI Dialog in place

Recently, I wanted to “pin” a jQ UI Dialog in place for an application I was designing – the idea being that the user could open the Dialog (non-modal), drag it to the location on the screen they wanted, then scroll up & down the page and interact with content while having the Dialog pinned in its position, say just inside the top-right corner of the viewport.

Surprisingly, I found very little info on doing so (sorry, no documented jQ UI method) but I didn’t let that stop me. Conceptually, I knew I needed first to add a “pin” button to the Dialog itself – I thought the top-left corner of the title bar would be best – then I needed to combine some jQ that would handle my click events for pinning & unpinning. And before long, I had it…

Click to pin (state is currently unpinned):

Click to Unpin (state is currently pinned):

Here’s what I did to achieve this result…

  1. Initialize your jQ UI Dialog; in this example, mine has an ID of ‘MyJqUiDialog’. As part of creating the Dialog, I’m prepending a button to the Title bar that has stock jQ UI styling plus a custom class called ‘PinDialog’.
        autoOpen: false,
        modal: false,
        create: function () {
            $('#MyJqUiDialog').parent().children('.ui-dialog-titlebar').prepend('<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only PinDialog" role="button" aria-disabled="false" title="Pin down"><span class="ui-button-icon-primary ui-icon ui-icon-pin-w"></span></button>');
  2. Add a click handler binding to the ‘PinDialog’ class; upon click, this will toggle the Pin class to ‘DialogPinned’ (which also re-styles the icon as seen in the screenshots above), calculate the current position of an unpinned Dialog, change its CSS position to “fixed” and set its CSS top & left to the current position. In other words, it calculates where in the viewport the Dialog currently is & fixes it there.
    $('.PinDialog').click(function () {
        var CurrentDialogPosition = $(this).closest('.ui-dialog').offset();
        var DialogLeft = CurrentDialogPosition.left - $(window).scrollLeft();
        var DialogTop = - $(window).scrollTop();
        $(this).toggleClass('PinDialog DialogPinned').toggleClass('ui-state-highlight ui-state-default').children().toggleClass('ui-icon-pin-w ui-icon-pin-s').closest('.ui-dialog').css({ 'position': 'fixed', 'top': DialogTop, 'left': DialogLeft });


  3. Add a click handler binding to the ‘DialogPinned’ class; upon click, revert to the previous icon and set the CSS position to absolute while also setting its top & left to its absolution position in the window. This is key as it keeps the Dialog from jumping back to the top of the window if say you had scrolled down the page before unpinning it.
    $('.DialogPinned').click(function () {
        $(this).toggleClass('PinDialog DialogPinned').toggleClass('ui-state-highlight ui-state-default').children().toggleClass('ui-icon-pin-s ui-icon-pin-w').closest('.ui-dialog').css({ 'position': 'absolute', 'top': $(this).closest('.ui-dialog').offset().top, 'left': $(this).closest('.ui-dialog').offset().left });
  4. Finally, I have a little CSS to ensure the Pin/Unpin icon displays as expected within the Dialog title bar
    .ui-dialog-titlebar .PinDialog, .ui-dialog-titlebar .DialogPinned {
        float: left;
        height: 20px;
        margin: 0 5px 0 -10px;
        padding: 1px;
        top: 50%;
        width: 20px;

And there you have it – everything you need to create your own jQuery UI Dialog customization to enable the pinning & unpinning of the Dialog on the screen.

Quick Tip – Hide the browse & toggle options on a CorasWorks Calendar

Here’s a quick tip – if you want to hide the browse and toggle options on the CorasWorks Calendar…


…all you need is one line of CSS added to your target page:


The benefit to doing so is to ensure a smooth user experience when you’re say filtering the Calendar. For example, imagine I’ve applied a dynamic filter to only display items within the Current Week and also set the default display view to “Work Week” – if the user has the ability to toggle the display mode to say “Month” or “Timeline” and then also browse back or forward through time, they’re going to get an empty view (again, by virtue of the filter).

Hiding the browse & toggle options simply ensures they stay within the time frame and display mode that Calendar is targeted to; after all, the Calendar itself and the Design Canvas make it quick & easy to create similar Calendar views with different filter ranges and display modes.

Adding the CSS rule can even be done directly through the webpart as well; just open the web part properties (the native SP “Edit web part” option, not the CorasWorks Display Wizard) and add the CSS within a <style> tag to the “HTML Before” or “HTML After” properties and you’re set. Now the web part can even be placed into the Web Part Gallery with this customization set for use throughout your Site Collection.

Video Embed code (YouTube, Screencast, etc) in SharePoint list items

Ever try to put some embed code into a Multiples lines of text field in SharePoint? If so, chances are you didn’t get the expected result (unless your goal was to display raw HTML & not the embedded video). Your first reaction might be to think, no problem, there’s three different ways to configure a Multiple lines of text field – one has to work, right? Unfortunately not :/

The three options are “Plain Text”, “Rich Text” and “Enhanced Rich Text” – when you try to paste in say the embed code for a YouTube video, your results will be…

  • Plain Text: The raw HTML is saved but it’s also displayed in the Item Forms & List Views, instead of seeing the embedded video.
  • Rich Text: The embed HTML cannot even be saved; if you paste it into the field, when the item saves, it will be stripped out.
  • Embedded Rich Text: This one seems to have the most promise because you can access the “HTML Source” box for the field; not only that, if you post the embed code into the HTML Source, you’ll see the embedded video while still in the List Item form – yay! Save it though, and the embed code is again removed.

You’ll see these results reflected in the screenshots to follow; of the native options, only the field configured as “Plain Text” will even retain the embed code that was pasted in.

So what’s a user to do? Ask IT for a custom coded solution just to display some embedded videos? Hack together something with Content Editor web parts (great for a single video, but what if you need to manage a CMS and video library…)? Buy a solution to stream videos from the SharePoint server (you really want to tax your SharePoint WFEs with video streaming, not to mention YouTube’s player & compression algorithm is world class and likely to perform better…)?

How about a 4th option that makes it as easy as it should be – copy/paste the embed code into a field in the list item & have it just work. Enter the CorasWorks Workplace RTF field!


Our Workplace RTF field not only allows you to paste video embed HTML into it but, when you do, the embed content is displayed & maintained throughout the Item View & Edit forms (of course, it also works in the CorasWorks Actions).



And while the native List Views aren’t capable of rendering the embedded HTML…


…fortunately, our smart Grid is:


All told, creating a solution for tracking, managing and displaying your videos from any number of premier video streaming services is now quick & easy with CorasWorks!

Using jQuery to create a slide-left-and-fade effect

A couple years ago I had the idea of adding a UI effect to an application I had built (a lightweight Task board) that mimicked the notification bar in Android – specifically, an item could be “swiped” off the board and the DIV representing the item would have an animation sliding left (or right) while also fading out.


Accomplishing that effect was as simple as one line of jQuery:


That’s it! You can then implement this upon any sort of event or user interaction (mine happens here upon clicking a “Mark Complete” button) and you’re set.

And for those wondering what makes it all work, the .stop() ensures no conflicting animations are being run (this particular application allows users to re-order & shuffle their board) and the animation itself handles the sliding & fading out via the “left: ‘-=600′” (move the element 600 pixels to the left of where it currently is) & “opacity: ‘hide’” (change the opacity to hide the element) properties.

Quick Tip – Attribute Value Templates in XSLT

Previously, I blogged about a quick & easy shorthand method for referencing an XSL variable within an attribute value – this capability is really a subset of a capability called “Attribute Value Templates” in XSL (reference).

What’s great about what I’ll call AVTs for short is that you’re not limited to just referencing existing XSL variables; once an AVT is instantiated – by use of the wrapping {} curly brackets – that attribute can then be any valid XSL expression.

Take for example a common use case of dynamically generating some HTML using XSL and, in doing so, wanting to create HTML attributes using data points from your source XML. In the past, you may have done something like this:

   <xsl:attribute name="id">
      <xsl:value-of select="concat('Task',TaskID)"/>
   <xsl:value-of select="Title"/>

But using an AVT, this same line could be re-written as:

<div id="{concat('Task',TaskID)}">
   <xsl:value-of select="Title"/>

This is just a simple example but, in general, if you can create an expression as part of a “value-of select”, you can do it within an AVT. Support for full expressions within an AVT thus helps ensure you can write stylesheets that are now both smaller and easier to read.

Simple jQuery for character counts on an input box

A quick tip here on adding a simple character count element to accompany an HTML input.

Imagine you’ve added the “maxlength” attribute to a text input box and now want to provide some real-time feedback to your users as they fill out that input indicating the amount of characters remaining. In my experience, there’s 4 key JS events you’ll want to bind to for maximum likelihood that your character counter updates on all changes: keyup, focusout, paste & cut.

Normally, a simple jQuery $.on() would be all you need, something like this:

$('#MyText').on('keyup focusout paste cut',function(){
  $('#CharCounter').text(255 - $(this).val().length);

Try that though & you’ll see a small issue; the paste & cut events aren’t updating correctly. They actually are running, but the reason the counter seems off is that the timing of the events causes the bound function to run before the value of the input is actually changed; they literally fire so fast, the result of the cut or paste hasn’t actually changed the value if the input when it fires.

Fortunately, this is readily addresses by adding a small (even 10ms) setTimeout() function call – and by checking the event.type that triggers the call, you can conditional only use the setTimeout() for those two events.

Not content to stop there though, I wanted a more flexible, reusable solution. Consider the below which then adds a few key features:

  • The aforementioned conditional check for the firing event has been added
  • Initialized via input class so that it can be easily reused within a given form
  • The “maxlength” to substract the char count from is pulled from the input itself instead of hardcoded in the function
  • A custom “data-CountElem” attribute is added to the input markup to identify (by ID) the element you want to write/update the char count to

Check out the jsFiddle here – code below:

$('.UseCharCount').on('keyup focusout paste cut',function(event){
  var self = $(this);
  if(event.type == 'keyup' || event.type == 'focusout')
    $('#' + self.attr('data-CountElem')).text(self.attr('maxlength') - self.val().length);
  else if(event.type == 'paste' || event.type == 'cut') {
      $('#' + self.attr('data-CountElem')).text(self.attr('maxlength') - self.val().length);

Quick Tip – Shorthand Variable References in XSLT

Here’s a quick tip – next time you’re writing some XSL and want to include a variable within the attribute value of a node, don’t waste time & code doing something like this:

<xsl:variable name="VarName" select="SomeData"/>
  <xsl:attribute name="AttrName">
    <xsl:value-of select="$VarName"/>

Instead, you can use this shorthand notation for referencing a variable directly within an element attribute:

<xsl:variable name="VarName" select="SomeData"/>
<MyElement AttrName="{$VarName}"/>


Center content with margin:0 auto

Working in SharePoint I almost expect, on a daily basis, to run into some annoying formatting issue due to an overly-generic CSS rule coming from the Core CSS that’s baked into the platform. Today I had a client trying to center some content (a cool News Rotator using the bxSlider jQuery plug-in, fed via the CorasWorks API) that was being loaded up via Content Editor Web Part (CEWP) but no matter what she did, she couldn’t get the CEWP to center within its parent Web Part Zone.

I then shared a handy CSS trick I picked up along the way; this can be used on any block-level element you want to center within its parent when you have a fixed width applied.
margin:0 auto

Using Firebug, it was clear to the customer that the parent DIV containing the Rotator was filling the horizontal space, but applying a “text-align:center” just resulted in the text within the Rotator items getting centered, not in centering the Rotator itself within its parent DIV.

I looked, saw the fixed width on the Rotator and knew right away that a “margin:0 auto” was all we needed – and voilà, another happy CorasWorks customer!