Archive for Quick Tips

Polling Data with JavaScript’s setInterval() Function

I wrote earlier this year about making use of JavaScript’s setTimeout() function to improve the efficiency of some custom JavaScript/jQuery I wrote for a complex hierarchical report. Using setTimeout, the report let users quickly see the health of numerous projects that needed to update many columns and rows of results based on the user’s filter and view selections.

The setTimeout() function also has a very useful cousin called setInterval() that lets us call a function repeatedly until we either tell it not to with clearInterval() or the user closes the window. We can use this function to automatically update a section of a page with current information from a SharePoint list/library or other data sources. A good example of why we would do this is retrieving the number of the tasks for the currently logged in user that are past due. By wrapping an AJAX request to our CAPS service in a setInterval() function on a frequent interval (say every 60 seconds – 60000 miliseconds), we can unobtrusively and asynchronously update a past-due task notification on our custom page.

After our page loads we simply make a call to some custom script with setInterval() like this:

setInterval(getPastDueTasks(currentUser), 60000);

What we are doing here is calling our function  - getPastDueTasks(currentUser) – that makes our CAPS call to our task list using AJAX. Because we set the interval to 60000 milliseconds, our task list will be polled every minute. On success, our AJAX request will update an object on our page with the number of tasks that are past due and show a large red exclamation point if there are any. Since we’ve also made the object a hyperlink, the user can bring up the list of past due tasks so they can take action on them.

This is just on example, but I know you all are a creative lot so have fun with this and keep building.

Easy RegEx Find and Replace in Notepad++

Previously, we’ve blogged about customizing the Toolbar within Notepad++ and, in my case, the benefit in doing so was to add some key functions to the Toolbar from the “XML Tools” plug-in I often use. In working with a lot of XML, XSLT and even HTML within Notepad++, I often have a need to find, or even find/replace, specific tags or script blocks. Notepad++ makes this easy with support for RegEx via the “regular expression” Search Mode.


Given the following XML snippet, let’s look at some use cases for RegEx finds:

<SetList Scope=”Request”>Tasks</SetList>
<SetVar Name=”Cmd”>ExportList</SetVar>
<SetVar Name=”XMLDATA”>TRUE</SetVar>
<SetVar Name=”ExtendedFieldsProperties”>0</SetVar>
<SetVar Name=”ExcludeViews”>TRUE</SetVar>
<SetVar Name=”ExcludeFields”>TRUE</SetVar>

In Notepad++, we could easily find our <SetList> element using this RegEx:


Then if we wanted all the <SetVar> elements, regardless of their Name attribute or value, we could use this RegEx:


If we wanted to be more explicit and say only find the <SetVar> element whose Name attribute began with an “E”, we could use:

<SetVar Name=”E.*>.*</SetVar>

Or perhaps we want to find all the <SetVar> elements where the text value is “TRUE”:


As you can see, these simple tricks could save you time & effort if wanting to find specific tags – or clean up using Find/Replace with a blank replace – using the regular expression Search Mode in Notepad++.

Sign In as a Different User in SharePoint 2013 – Lost and Found

SharePoint 2013 adds many great things but for those of us that develop & test solution and need to do so as different users, we’ve noticed the “Sign in as a Different User” option is missing from the Name/Welcome menu. To make matters worse, on some machines/browsers, even if you log out it will not let go of the last logged in user.

Now there are at least a few blogs out there which explain how to modify a SharePoint system file within hive (which, remember, can also be overwritten/undone by a Microsoft update) to add the option back to the menu globally. However, what if you don’t want the option in the menu for all users, all the time; or you don’t have access to the physical server, or don’t wish to modify said file? The good news is that there is a simple trick to force the “Sign in as a Different User” prompt to appear.

All you have to do is add “/_layouts/closeConnection.aspx?loginasanotheruser=true” to the end of your site URL and that’s it. It will log you off and bring up the Sign in prompt so you can login as a different user.

Displaying Code Snippets on a Webpage

Recently we were crafting a web page for use in one of our Training classes – we needed a simple, clean display of code snippets that users could easily copy/paste from. Our initial inclination was the classic approach of wrapping the snippets in <pre> and/or <code> tags, but this left plenty to be desired, not least of which was the loss of line-breaks when using the <pre> tag and spacing/indentions with the <code> tag.

Our eventual solution instead took the idea of using a <textarea>, which maintained the formatting we wanted, and simply styling it with CSS to create a more transparent effect. So this: BeforeCSS

…became this:


Using this CSS:

textarea.CodeBox {

In our case though, we had the added “gotcha” that browsers assume a relatively small box size for textareas; and worse, there’s no pure CSS method for setting the height of a <textarea> to just tall enough to display all the text therein. And even if you decide you’re not opposed to fixing a static height for each box, if you’re specifying the width as a percentage (100% in our case), your static heights won’t work if/when the user resizes their browser window.

So to account for that added behavior, we dropped in a little jQuery logic. Using a “setTimeout” function inside an event handler bound to window resizing, we can resize the height of all our <textarea> elements to be just the right size:

var ResizeDone;
$(window).resize(function() {
ResizeDone = setTimeout(RightSizeBoxes, 100);
});function RightSizeBoxes() {
$(‘textarea.CodeBox’).each(function() {

The reason for the “setTimeout” is because the resize event will fire for every change of the window size, in either direction, by even one pixel. We didn’t want to flood the DOM, or risk locking the browser, so by incorporating a “setTimeout” – in our case, for 100ms but you can use any value you want – we’re ensuring the user has stopped resizing the window for at least 100ms before fixing the <textarea> heights. Fast enough that the user doesn’t notice, but written so the resize event doesn’t fire potentially hundreds of times as the user changes their browser window size.

Windows 8 and websites that just don’t “click”

Picture this – your IT Department announces it’s time for a new round of machine refreshes and everyone is excited to get a new, shiny laptop. You get your new machine in hand and dive in to Windows 8; after all, a recent CNNMoney article noted “Microsoft claimed that its users would enjoy the experience of learning a new operating system” (full article here).

Everything is copasetic until you decide to install a second (or third) browser; sure IE10 is a great step forward, and my preferred browser for SP2013, though it can have some struggles in SP2010 (reference here). A large portion of the Windows user base though still prefers Firefox or Chrome.

And it’s there – at the convergence of those browsers, Windows 8′s penchant for encouraging touch-based interaction and website designers trying to optimize for touch – that an issue can arise. When using one of those “other” browsers, you find some of your favorite sites seem crippled; basic events, normally related to clicking on items or opening a menu just don’t happen. There’s no JS error in the browser, no indication as to what happened; the site just doesn’t seem to be registering your mouse clicks.

In our case, our new laptops do not have touch screens; but they do have one of the newer touchpads, the ones that support multi-touch & gestures. As I started digging – and getting frustrated that some of my most commonly used sites like my bank (USAA), Google Maps, the Amazon AWS console & others weren’t working – I was able to figure out that the problem was those sites were ignoring mouse-clicks in search of “touch” events on key elements within the site.

No worries though; once I had a diagnosis in hand, it was just a matter of finding & testing the appropriate fix. I knew I had to focus at the browser layer, because the issues were not seen when using IE10.

I started with Firefox – here are the steps I followed to get all those sites working again:

  1. Type “about:config” into the address bar
  2. Accept the warning (if you dare!)
  3. Search for “touch”
  4. If “dom.w3c_touch_events.expose” says ‘true’ under its value, double-click to change it to ‘false’
  5. If “dom.w3c_touch_events.enabled” says anything but ‘0’, double-click to pop an input box and set it to ‘0’
  6. Restart Firefox and enjoy you’re once-again functional sites

Then I went over to Chrome and applied a similar set of changes:

  1. Type “chrome://flags/” into the address bar
  2. Ctrl+F and search for “touch”
  3. Find “Enable touch events” and set it to ‘disabled’
  4. Find “Touch Optimized UI” and set it to ‘disabled’
  5. Restart Chrome and enjoy you’re once-again functional sites

That’s it! Sure, I’ve essentially disabled touch support in both browsers; but I don’t have a touch-screen anyway!? And that seemed to be the root of the issue; the browsers thought I did, by virtue of the super-fancy touchpad the laptop has. Not knowing whether the issue was Windows mis-reporting touch support (which, technically, I guess I do have but not in the way app developers would expect), the browsers mis-applying touch vs mouse events, or the web designers of the afflicted sites misusing touch handlers, I just wanted my sites to work again – and that did it.


Custom “Sign in as a Different User” button in SharePoint

Whether you’re working in SharePoint 2007, 2010 or 2013, you may have a need to create a custom “Sign in as a Different User” button within your site design. On a recent project for a client, we were creating a Customer Portal that was external facing and were using a custom masterpage that included removal of the native SharePoint ‘Welcome’ menu, where the “Sign in as a Different User” is normally found – or in the case of SharePoint 2013, not found at all.

There’s a simple way to wire up your own custom element that will trigger the same behavior as the “Sign in as a Different User” menu option. In SharePoint 2007, just wire up the following function call to any element within your layout/page:


Meanwhile, in SharePoint 2010 or 2013, the function call is simply to a slightly different application page:


That’s it! Now you can create any button, image, hyperlink or other markup you want that, when clicked, will pop the “Sign in as a Different User” prompt, then redirect back to the current page.

Toolbar (or Browser Add-In) trick for SharePoint and CorasWorks

Regardless of which version of SharePoint you’re using, there’s any number of menu options, Galleries, settings pages, etc that you need to access on a daily basis. Depending on where you are in a Site and what you want to do, the menu option you need might be two or three clicks away – with a page load/refresh between each.

There was a time when CorasWorks provided an Internet Explorer add-in called the “CorasWorks Toolbar” that made access to all these pages quick & easy, along with a great number of useful CorasWorks options. However, as browsers are ever changing and the memory required to run each add-in affects the overall browser experience, we’ve deprecated the Toolbar in favor of a much simpler & more customizable approach – bookmarks!


As you can see from the various options listed, access to all the common pages within SharePoint are exposed through the menu options listed. The “menus” are really just folders of Bookmarks that, once imported into your browser, appear within the browser’s Bookmark Toolbar. Some of the most click-intensive options like trying to Import a Web Part (clicking Edit Page, then Add a web part, then Import button, all with a refresh between each) are now single-click options.

To get all these options, simply download this ZIP file CorasWorks Bookmarks, unzip it and either Import the bookmarks within your browser or, for Internet Explorer on Windows, copy them to the Favorites Folder within your User folder. In a fast-paced work environment, like the rapid AppDev cycle us CorasWorks Consultants are used to, every saved click and page refresh is the best gift of all – the gift of time!

Adding custom Toolbar options to Notepad++

Developing applications for SharePoint runs an interesting gamut; you have Visual Studio for managed code, SharePoint Designer for customizing sites and even the browser for wiring up solutions and web parts with an AppDev platform like CorasWorks. But for the true, hard-nose developers out there, there’s one other popular tool we use – Notepad++ (Homepage).

If you’re doing any sort of client-side development and you don’t use Notepad++, give it a quick look. The popularity of it really stems from the ease & speed of it; no one claims it’s a premiere IDE but it does provide a great text editor for quick & simple editing of code, script, markup, etc.

One of my most frequent uses for Notepad++ is writing, cleaning and validating XML files; part of what makes Notepad++ appealing is a large catalog of plug-ins, including a very popular one called “XML Tools” (download here). This plugin has some nice features like ‘pretty formatting’ and linearizing XML but they’re buried multiple menu clicks deep, so I dug into the plugin repository and found the “Customize Toolbar” plugin (download here).

Now the magic to make it all work great; the Customize Toolbar plugin allows you to add buttons to the Notepad++ (NPP for short) toolbar for any menu option within your NPP installation, including those of other plugins. It does this via a file called “CustomizeToolbar.btn” that you can edit, even adding your own custom icons for toolbar options. Here’s how:

  1. In Windows Explorer, browse to “C:\Users\<<YourLogin>>\AppData\Roaming\Notepad++\plugins\config”
  2. Open & edit the “CustomizeToolbar.btn” file; if the file doesn’t exist, you can create it.
    Hint, you can use NPP itself to do this ;-)
  3. As an example, here’s how you would add the menu options from the XML Tools plugin I describe above…
Plugins,XML Tools,Pretty print (XML only – with line breaks),,MagicWand.bmp

Plugins,XML Tools,Linarize XML,,Repair.bmp

  1. You can add as many new buttons to the Toolbar as you want simply by putting each one on a new line
  2. Added Bonus – Create/copy any custom icons you want into the same folder listed in Step 1 and reference them as the last comma-delimited parameter like I show above


At CorasWorks, we don’t just value efficiency and optimization in the solutions we deliver, but in the way we deliver them – and hopefully tips like these do the same for you!

Using IE10 With SharePoint? You Need This Patch!

If you’re running Internet Explorer 10, you may have noticed that your SharePoint environment isn’t responding in the way that you have come to expect.  It turns out, the issue isn’t with your browser!  Instead, the problem is with the server.

In short, because ASP.NET was created before Internet Explorer 10 was expected.  ASP.NET has a file that tracks browser versions in order to know how to respond when the web pages are loaded.  Unfortunately, this file (browser definition file) runs out with Internet Explorer 9.  As a result, your environment doesn’t know how to handle Internet Explorer 10 since it doesn’t recognize it as a modern browser type.

When Internet Explorer 10 hits a SharePoint environment, SharePoint treats the browser as if it is Internet Explorer 6.  This prevents many of the scripts used by SharePoint and CorasWorks from operating correctly.  This is a frustrating condition but one that can be solved.

Microsoft has issued hot fixes for the web servers.  The hot fix that needs to be installed differs depending upon the version of .NET installed on your servers:

The hot fixes perform two specific steps: they update the browser version files for Internet Explorer and Firefox (ie.browser and firefox.browser, respectively) to account for the newer browser versions.  That’s all they do!

CorasWorks is recommending the installation of this update within all of our customer’s environments.  We’re dependent upon SharePoint and it responding correctly to your browser.  As these hot fixes are so specific (updating the browser files), installing them is straightforward and worth the results.

Microsoft has identified ASP.NET to be the source of this problem:

To learn more, be sure to check out Scott Hanselman’s blog article on this issue:


Using JavaScript’s setTimeout() Method

By Michael Bradley, CorasWorks Professional Services Consultant

On a recent engagement I was running into performance issues in the customer’s environment when trying to use JavaScript to update a report client-side for a custom hierarchal KPI report that rolls up worst-case KPIs.  The customer only has Internet Explorer 8 in their environment and I quickly discovered that IE8’s JavaScript engine is notoriously slow as compared to the newer IE9 and IE10.   The problem was that the users would receive a “Stop script” alert every time they would try to apply a filter to the report, which would require a recalculation of the KPI indicators.

While not a complete game stopper since you can simply select “No” and let the script continue running, most users would select “Yes” to stop the script and return to the report.  Of course the report would be incomplete since the recalculation function had not finished its job of updating the report.  Add to this the delays and apparent slow performance of the report and a new strategy needed to be applied to the recalculation function of the report.

At the suggestion of a more seasoned solution architect on my team, I looked at leveraging JavaScript’s setTimeout() method to improve the report’s performance and the overall user experience.   The beauty of adding setTimeout() to my existing report and code was that it only required minor changes.   The first step was to wrap discreet sections of the report in a <tbody> tag.  This allowed me to pass smaller sections of the report to the recalc function instead of passing the entire report.  The next step was to make use of setTimeout() when calling the recalc function.  The syntax in my report’s script looks like this:

var t = setTimeout (recalcFunction(tbodyID),0);

or, more generically:

var id = setTimeout (fn, delay);

What’s going on here is that I am assigning the setTimeout() function to a variable ‘t’, that will store the unique ID for the timer.  Within the setTimeout() function I tell it to run my recalcFunction() with the id of the tbody tag that I want the recalc to update as a parameter and that I want to wait “0” milliseconds before doing so.  Adding this one line of code to the logic of the report after a user applies a filter to narrow the report’s results, greatly improved the performance of the report within IE8 resulting in a “win” for this solution.

Here’s another blog article that provides a more detailed explanation of how JavaScript timers work.