JavaScript, Node

Create Episerver Find index using Puppeteer

Currently working with many clients who utilise Episerver CMS to managed their content. Almost all of then use Episerver Find to index content.

Episerver do not provide an API to automate the creation of new indices. As I was messing around with Puppeteer and headless Chrome, I thought I’d knock up a tool to do this. You can find the code in my Github repo.

Using your favourite shell, clone the repo:

git clone https://github.com/ajrowland/create-episerver-find-index.git
cd create-episerver-find-index

Install dependencies:

npm install

You’ll need to create a developer account for Find. Once this is done, you can create an index with the following:

node createindex.js --username [username] --password [password] --indexname [indexname]

The script returns the configuration for the newly created index, or an existing index if it already exists.

Ultimately I hope to use something like this within a continuous integration, or deployment pipeline, to make certain a valid index is available for the application.

Hope this helps someone.

JavaScript

TypeScript Sublime Text integration

Something interesting has happened in the world of JavaScript development. Of all people, the folk at Microsoft have developed TypeScript.  If you’re in to such things, I don’t need to explain further.  There is a Visual Studio 2012 plugin, but these days I’ve fallen in love with Sublime Text.  Here’s a quick howto on TypeScript development with Sublime Text, specifically on Windows 7.

First install the Node.js msi package.  Once installed, open a command prompt and type the following to install the TypeScript compiler:


npm install -g typescript

Now grab the Sublime Text syntax hightlight definition file from MSDN. Open the zip and copy the typescript.tmplanguage file to your Sublime Text user packages directory. Mine is located in:


C:\Users\arowland\AppData\Roaming\Sublime Text 2\Packages\User\

Now open Sublime Text. Select Tools -> Build System -> New Build System. Paste in the following:

{
"selector": "source.ts",
"cmd": ["tsc.cmd", "$file"],
"file_regex": "^(.+?) \\((\\d+),(\\d+)\\): (.+)$"
}

Save this file. Now you can create a new JavaScript file, and save with the .ts extension. The editor will highlight TypeScript code, and allow you to compile to JavaScript by pressing Ctrl+B.  The build process will create the compiled JavaScript file in the same directory as the source TypeScript.

JavaScript

jQuery UI Date Picker control issue with .Net

Aye, I do whitter on about jQuery.  It’s ace.  The newly released jQuery UI is pretty special too.  One of the many great widgets is the Date Picker control.

I build many .net applications that require date entry, so I implement the Date Picker control often.  Unfortunately, there is a problem when it is used on a field that is validated using a .Net validation control.  Upon clicking on a date, I get the following error:

length is null or not an object

This only occurs when using Internet Explorer.  Currently, my only solution is to edit the source code.  Locate the following code in jquery-ui.js or ui.datepicker.js:

inst.input.trigger('change')

Replace it with:

if (!$.browser.msie){inst.input.trigger('change')}

This prevents the change event firing in IE.

I wouldn’t normally advocate changing source code in this manner, as it makes future upgrades tedious.  Hopefully it will be addressed in a future release.

.Net, JavaScript

Using jQuery selectors to reference .Net controls

You place a control onto your page:

<asp:Content ID="Content1" ContentPlaceHolderID="Content" Runat="Server">
	<asp:TextBox Id="Firstname" Runat="Server" />
</asp:Content>

The output is rendered as:

<input name="ctl00$Content$FirstName" type="text" id="ctl00_Content_FirstName" />

In the example above, the disparity in the rendered id attribute occurs because the TextBox control has been placed within a Content control, as the Page object inherits a MasterPage.

So how can you robustly reference the control using client-side JavaScript, regardless where the control resides?  Using jQuery it’s fairly trivial:

var $firstname = $("[id$=FirstName]");

This little snippet makes use of the jQuery attributeEndsWith selector, as documented here.  Bare in mind that an array is returned, as any control with an id that ends in FirstName will be selected.

JavaScript

JavaScript event delegation

As I’ve mentioned previously I’m creating a dashboard to represent the components in the exchange that I work for.  Each component widget on the page has a number of events associated with it.  This has become less manageable, the more I add.  So I thought about using one delegate to handle all events, and pass on a component reference, and parameters to other functions.

A quick google led me to this article by Dan Webb.  Looks like a common technique.  Very useful article, though I needed to be able to pass parameters to the functions.  There may be a better to way to do this, but this is how I achieved it.
Continue reading