I am very happy to announce that today I’m officially making my project named ImportanTweet available on the web!

The idea behind ImportantTweet is to show the tweets that are important to you so if you follow a considerable number of accounts on Twitter and it becomes difficult to keep track and you feel like you miss on tweets you find interesting, IT is the tool for you.

IT uses an engine that evaluates the latest tweets in your home stream and through its algorithm attempts to display tweets in the order it thinks will be most important to you rather than by chronological order, allowing you to quickly find the tweets the matter most to you.

If you’re like me, and follow over a hundred accounts on Twitter, it becomes very difficult to read every single tweet that passes through your stream. Even with your favorite Twitter client open at all times it’s not always possible, you may be in a meeting or on a plane or changing your daughter’s diaper and those important tweets will simply go by never to be seen again…

That is why I built ImportanTweet, so I don’t miss as much on Twitter as I have up until now. Of course IT is not perfect (yet) and it is going to be a learning experience both for me and the tool as I will be working on improving it.

BETA

Today I am releasing IT in beta (version 0.1) and in limited trial mode so it will not be open for everyone just yet. I will be sending invites to a few people to begin testing and collecting feedback and hopefully  soon will be able to improve and make it completely open for everybody.

Browser Compatibility

To make the tool as useful as possible I’ve made sure it works well on all major browsers: Firefox, Chrome, IE as well as on mobile devices such as iPhone, iPad (iOS 5) and Android (2.3). so you can use it on your prefered device at all times.

Looks

This is how the site looks like:

I’ve attempted to give it a clean and simple design so the focus remains on the tweets and nothing else.

Teach IT

The bar at the top of the page contains a few options, click or hover over it to show them. Click the button to show the information which contains explanations about these.

The most important option is the word-selection mode which lets you click on any word within the tweets and store it as an “Important Word” which will let the engine know that you are interested in future tweets that contain these words.

You can also click on the avatar photo  of each user displayed in the list of tweets to promote or demote that user, this will tell the engine to make tweets from this user more relevant or less.

Getting Started

So ImportanTweet is starting out today and will continue to evolve. There are plenty of things I plan on adding and improving so make sure to come back here for updates and check out ImportanTweet.com and let me know what you think. You can comment here or send me an email at contact@importantweet.com.

I looked online and found a pair of very nice white-gold earrings that I had hoped she will like on Overstock.com,  a site I had heard good things about and thought is a reputable brand that I could trust. The fact that they had online chat on their site bolstered that feeling as I’m a LivePerson employee I can now recognize and appreciate the value of live chat on a retail site. Overstock is not a LivePerson customer by the way (perhaps that should have tipped me off).

I have ordered the earrings on December 23rd, 2011 and of course I knew they will take some time to arrive, after all it was just before Christmas but that was fine with me, I had hoped they will arrive a few days after the new year.

After they did not arrive for a while I looked at the confirmation email I received and used the tracking link they provided, this took me to the DHL tracking site which very “usefully” told me it couldn’t find the details for the tracking number. I thought to myself, alright, I will try in a few more days, surely it will appear soon.

So I have waited some more and still nothing, so a few days ago I contacted Overstock through their online chat. They kindly told me to wait 7 days (!) longer before contacting them again if the earrings hadn’t arrived by then. So I’ve waited a few more days until yesterday when the DHL site still couldn’t find the tracking details. I had resolved to contact Overstock again today even though it wasn’t 7 days yet and demand some explanations. Luckily, this morning the package with the earrings arrived.

Oh joy! I thought to myself, finally, the earrings arrived and even before its time for my daughter to attend college. Gladly I opened the package and was very (very) surprised to find that they have sent me the wrong earrings, the ones I ordered were suppose to have a clear stone, what they sent were (disgusting) lime green!

So, I patiently waited for the overstock.com reps to come online today so I can demand they replace the earrings at once and hopefully give me some kind of compensation after such a terrible shopping experience.

This afternoon I started the chat and after apologizing the representative told me that all he could do for me is send me instructions on how to send the earrings back and receive a refund, if I wanted to actually receive the earrings I wanted I would need to order them again. When I told the rep that I was surprised they don’t offer any kind  of compensation he told me that they simply can’t offer anything to an international customer. So they can take orders from international customers but not compensate them when the blunder horribly.

So to summarize:

• Ordered earrings 3 weeks ago
• Paid a lot more for shipping costs because I’m an international customer
• Waited for 3 weeks for earrings to arrive
• While waiting had no proper information on when they will actually arrive (not sure whos fault that is, overstock or DHL)
• Overstock when contacted couldn’t tell me more than wait for more days, 7 days!
• When finally earrings arrived they were the wrong ones!
• I need to ship them back and get a refund (that for some reason is 70 pence less than what I paid)
• If I want the earrings I actually paid for I need to go through the whole process again

In short, I will never shop at overstock.com again, not because they’ve made a mistake with the product they sent, although that’s already infuriating but these things happen. It’s because their customer care is seriously lacking. The reps I chatted with were friendly and sympathetic enough but hardly went out of their way to help and as an international customer I feel I’ve been completely neglected by their customer care that apparently doesn’t value me the same as an American customer.

Throughout the overstock site and even the chat they refer to me as “Valued Customer” but its one thing to say it and quite another to actually mean and behave like you mean it! As far as im concerned, they have done the bare minimum and nothing more, this is not a brand I would like to have any more dealings with.

Just for comparison, a couple of weeks ago I returned a jar of Pesto sauce to Sainsbury’s  (UK Supermarket) that costs around 2 pounds because it went bad too quickly, not only did I receive my money back, I also received a 5 pound voucher! More than 200% compensation on top of the refund…

Very interestingly I just received an email asking me to fill in a survey to help Overstock advance their “worldclass customer care“. I think they need to advance quite a lot before they can call their service that. Dont worry, I will let them know!

Below is the full transcript from my last chat with overstock:

Cody: Hi, my name is Cody. How may I help you?

Valued Customer: hi

To do that I need to call the fadeIn and fadeOut jQuery methods in sequence. This can be done easily because fadeIn accepts a callback as a second parameter which will be called when the animation completes.

Easy as it is to do I still find it annoying that i have to call two separate methods for an action i wish to be done as one so naturally since it is so easy to extend jQuery I wrote a little extension that does just that.

Here is the code:

(function ($)
{
	/*
 This is a shortcut method for jQuery that does a fade In and then a fadeOut on the selected element(s)
 It accepts the length of the In animation, the length of the Out animation and a handler to be called when both animations completed 

 Yoav Niran (http://wordpress.yoavniran.com)
 */
	var defaultDur = 1000;

	$.fn.fadeInOut = function(inTime, outTime, callback)
	{
		var setDefaults = function()
		{
			inTime = outTime = defaultDur;//set a default 1 second for animation
		};

		if (arguments.length == 0)
		{
			setDefaults();
		}
		else if (arguments.length == 1)
		{
			if (typeof( arguments[0]) === "number")
			{
				outTime = inTime;
			}
			else
			{
				callback = inTime;
				setDefaults();
			}
		}
		else if (arguments.length == 2)
		{
			if (typeof( arguments[1]) !== "number")
			{
				callback = outTime;
				outTime = inTime;
			}
		}

		var c = this;

		this.fadeIn(inTime, function()
			{
				c.fadeOut(outTime,
					function()
					{
						if (callback && typeof(callback) === "function")
						{
							callback.apply(c);
						}
					})
			});
	};
} (jQuery));

To use it you just need to add this code somewhere on your page or (preferably) in a separate JS file as long as its after the inclusion of jQuery and before you intend to use it.

Once you’ve added this code using the function is the same as using any jQuery method.

The new method that will be added to jQuery is called: fadeInOut and it accepts 3 (optional) arguments: inTime, outTime and callback.

The inTime is the duration of the fadeIn animation.

The outTime is the duration of the fadeOut animation.

The callback is a function to be called when both animations complete.

A few examples of using the fadeInOut method:

$("#myElement").fadeInOut(); //use 1 second default

$("#myElement").fadeInOut(500); //use half a second for fade in and out

$("#myElement").fadeInOut(500, 1500); //use half a second for fade in and a second and a half for fade out

$("#myElement").fadeInOut(500, 1500, function () { alert("finished"); }); //set in and out durations and a callback method

There are 4 ways you can call the method:

1) No arguments – The fade in and out will both be called with a default duration of 1 second.

2) One argument – If its a number it will be used as the duration for both in and out animations, if its a function it will be used as the callback and the 1 second default will be applied.

3) Two arguments – If both are numbers they will be used for the duration of the in and out animation respectively. If the second is a function it will be used as the callback and the first number will be used as the duration for both animations.

4) Three arguments – first two arguments will be used for the animations in and out duration respectively. The 3rd argument will be used for the callback.

You can easily change the default duration time by changing the value passed to the “defaultDur” variable.

Hope you find it useful.

With this update to the helper I’ve included two major additions to functionality.

The Tool Base

Already from the first version of the Helper I implemented several tools to accompany the useful information the helper exposes. These tools are represented using the buttons at the bottom of the helper:

Quick reminder, these tools are:

1. Rename – quickly rename an item without having to open its editing dialog.
2. Goto – quickly navigate to an item using its TCM URI
3. Quick Folder / SG – quickly create a new folder or structure group by supplying the title (and directory) alone.
4. Batch publish – batch items to be published at once regardless of where they are stored in a publication.

Up until now the tools’ code was embedded into the Helper’s script so separating them would not have been an easy task. With the previous version I’ve made it possible to disable the tools using the Extensions Manager configuration interface.

This time I finally got to achieve something I wanted to do already from the start which is to completely separate the tools from the helper’s implementation so its first, very easy to remove a tool if needed and secondly, and mainly to allow the creation of new tools without any changes to the existing code.

Now this is the case, all of the existing tools are implemented as individual objects and can easily be added and removed simply by modifying the extension resource’s XML configuration:

As you can see in the configuration snapshot above, each tool is now implemented in its own JS file.

In order to implement a tool you will need to inherit from a base class I include with the helper called: Extensions.ListQuickHelper.ToolBase.

To do that in your Javascript file you will need to add some specific lines to the constructor of your tool class:

Type.registerNamespace(“Extensions.ListQuickHelper.Tools”);

Extensions.ListQuickHelper.Tools.NewTool = function Tools$NewTool()
{
Tridion.OO.enableInterface(this, “Extensions.ListQuickHelper.Tools.NewTool”);
this.addInterface(“Extensions.ListQuickHelper.ToolBase”, ["NewTool"]);

//additional code for the constructor goes here…
}

Following the OO conventions of the GUI framework, you use the “addInterface” method to implement the ToolBase class and using the second parameter you specify the name of the tool. Its important to do that and choose a unique name.

There are a few methods you will need to override in your implementation of a tool. These are:

initialize – In this method you call this._setEngine passing the engine object which is passed to the initialize method. You can also register your tool’s configuration values with the Extensions Manager using the this._addConfigField method.

show – This method is called whenever the helper is shown, typically when an item has been selected in the list view, you can implement your logic to decide whether to show the tool’s button or not. You can use the props object passed to the show method which has the following properties: ItemType, ItemId, ParentType, ParentId, IsMulti.

_helperHtmlLoaded – This method is called when the helper’s engine loads the HTML for the helper interface.  this is the point in which you should load the HTML for your tool. For that there are two methods available on the base class: _registerToolHtmlFromUrl or _registerToolHtml, the former accepting a URL of a server page containing the needed HTML, the  latter accepting a HTML string literal.

If your tool requires a button, which in most cases it will, you should at this point also call the _registerToolButton method which accepts a few parameters: Title, Id, path to image, function to handle click event and lastly, the position (0 based) in which to insert the button.

This is how a basic handler will look like:

$lqht.registerTool(Extensions.ListQuickHelper.Tools.NewTool);

Without it the tool will not be added to the helper.

There are few more methods on the base class which may be quite useful, you can have a look at the 5 tools that come with the helper for some concrete examples. Now some of you may say; “5 tools? but you only listed 4 earlier!” To this I say: You are absolutely correct in your arithmetic objection as this brings us to the next topic:

The Project Info Tool

A few weeks ago, Frank (@puf) ran an idea by me: wouldn’t it be nice to have a similar feature in Tridion to the “readme” reader in Github:

Github relies on the file name (“readme.textile”), if it finds one it will simply show its content on the project page so the creator of the project can add some information there. This is a very handy feature and one that can also translate very nicely to Tridion so a folder or structure group can define its own “readme” text to show some useful information to editors or explain the purpose of the organizational item.

Frank had the idea of implementing this on top of the List Quick Helper which I immediately liked (unsurprisingly). So I’ve set to work on this little feature and this is the result:

As you can see, the information is loaded into the helper’s interface beneath the typical information about the selected item. The information is retrieved from the metadata of the folder in this case but can easily be found on a Structure Group as well.

When minimized the project info becomes another button in the tools bar:

I’ve implemented this feature as another tool(the 5th tool) which was fairly easy to do after building the ToolBase. This tool does require the Extensions Manager as it depends on some configuration:

The first option is whether to look for and show the project info, default is “no”. The second field is whether to continue looking for project info in a parent org item when none is found in the current parent, default is “no”. When this is enabled, the tool will continue to look for the info up to and including the current publication.
The third field is the name of the metadata field that will contain the actual text for the info. This field can be included in any metadata schema that is attached to an organizational item such as a folder, structure group or publication.

Frank and I are looking forward to see how the community receives this new feature and how it will make use of it.

download

The new version of the helper with these new features can be downloaded here.

On a Sad Note…

With a sad heart Im finishing this post as this may be the last one I write about Tridion, at least for the foreseeable future and at least on the more technical side of things.

August is going to be my last month working for SDL Tridion. I will be moving to new challenges soon. Hopefully these will give me enough chances to continue blogging about programming and technology which I very much like to do. Unfortunately, building GUI extensions will probably not get a primary spot in my life from now on.

For my English readers, I apologize but no translation for now… Im not sure if I can do this poem justice in translation. The title I can loosely translate to: “How do we Part“.

Hope you like it.

~ איך נפרדים ~

איך נפרדים

איך אומרים להתראות

כשאין עוד פעם עבורה לקוות

איזו מילה לסיום בוחרים

איך נפרדים ופשוט הולכים

איזה מגע בוחרים, איזה ליטוף שומרים

איזו דמעה מנציחים

?איך נפרדים

הגזע שעמד כה זקוף

ועכשיו הרוח מטלטלת ללא מרגוע

הגזע שעמד פעם והגן

שטמן בחובו נסיון של שנים וידע

עכשיו נותר אבוד ומסכן

הוא זה שהראה את הדרך

כעת איבד דרכו בחשיכה

כשעבר זמנה של השקיעה

.והאדום הפך שחור

איך נפרדים

מתי את היד מניחים

איך עוזבים ולאחור לא מסתכלים

איזו פעימה פשוט מחסירים

איך לא נופלים, איך ממשיכים

?איך נפרדים

אולי עם חיים חדשים

גרעין תקווה קטן מבטיחים

כששוב זמנה של זריחה מגיע

הצבעים חוזרים ללבלב

והכאב והשמחה מתערבבים בלב

אולי להתחלה חדשה מקווים

לפריחה מחודשת מייחלים

,אולי ככה

.נפרדים

Written: 20/07/2011, Palma de Mallorca, Spain.

So here is my latest extension available for you to enjoy…

With 2011, the GUI received a new breadcrumb control which is a very useful way to quickly orient yourself of where you are in the system and making it easy to climb up the specific hierarchy you’re currently drilling through.

Of course, those of us who use Tridion know that we usually jump from one location to another, spanning over different publications and sections within publications. For those cases, if we want to go back to a location we were working on before we need to locate it again in the tree, which can be quite a hassle. Especially in large environments.

So my extension will hopefully make it even simpler to work within the GUI in the manner I just specified.

This extension adds 2 new buttons to the GUI right next to the breadcrumb. The buttons mimic the behavior of the browser keeping track of the places(folders, structure-groups, etc.) a user visits.

Its quite simple really. Anytime you click or navigate to a different location within the GUI a new entry will be added to the history list. When you click the back button you’ll be taken to the last place you visited and the entry will be moved to the forward list so you can go forward as well by clicking the  button. Just like in the browser.

By right clicking on one of the buttons you will be able to see the entries stored in either the history or forward lists:

As can be expected (at least I think it can), the Navigation History extension makes use of the Extensions Manager to control some of its behavior.

The extension lets Administrators disable the functionality if needed so it will not be loaded and also control the number of items stored in the history list. By default this is 12 items. Don’t worry if you don’t have the Extensions Manager available, this extension will work without it just as well.

As you may have noticed the Navigation History is not actually an extension on its own but instead I’ve made it a part of the List Quick Helper extension.

Download

If you’d like to take this extension for a spin, the code can be downloaded here.

Update: A newer version of the helper is available on this page.

The helper loads within the list view of the main Tridion 2011 GUI and shows additional information about the selected item in the list so there is no need to open a new dialog window just to see the schema being used by a Component or the directory name of a Structure Group just to name a couple of examples.

When I released it the first time I considered it to be a beta as it was a little rushed. Today Im happy to announce that the Helper is all grown up now and at version 1.0, boasting a host of new features and improvements.

New Features

1.

A new slide/push feature lets you make the helper slide down so only its top is showing above the fold, so most of the time the list items are not hidden by the helper. Hovering the cursor or clicking on the helper will make it show again until the cursor leaves the helper’s surface.

2.

Complete integration with the Extensions Manager lets both normal and administrator users control different aspects of the extension.

Here are the options exposed on the Extensions Manager:

• Administrators can determine which tool is available or not out of the existing set: Quick Folder/SG Create, Rename, Goto, Batch Publishing.
• Administrators can choose which groups of users in Tridion will the extension be available to.
• Per user option determining whether the Helper will be turned on or off by default.
• Per user option determining whether the Helper starts minimized.
• Per user option determining whether the Helper starts in slider mode.
• Per user option determining whether the publish batch will be cleared after sending items to be published.

By the way, the extension will work just fine if the EM isn’t available with all features enabled.

3.

With the first version I added the batch publish tool to the Helper which I understand people like allot. One of the things that bothered me about it though was that the Helper only supported a single item select which meant only being to able to add a single item to the batch each time. Well, no more! The Helper now supports multi-select and currently this is mainly for adding multiple items to the batch.
In next versions I will add more info about shared values and properties between the selected items.

4.

I have now modified the helper so it also responds to clicks on the tree view and not only in the list. This also fixes the issue where the Helper will continue to show  the info of a folder or Structure Group which isn’t actually selected anymore.

5.

Added the namespace and root element values to the Helper data when a component is selected.

6.

This one is not particularly ground-breaking but thought it would be a nice touch; I’ve replaced the basic javascript dialogs with jQuery-UI ones:

7.

Additionally I’ve fixed some minor bugs along the way and have made some major code restructuring for better efficiency and better modularity of the code. I’ve also made sure there are no longer any hardcoded resource URLs where there shouldn’t be.

Deployment & Configuration

The extension works much as it did in the previous version, however, the big re-work of the code I’ve done to the extension included changing the file names used by the extension. The extension configuration itself has changed a bit as well. If you have already used the Helper before I suggest removing all configuration and files and deploying the new files (available at the bottom).

For a step by step explanation on how to deploy an extension such as this please see my previous article: Setting up a Tridion 2011 GUI extension in 8 Steps.

Make sure you have copied over all files from the /client/generic and /client/dependencies folders so you have their latest versions.

Very important to note that if you have used an Editor name that is not “2011Extensions” you will need to modify a single line of code in the /client/generic/utils.js file. In line 14 change the value from “2011Extensions” to the Editor name you chose.

Download

download the List Quick  Helper 1.0.

Update: A newer version of the helper is available on this page.

~ Memory of your Eyes ~

With the memory of your eyes
I can push a little further
I will manage another day
Remembering their glow I am better

A memory that pulls on me
A burning settling inside
The knowing that it is not too late
It’s the feeling of urgency I cannot hide

I recall their endless depth
The blissful long fall
I was so quickly captured
By their mesmerizing presence utterly enthralled

I’m heading back now
With ever increasing speed
The remembrance of light to guide me
That warmth I so desperately need

Im ready to fall again
Ready to give into their dark pools
These caves full of emotion
Rushing back without boundaries or rules

Just a few more days
Stretched into pieces of eternity
It holds me with countless ties
I take it to ease the burden of reality
The memory of your eyes.

Written: 18/05/2011, NJ, USA.

In my previous post I focused on the functional side of the Manager, the different features it has and the visual interaction.
In this post I’d like to focus on the programmatic side – how should an extension creator use it.

Registering an Extension

The main interaction with the Manager is done through the ‘Client’ class which encapsulates the functionality an Extension will need to register fields and use values from the Manager.

To begin, you will need to create a new Client instance. The full name of the class is: “Extensions.Configuration.Client“ but it can also be accessed using the shorthand: “$$ec.Client”.

The constructor of the client expects an ID string which will be the unique identifier of your extension. You should choose the name before beginning and stick with it. Make sure to choose a unique name which will not likely be used by other extensions.

The first line is then:

var configClient = new $$ec.Client("MyUniqueExtensionName");

As a general rule it will be good to build your extension as if the Extensions Manager doesn’t exist. This will allow you to use default values for anything that could possibly be set by a user. Depending on your situation your extension may be installed on environments outside your control and so you cant be sure the Manager will be available there.

This is how you can test for the Extensions Manager before using it:
var extManager = (typeof ($extConfManager) != “undefined” ? $extConfManager : null);

this._configClient = null;

if (extManager) //check that the Extensions Manager is available!
{
this._configClient = configClient = new $$ec.Client(“MyUniqueExtensionName”);

//start using using the client here…
}

The next thing to do is call the init() method, This is an asynchronous method that will attempt to retrieve the definition and values for your extension if it was already registered. Even if this is the first time your registration code is run on an environment calling init() is still required. The good thing is that the code you need for the first run and any subsequent runs is identical.

init() must be called before any other method of the client instance!

Since init() is asynchronous, it expects a single parameter which is a callback method. The callback receives 2 parameters. The first; ‘definition‘ an object containing the definition of the extension’s fields as it was downloaded from the server. if this the first time no fields will be available. The second; ‘loaded‘ a boolean stating whether the extension definition was successfully loaded from the server or not.

So this is how the call to init() should look like:

var extManager = (typeof ($extConfManager) != “undefined” ? $extConfManager : null);

this._configClient = null;

if (extManager) //check that the Extensions Manager is available!
{
this._configClient = configClient = new $$ec.Client(“MyUniqueExtensionName”);

configClient.init(function (definition, loaded)
{
if (!loaded)
{
//definition was not loaded from the server, this is probably the first time!
}
}
}

If ‘loaded‘ is true, the definition of the extension has already been stored on the server and there is no need to add the fields at this point. If its false though, this is when you should be adding your fields.

To add a field you call the client’s addField() method. this method accepts 3 parameters: ‘name‘, ‘props‘, ‘options‘:

• name: The unique field name. No other field registered for this extension should have the same name. The name can include spaces but shouldn’t include special characters.

• props: This is an object containing the different attributes of a field. These are the different attributes:
  1. Type: One of the following: $extConfConsts.Types.TEXT, $extConfConsts.Types.NUMBER, $extConfConsts.Types.OPTION, $extConfConsts.Types.GROUPS, $extConfConsts.Types.COLOR.
  2. AdminOnly: Boolean. Whether the field should be accessed by a Tridion administrator user only.
  3. MultipleValue: Boolean. Whether the field accepts more than one value. (only OPTION and GROUPS)
  4. HelpText: String. Containing useful information describing the purpose of the field.
  5. DefaultValue: String. Containing a default value for the field.

Besides the Type attribute, all others are optional.

• options: If the type of the field is OPTION, this parameter will be expected to contain an array of key/value objects that will be used as the options for this field.

  For example:

[{ "key": "Yes", "value": "1" }, { "key": "No", "value": "0"}]

Once you’ve added your fields, you need to call the client’s create() method. This will commit the fields definition to be stored on the server.

create() receives an optional callback function parameter which will be called when the asynchronous task of committing the definition to the server has finished. the callback has one parameter which is a Boolean stating whether the commit was successful or not.

So tying all of this together will look like this:

Extensions.MyGreatNextExtension= function Extensions$MyGreatNextExtension()
{
Type.enableInterface(this, “Extensions.MyGreatNextExtension”);
this.addInterface(“Tridion.Cme.Command”, ["MyGreatNextExtension"]);

//************** Extensions Configuration Management **********************//
var extManager = (typeof ($extConfManager) != “undefined” ? $extConfManager : null);

this._configClient = null;

if (extManager) //check that the Extensions Manager is available!
{
this._configClient = configClient = new $$ec.Client(“MyGreatNextExtension”);

configClient.init(function (definition, loaded)
{
if (!loaded)
{
configClient.setTitle(“My Great Next Extension”);
configClient.setDescription(“This a <strong>great</strong> extension that does great things!”);

//** Users Fields
//add a simple text field
configClient.addField(“Text Field 1″, { “Type”: $extConfConsts.Types.TEXT, “HelpText”: “useful info about this field” });

//add a single valued options field
configClient.addField(“optionsField”, { “Type”: $extConfConsts.Types.OPTION, “Default”: “1″ }, $extConfConsts.OptionGroups.YES_NO);

//** Admin Fields
//add a multi valued group field
configClient.addField(“Show For Groups”, { “Type”: $extConfConsts.Types.GROUPS, “AdminOnly”: true, “MultipleValue”: true, “HelpText”: “Only show this extension for the chosen groups” });

configClient.create();
}
});
}
//************** Extensions Configuration Management **********************//
};

You can see that I’ve also used the setTitle() and setDescription() methods. These are optional but recommended to use as this is the information that will show in the Manager GUI for your extension. Without it the only thing that will be shown is the ID you’ve used to register the extension.

You will probably want to put all of this code in the constructor of the command you use for your extension. It is very likely you would like to use the values retrieved from the server as quickly as possible so the constructor is the logical place.

Fields Validation

The Manager comes with two simple validator methods for the number and color fields. These are global validators which means they will be used against fields of these types from all of the registered extensions. As an extension creator you can also define your validators for field types used by your extension.

To register a validator that for example limits the range of numbers entered into NUMBER fields you can do something like this:

//Example of registering a validator for an extension
configClient.setFieldTypeValidator($extConfConsts.Types.NUMBER, function (value) //validate number fields for this extension
{
if (value.length > 0)
{
var num = parseInt(value);
return (num > 0 && num < 10); //only allow numbers between 1 and 9
}
});

Currently validation is done at a field type level, not on a specific field. using the setFieldTypeValidator() method you pass the type of the field and your validating function. This function will receive the value entered by the user into the field. If the value fails the validation, the user will not be able to save their changes until they correct it so validation is successful.

Example of failed validation:

Registering a validator through the Client will only apply it to values entered for your extension. Note that if you register a validator of  your own, for example for the NUMBER type, the global validator will still be used in conjunction with yours.

You can also register your own global validator for a field type using the following method:

$extConfManager.setFieldTypeValidator(type, validator);

If there is already a global validator registered for this type this will override it and your validator be used for fields of this type from all extensions, even if youre not the one to build them so its preferable not to register global validators as a general principle.

Events

The Client raises a few events which you can hook up to from your extensions.

These events are:

• Initialized: Raised after the extension definition and values are loaded from the server. note that this event will be raised regardless of whether the definition and/or values are already stored on the server.

• Created: Raised when the the extension definition is successfully stored on the server.

• Reloaded: Raised when the extension’s values are returned from the server when the reload method
  is called.

Important Considerations

Adding Fields

It is important to keep your field names unique, when trying to add a field, the Client will check its existing collection of fields for a field with the same name. If that field can be found, the Client will log an error and will not store the added field even if it has different properties.
To be able to update a field that has already been stored on the server, you can either delete the definition (XML) file and refresh the browser or you can use the Client’s updateField() method which has the same signature as the addField() method.

Client/Server communication

An interesting fact to be aware of is that the Extensions Manager tries to send as little over the wire between the server and the client as possible. This means a few things; For example when the user clicks the “save” button, the Manager will only send the extensions that had their values changed.
Another important aspect to consider is that the Client will only send the extension definition if the fields properties are different from those received from the server. If they’re not different calling create() will not actually commit to the server

Using the Values

We have covered the first part which is how to define the fields for our extension. Now we’ll go over how to use the values the users enter into the Manager’s GUI.

There are two main methods for doing so, the Client’s getValue() and getValues() methods.
Both methods require a single parameter which is the name of the field as it was defined when creating it.

The value(s) of all fields are stored in an array. If the field you’re interested in has only one value or you’re only interested in the first value you can use the getValue() method if you’re interested in all possible values the field has you will use the getValues().

Notice that getting the value(s) for an Admin field is no different from a regular field.

If the field was not defined with a default value and the user hasn’t entered a value yet, the result of getValue() and getValues() will be null.

Getting the value(s) of a field would look something like this:

if (this._configClient) //only get value if Manager was available at the start
{
var textValue = this._configClient.getValue(“Text Field 1″);
}

As mentioned earlier, it will be a good practice to build your extension with the Manager in mind but not as a dependency so you should define default values in your code to be used if the Manager is not available and no values were to be retrieved from it.

Miscellaneous

There are a few other useful methods in the Client class I want to cover here:

getTitle() Retrieves the title stored for the extension if one was provided.

getDescription() Retrieves the description of the title stored for the extension if one was provided.

getFields() Retrieves the collection of fields that were added to the client using the addField() or updateField methods.

hasField() Expects a single parameter: a String with the name of the field to check. Returns true if a field with this name was added to the client or returned from the server.

reload() Reloads the values for the extension from the server. Expects two parameters: the first; a callback function to call when the asynchronous reloading has finished. The callback method will receive two parameters: the first; an object containing the extension definition and values. the second is an optional context object. the second parameter the reload method receives is an optional context(state) object which will be passed to the callback method.

isGroupsValueAllowed() A utility method that expects the name of a group field. The method will then check whether the current user is a member of one of the groups that were chosen as values for this field. A second optional parameter is a Boolean stating whether the method should skip the check if the current user is an administrator.

Sample Code

There are a few samples I included with the Manager that show how to register an extension. These samples can be found in the samples.js file. By default these are not used but can be enabled from the EcmCommand.js lines 30 and 31.

Download

The latest version of the Extensions Manager can be downloaded using the link on this page.

Traditionally, extensions for the most part are islands of functionality; code is typically hardly ever reused. This is something I’d like to improve. With the advancement of the Tridion framework and by following OO practices, it’s possible to create reusable code, frameworks and more, the sky it the limit really.

A few weeks ago I thought about customizing GUI extensions. As extensions mature it will make sense to allow Tridion users, whether administrators or business, the ability to make changes to extensions’ behavior, to turn functionalities on and off and more, without having to change the underlying code. This led to… *drumroll* … The Extensions Manager.

The Extensions Manager (extension) has two sides:

1. A programmatic interface (API) for extensions developers to leverage in order for them to both register their extensions so they appear in the Manager GUI as well as to retrieve the values set by the users.
2. A graphical user interface (shown above) to allow users to set values for the fields registered by the extension’s creator.

Meet the Extensions Manager

So let me give you the tour: …Through here you have the living room, over there is the breakfast nook and to the left is the conservatory which is just gorgeous during the summer… hmm… sorry! Wrong tour.

Let’s try this again. The Extensions Manager is packed with features, in this post ill focus on the functional side and in a separate article I’ll detail on the technical one.

The concept behind the Manager is simple; you’re building a great extension and you recognize that different users will need different options or perhaps an Administrator should be able to turn on the extension for specific groups of users while not for others, maybe your extension needs different parameters depending on the environment its running on.
Well, you have a few options then. You can leave the configuration stuff in your code, which will be easiest for you as an extension creator but not very user friendly. Since you are Mr (or Miss) user friendly, as we all are, you would like to build a way for users to customize your extension(s), right? But that will require another big development effort and introduce new complexities such as how should you display these options? How to persist them between sessions? And so on.
The good news is that there’s a third option. You may have guessed it by now, it’s the Extensions Manager! With a few lines of code you can register your extension, define the fields to show your users and Voila! You’re done.

Extension Configuration Fields

Field Types

The Extensions Manager comes with 5 types of fields: Text, Number, Options, Groups and Color.
The first 3 types can be seen in the following screenshot:

Nothing special here really, Text and Number are self-explanatory and Option means that you can pre-define the values that will be displayed using check-boxes or radio buttons.

Field type “Groups”:

The Manager will make sure to load all available Tridion groups so they can be listed for fields of this type.

Field type “Color”:

A nice utility field I decided to add to make it possible to visually customize extensions’ elements. I got the jQuery plugin for the color picker from:  http://www.eyecon.ro/colorpicker/

Multiple Values

Most types only support a single value, however, the Option and Groups fields can also be marked as multi-valued fields.

Single valued Option field:

Multi valued Option field:

The “All” option is added automatically by the Manager to make it easy for users to select all options.

Admin Only

It is possible to specify that a field is for Administrative use only and so can only be modified by Tridion administrators. The admin fields will be shown in the “Admin” tab of the Manager:

Default Value and Help Text

Defaults are pretty obvious; it is possible to define default values for fields registered with the Manager.

It is also possible to add help text for each field in order for the Manager to display it as a tooltip like so:

Validators

The Manager comes with one (global) validator for the Number field type simply making sure that the value entered to this type of fields is a valid number.

Developers can register their own validators for all field types per extension or globally for all extensions.

The Manager will immediately alert the user of an invalid value by changing the color of the field and adding an indicator near the extension title:

Interaction

Accessing the Extensions Manager is done through a button in the toolbar:

If all of the extensions registered to the Manager have only “Admin” fields, the button will be disabled for regular users and only be enabled for Administrators.

Save & Close Buttons

The Close button of the Manager is always shown to allow users to hide the Manager window at all times.

The Save button becomes available when a field value has been changed by the user. It will be disabled during a save operation.

Users can hide the Manager display even during a save or reload operation, these operations will continue in the background.

Reload Settings Button

Clicking the Reload button will retrieve the values stored for the currently showing extension from the server and re-apply them to the fields on the screen.

Tabs

There are only two tabs. “Settings” will show all of the fields that all users can access. “Admin” will only be shown to Tridion administrators and will contain fields which were set by the Extension creator to only be modified by administrators.

A very important difference between the two sets of fields is that the values shown in the “Settings” tab are stored separately for each user while the “Admin” values are stored in just one place on the server and a change done by one administrator will be reflected for all users. Therefore, the “Settings” values are Private and the “Admin” values are Global.

Extensions List

The list will always display all extensions registered to the Manager. The order in which they are displayed is the order in which the extensions are registered and therefore depends mostly on the order in which extensions were configured in the Editor configuration file and partly on the way the registering code is executed within the Extension’s implementation.

The list only expands one item at a time which includes the title and the description (if one provided). If no title was provided when the extension was registered, the ID property of the extension will be used.

Items in the list have 3 modes. “Normal”, “Pending” and “Invalid”. Normal is the state shown for the items in the above image and is the case when there are no pending changes.
Pending notifies the user that there are one or more fields that have been changed but not saved yet:

Invalid notifies the user that there are one or more fields that have been changed but failed the validation and so must be corrected before its possible to save:

Example

I chose a simple example to show the Manager’s capabilities. For my Item Xml Display I have registered a color field which will allow users to determine the background color of the display:

In just very few lines of code, users of the extension can determine for themselves what the background color of the overlay will be:

Manager:

Extension:

Manager:

Extension:

Even though this is a trivial example I think it shows the capabilities and the possibilities of the Extensions Manager quite nicely.

Installation & Configuration

First download the Manager here.

You may want to follow my 8 steps to configure a GUI extension first as the first steps are pretty much the same.

1. Place the editor folder on the server somewhere. I named my editor 2011Extensions but you may want to rename it.
2. Set up the editor in the same way explained in my previous article (mentioned above).
3. In IIS, create a new application pool named something like: “ExtensionsConfigurationManager”. Make sure its using .NET 4, in Integrated Mode and that the identity is an impersonation user, typically that will be the Network Service. You can compare that to the identity of the CME app pool.
4. Still in IIS, you will need to configure a new application for the extension. Navigate to the new editor directory in IIS and then reach the /server/ExtensionsConfigurationManager directory.  Right-click and select “Convert to Application”. You should achieve something like this:
5. In IIS, navigate to your new application and click on the “Authentication” icon, Make sure then that both Anonymous and Windows are enabled:
6. In file explorer: navigate to your editor folder on disk and then to the \server\ExtensionsConfigurationManager. Open the web.config file for editing and update the following:
   • Find: “ManagerConfigurationSection\Application\DataRoot” and change the value to a location which will be writable by the extension. This is the place where the Extensions Manager will create folders and the xml files containing the extensions’ definitions and values.
   • Find: “log4net\appender\file” and change the value to a location which will be writable by the extension. This is the file the logger of the server side will write to. In the “logger\level” element you can change the logging level. Most of the logging is done at Debug level besides errors of course. Only change to ‘DEBUG’ if there are issues with getting the Manager to work otherwise it will needlessly fill the log file up pretty quickly.
7. Go into the BIN folder in “\server\ExtensionsConfigurationManager” and copy “Yoav.Extensions.dll” into “<Tridion_home>\Web\WebUI\WebRoot\bin”.
8. If you chose a different name for your Editor you will need to do a quick change to the JS code. This is the only one: open for editing the following file under your Editor folder: “client\generic\utils.js”. in line 14 set the value of the ‘EDITOR_NAME’ variable to the name you have chosen:

this.EDITOR_NAME = “2011Extensions“;

Testing

To make sure that configuring the extension was successful I recommend performing the following checks:

• In your browser open the following url: http://<CME_host_name>/WebUI/editors/<Editor_name>/server/ExtensionsConfigurationManager/test.html. You should be able to see the message on that page.

• Next, open this url: http://<CME_host_name>/WebUI/editors/<Editor_name>/server/ExtensionsConfigurationManager/services/ExtensionsManagerService.svc
  You should see this screen:

• Finally, test whether the service is working with this URL: http://<CME_host_name>/WebUI/editors/<Editor_name>/server/ExtensionsConfigurationManager/services/ExtensionsManagerService.svc/json/GetExtension?name=Test
  This should result in a JSON response with these contents:

If these steps don’t work for you, follow the errors on the screen and in the log file to try and figure out whats going wrong. Please let me know if you’re having trouble with it as well.

I have tested the Manager on the big 3 browsers and it looks to be working on all. I saw some weird behavior with an older version of IE 8 but on a machine with the latest updates it seems to be alright. On Chrome 9 and 10 and Firefox 3.6 and 4.0 it seems to be working with no apparent issues.

Download

New! – version 0.3 can be downloaded here. This version includes a couple of bug fixes and some enhancements. See the included text file for more details.

The beta version (0.2) can be downloaded here.

Interested in learning how to program with the Extensions Manager? Follow this link.

As always I really appreciate any feedback you may have!