RedDot: Advanced Page Defintions

Page Definitions are great but what if we could expand them to allow the use of page references and even inheritance? Here's one approach to the challenge.
  
Background...
I love users but sometimes its best to keep things simple for them. Options are the enemy especially if they really don't use the CMS very often. Too many options can lead to mistakes and a general mess which requires someone to mop up and the users confidence is dented.

A good way to keep things simple is by using template pre-assignments and page definitions. I have seen many projects use this approach successfully, but, it can lead to multiple (but very similar) base templates which can become a chore to maintain with endless duplicate page definitions cascading off each.






Problem...
With these thoughts in mind, I started putting a new site together based upon the wonderfully simple 960grid css framework. Determined not to have multiple base templates but to still keep things simple for the user I experimented with page definitions a little deeper. The main problem I ran into was that you cannot assign references to page definitions.



Solution...
I'm not going to ramble on about why you would want or need to do this (it would take too long and I'm sure you will have your own opinions about it) we'll just move on to the how part...
With some basic jquery and knowledge of RQL you can achieve simple page referencing and much more...

Firstly you'll need an initialisation template for each reference (you assign this to the page definition in the place you want the actual reference to appear), here's one of mine:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<!IoRangeRedDotMode> <script type="text/javascript">     if (!rqlCommands)     {         var rqlCommands = [];     }       head(function() {     var params = {  "loginGuid": "<%infLoginGuid%>",                     "sessionKey": "<%infSessionKey%>",                     "pageGuid": "<%!! Context:Pages.GetPage(Guid:<%infPageGuid%>).GetElementByName(conLeftNav).Value[Int32:0].Id  !!%>",                     "linkGuid": "<%!! Context:Pages.GetPage(Guid:<%infPageGuid%>).MainLink.Id !!%>"                  };         var rqlCommand = { "SetReference": params };         rqlCommands.push(rqlCommand);           params = {  "loginGuid": "<%infLoginGuid%>",                         "sessionKey": "<%infSessionKey%>",                         "pageGuid": "<%infPageGuid%>"                      };         rqlCommand = { "Delete": params };         rqlCommands.push(rqlCommand);     }); </script> <!/IoRangeRedDotMode>

So what's it doing?
Two commands are being formed here and added to an array (There maybe several of these initialisation classes in one page all adding commands to the array).
The first is defining parameters to be used in our RQL to replace the instance of our initialisation page with a reference of the actual page we want.
The second is to delete our initialisation instance so it doesn't hang around in unconnected pages.
Don't worry about the head(function()); it's there because I'm using head.js, if you're using vanilla jquery it would be $document.ready() or similar.

At the bottom of our base template we include a javascript file to process the queue of commands. Here I'm using an AJAX (or SJAX to be more precise) call to a custom web service which in turn calls my RustyLogic RedDotNet library, you could of course call the RQL functions directly in javascript or any other language you choose.

Here is my version:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<script type="text/javascript">   <!IoRangeRedDotMode>     head(function () {     if (!(typeof rqlCommands === "undefined")) {             while (rqlCommands.length > 0) {                 $('#loading').replaceWith('<div id="loading" class="loading" style="width: 100%; height: 100%; top: 100px; display: inline-block; position:absolute; text-align: center; z-index:10000;"><p><img src="/cms/WebClient/App_Themes/Standard/Images/spinner.gif" />Please wait while page is initialised...' + rqlCommands.length + '</p></div>');                 var rqlCommand = rqlCommands.pop();                 ExecuteRql(rqlCommand);             }             location.reload();         }     }); <!/IoRangeRedDotMode>     function ExecuteRql(rqlCommand) {             $.each(rqlCommand, function (commandName, commandParameters) {                       $.ajax({                         type: "POST",                         async: false,                         contentType: "application/json; charset=utf-8",                         data: JSON.stringify(commandParameters),                         url: "/services/RustyLogic.asmx/" + commandName,                         dataType: "json",                                                   success: function (response)                         {                         },                         error: function (response)                         {                         },                         complete: function (response)                         {                         }                     });             }); }     </script>

When a new page is created in SmartEdit the queue is built and executed followed by a page refresh to show the changes to the user.

It's a simple example of what can be achieved but opens up many possibilities. It is easily expanded to allow inheritance from parent pages (I am using it to inherit top navigation when a child page is created).
This has resulted in a simple base class which can be used throughout the site and automation of page initialisation which means less for the user to worry about.

I hope you have enjoyed my first blog post,

John