Wednesday, June 13, 2007

Issue with Starter Kit CSS on IE 6.0 and Safari

Torben Brams noticed that the Starter Kit help site has a cosmetic issue on some pages. Basically, any page throughout the starter kit that displays a menu and content column (no sidebar) and displays a sub-item overview drops the content under the menu on IE 6.0 (as shown below).

I verified this and retested the in Safari and found that it also has some issues with these pages.

To fix the IE 6.0 problem, I changed the #menu-and-content-sublayout-content width from 770px to 750px.

To fix the Safari problems I added a width of 95% to .subitem-overview. This has the side effect of making contact subitems in the sample site appear as a list of locations, rather than a table, but this is more consistant after all.

We will place this under known issues in the starter kit release notes, but you, as a reader of my blog, knew it first :o).

You can download the updated starterkit.css here, if you have already starter working with the starter kit.

Monday, June 11, 2007

Modifying the WebEdit Menu

The Rev. 070531 release of the starter kit improved the WebEdit floating menu. The changes, as described by the Release Notes, are as follows:

  • Unnecessary commands (such as Workbox, Publish, and Switch to Preview) removed from the WebEdit Floating Menu.
  • Change Password command added to the WebEdit Floating Menu.

Making such changes to the WebEdit menu is very simple. You don't need to work behind the scenes at Sitecore to make similar changes to your own site. This post describes how it was done.

  1. You need to start by logging into the Desktop user interface.
  2. Next switch to the Core database (this is where the Sitecore user interfaces are defined).

  3. Now open the Content Editor, locate the /sitecore/content/Applications/WebEdit/Toolbar item, and open it to reveal its children.
  4. To remove commands from the menu, simply delete them.
    Or, if you want to be more sophisticated, you can use security settings to decide which roles or users should be able to "Read" the command. Sitecore already does this by assigning Read access for Delete command to the Sitecore Client Authoring role.
  5. To add your own command, copy one of the other commands or create a new item based on the /sitecore/templates/Toolbars/Toolbutton template.
    To create the Change Password field, we set the following values:
    • Click: security:changepassword
    • Header: Change Password
    • Icon: Network/16x16/key1.png
    • ID: Change Password
    • Tool tip: Open the Change Password wizard.

"Right! OK, that seems very simple," I hear you say, "but I want to create a command to do something else, like offering sorting commands or calling my own method."

Good point. Knowing how to create one specific command is just a bit of trivia. What you really want to know is how to create any command, right? Teach a man to fish, and all that.

Creating General Commands

In order to create general commands, you need to know how Sitecore interprets the various field values and how you can choose appropriate values for what you want to achieve. Let's take them one at a time, shall we?

  • Click
    To find an appropriate value to place here, it helps to be a bit of an explorer, especially if you want to provide a command that already exists elsewhere in the user interface.
    A good approach is to locate the functionality you want to mimic. This will provide clues for how to implement the functionality in the WebEdit menu (or anywhere else, for that matter).
    For the Change Password feature, for example, we know that this functionality already exists in the Control Panel, on the Preferences page, and sure enough, under the /sitecore/content/Applications/Control Panel/Preferences item, we find a Change Password item with a Click field. We just copied the values for this field into the Click field in our new WebEdit Toolbutton.
    If you want to call your own code when someone clicks on the method, rather than some code that Sitecore has provided, then you'll want to add a command element to the [SitecoreRoot]/Website/App_Config/Commands.config. This is how the security:changepassword value works. In fact, if we have a look in the commands.config file, we'll find this line:
    <command name="security:changepassword" type="Sitecore.Shell.Framework.Commands.ChangePassword,Sitecore.Kernel"></command>
    This tells Sitecore to call a the Execute method of the Sitecore.Shell.Framework.Commands.ChangePassword class, which has been built into the Sitecore.Kernel.dll. If you wanted to call your own class, say MyCompany.MyNamespace.MyClass, you'd create an Execute method in that class that accepted a single parameter (here's an example method signature):
    public void Execute(Sitecore.Shell.Framework.Commands.CommandContext CommandContext)
    Then add whatever code you like. Most likely, of course, whatever code you like is most likely out of the scope of this post.
  • Header The header field holds the text displayed for the button. No magic here. Just type whatever you like.
  • Icon
    Sitecore provides thousands of "themed" icons. By "themed" I mean that we provide them in multiple standard sizes, such as 16x16, 24x24, 32x32 and so on.
    When I want to find an icon, I use the Windows File Manager to view the [SitecoreRoot]/Website/sitecore/shell/Themes/Standard folder and its subfolders. The icon files are grouped into various sub-folders, like Business and Network, which roughly describe the kind of images you'll find. Under each sub-folder is an additional set of sub-folders which correspond to the size of the icons it contains. I use 32x32 and turn on View Thumbnails when searching for useful icons.

    By default, whenever Sitecore requests an icon, you can provide a relative path, like networks/32x32/key1.png, rather than typing the full path starting at /sitecore.
  • ID
    Just provide something unique here.
  • Tool tip
    This is optional. It just provides flyover help for the command.

There are other fields as well, but most of them are self-explanatory. If you're not sure what one does, though, just experiment a little. If you change one field at a time, you can usually work out on your own what a field does just by looking at its effects on the WebEdit menu.

But then, you may be wondering, how do I "publish" my changes? No need, as soon as you save your changes, you will have updated the WebEdit menu. You can even run WebEdit while viewing the Core database, you don't have to switch back to the Master database every time you want to test something.

Of course, don't forget to switch back to the Master database once you are done!

That's it for this post. I hope you found it informative!

Wednesday, June 6, 2007

Starter Kit Update (Rev. 070531)

It's only been about a week and a half since the initial release of the Small Business Starter Kit, and we've already released an update!

But don't worry, this will not be a regular event. We just happened to get some great feedback after a few users got their hands on the kit and thought of a few additional changes to sneak in since we would be doing a new release anyway.

The result includes a much nicer design for the documentation / help site, for example, and the default site itself now has a slightly cleaner design. If you already downloaded the original release (rev. 070524) of the starter kit and have begun working with it, we've created an upgrade package so that you don't have to start all over again. If you're in this camp, I'd suggest the following approach:

  1. Make a complete backup of your site database and files (just in case the upgrade package fails or overwrites something you hadn't expected, since there is no way to uninstall it).
  2. Download the upgrade package and install it using the Installation Wizard available in the Sitecore Desktop user interface.
    1. If all goes well, you're done!
    2. If you ran into problems:
      1. Restore your site from your backup.
      2. Create your own package including your Home item (not including subitems), plus each subitem (except for the Standard Items folder), plus any media library entries you may have created.
      3. Install the newest starter kit.
      4. Install your package in the new starter kit installation.

Hopefully the simple upgrade will work fine. Let me / us know about your experiences.

I hope to post some "behind the scenes" explanations of some of the fixes, as they will give readers some insights into how the site works, so stay tuned!