Working with the Default Console Control

The ASP.NET version of the CMS 2002 Web Author is conveniently packaged within a user control. Many Web Author changes can be made by simply modifying this one control. The following sections explore a few examples of changes that you might want to make to your CMS implementation.

Changing Display Properties of the Default Console

In a CMS site, the Web Author console is exposed within a .NET user control. By implementing the console in this manner, the CMS development team has given users a great deal of flexibility over the presentation of the console. Simply by altering the user control, you can present the Web Author console in a different manner. The following example demonstrates how to make such an alteration.

Example: Altering the Border Color of the Web Author Console

If you have looked at the WoodgroveNet sample site, you have seen that the default Web Author console (Figure 30-2) is surrounded by a green border. Since it is likely that you are using a different color scheme, this is one of the most obvious changes that you might want to make. You can use this example as a basis for making a number of aesthetic changes to the Web Author console.

Figure 30-2. Web Author default console

NOTE: You can try any of these examples using the BOTS Consulting site.

To alter this border color, open a browser window and navigate to your CMS site (e.g., http://localhost/WoodgroveNet/). If you are using Forms authentication, log in as a CMS user who has rights to edit the page. Next you need to click the Switch to Edit Mode link. This will show the Web Author console. Notice the border color of the Web Author console. For example, the WoodgroveNet console has a green border.

If the CMS project is not already open, open it in Visual Studio .NET. For more information on this topic, refer to the CMS documentation ("Opening the WoodgroveNet Project in Visual Studio .NET"). In the Solution Explorer, expand the folder containing the DefaultConsole. ascx file. In the WoodgroveNet sample, this folder is called Console and contains the files used by the WoodgroveNet authoring console. Double-click the DefaultConsole.ascx file (e.g., C:\Program Files\Microsoft Content Management Server\Sample Data\WoodgroveNet\console\ DefaultConsole.ascx). This will open the file for editing. Click the HTML tab at the bottom of the window to switch to the HTML view. Before you alter this file, make sure you create a backup copy. Once you have created a backup copy, you can change the code that renders the Web Author console. For example, to change the border color of the control, you would alter the following code. Note that in the WoodgroveNet sample, this code starts at line 5.

Before:

 <table width='100%' border='2' bordercolor='green' cellpadding='5'> 

After:

 <table width='100%' border='2' bordercolor='black' cellpadding='5'> 

Once you are done, save the file DefaultConsole.ascx. Note that it is not necessary to build the project, since you have not altered the code-behind page. Go back to the browser window and refresh the page. You will see that the border around the console has changed color.

This is a simple example, but the example is a good one. By making this change, you can see that you have complete control over the presentation of the Web Author console.

Adding and Removing Options from the Console

Imagine the following scenario. The Web manager of the BOTS Consulting site decides that it is not acceptable for an author to move a Web page from one part of the site to another. This decision is relayed to the CMS developers who must implement this business decision. Changing the Web Author console makes it easy to implement this policy. The following example shows how to remove a link from the Web Author console.

Example: Removing a Link from the Web Author Console

This example shows a more substantial change to the Web Author console. Altering the functionality of the Web Author is tantamount to altering the CMS rights model or workflow. For example, you will now see how you can remove options from being displayed within the authoring console. By making a change like this, you are actually altering the rights of the CMS authors.

To make such a change, open a browser window and navigate to your CMS site. If you are using Forms authentication, log in as a CMS user who has rights to edit the page. Next you need to click the Switch to Edit Mode link. This will show the Web Author console. If the CMS project is not already open, open it in Visual Studio .NET. In the Solution Explorer, expand the folder containing the DefaultConsole.ascx file. In the WoodgroveNet sample, this folder is called Console and contains the files used by the WoodgroveNet authoring console. Double-click the DefaultConsole.ascx file to open it for editing. Click the HTML tab at the bottom of the window to switch to the HTML view. Before you alter this file, make sure you create a backup copy.

Once you have created a backup copy, you can delete the code that renders the link that you wish to remove. For example, to remove the Move link, you would delete (or comment out) this code. Note that in the WoodgroveNet sample, this code starts at line 105.

[View full width]
 <CmsConsole:MoveAction  runat="server">     <A  href="#" onclick="<%# Container.ActionJavascript %>;return false"  target=_self>         <%# Container.Text %>     </A><BR> </CmsConsole:MoveAction> 

Save the file DefaultConsole.ascx. Note that it is not necessary to build the project, since you have not altered the code-behind page. Go back to the browser window and refresh the page. You will see that the link no longer appears in the Web Author console. Based on this change, authors will not be able to move pages from one channel to another.

If you wanted to make a more selective change, you could simply check the current user's rights and then make a decision about whether to show or hide various options. The CMS API may not directly give you every check that you would like to make, but there are ways to get around this.

For example, if you want to check whether a user is an author, check whether the user has rights to create a page but not approve it. If you want a more specific check, you could create an object and only give your special user rights to that object. A good example is a hidden channel. Then you can check whether the current user has rights to that object. If the user does, then you have found the specific user that you are looking for. This method can be used to distinguish between CMS administrators and channel managers.

Changing the "Real Estate" of the Console

Altering the presentation of the console might suit some scenarios, but quite often it is not enough. Fortunately, this does not present a problem for the Web Author's flexible design. When a more in-depth change is necessary, you can make more drastic alterations to the presentation of the console. For example, if you do not want the console to take up a lot of space on the page, you could change the controls so that they use less real estate. Here are a couple of examples of custom consoles.

Example: A Dynamic "Drop-down" Web Author Console

This example shows how you can change your Web Author console so that it is presented as a drop-down list (Figures 30-3 and 30-4). This customization could use far less real estate on your page. Consequently, the CMS author will see little difference between the Published mode design and the authoring mode design.

Figure 30-3. The drop-down Web Author console collapsed

Figure 30-4. The drop-down Web Author console expanded

The following code shows the important elements of the drop-down version of the Web Author console. Dynamic HTML is used to catch change events within the Select tags. Each Web Author control is enclosed between one of these Select tags. The complete code for this example is available for download at www.awprofessional.com/titles/0321194446.

 <CmsConsole:Console runat="server" >       <script language="JavaScript"> function changeConsoleSelection(selection) {       var option = selection.options[selection.selectedIndex];       if (option.actionJavascript != null )       {       var actionJavascript = option.actionJavascript;       eval(actionJavascript);       } }       </script> ... <select onchange="changeConsoleSelection(this)"  NAME="dropDownConsole">   <option>Web Author Console</option> ... <CmsConsole:PostingStatus  runat="server">    <B>Page Status:</B> <FONT color="red">      <%# Container.Text %> </FONT> <BR /> </CmsConsole:PostingStatus> ... <CmsConsole:CopyAction  runat="server">    <option id=CopyAnchor actionJavascript="<%#       Container.ActionJavascript %>">    <%# Container.Text %> </option> ... </CmsConsole:Console> 

Example: Floating Web Author Console

This example shows another useful console modification. Instead of having the console tied to a particular location on the page, you may want to allow your CMS users to move the console around as they see fit. This example renders the Web Author console as a floating DHTML window (Figure 30-5). Authors can easily drag the control anywhere they wish.

Figure 30-5. A floating Web Author console

This is a popular console because it does not require any real estate on your page. If you already have a great template, you can add the console without having to make any changes.

The following code shows a small portion of the floating console implementation. This is the code that displays or hides particular elements within the console. This code is used to expand and collapse the control. The complete code for this example is available for download at www.awprofessional.com/titles/0321194446.

[View full width]
 <script language="JavaScript"> function OpenCloseDiv(divName){       if (divName.style.display == "none") {             divName.style.display="block";       }       else {             divName.style.display="none";       } } </script> <CmsConsole:Console  runat="server">       <DIV   ondblclick="OpenCloseDiv (editConsoleOptions)"> </CmsConsole:Console>