Templates and help, part two

This is post 2 of 2 in a series titled Template help fields

• Help! What does this template do again?
• Templates and help, part two

Last week I talked about an approach to displaying template-related help fields in Content Editor. The last week has been a bit manic, so I've not managed to spend much time on extending these ideas, but I have a basic approach to displaying similar data in Page Editor. Quick one today...

You can add an icon to the Page Editor ribbon in much the same way as we did last week for Content Editor:

The data for a button next to the "edit" and "preview" buttons goes at /sitecore/content/Applications/WebEdit/Ribbons/Chunks/Modes and is based on the "Large Button" template. As with Content Editor they need a command registered. However for the button we're going to create here we also need to set the ID field, as we'll need to know the HTML ID of the markup this creates later.

The command definition is similar:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <commands>
      <command name="testing:webedithelp" type="Testing.WebEditHelpCommand,Testing" />
    </commands>
  </sitecore>
</configuration>

					

Displaying the field help information from last week could be done by reusing the same code. Refactoring the markup and code from last week's help ASPX file into a user control is fairly simple, so I won't go over that. But in a sec we'll see that the UI code for rendering popups requires a Sitecore-specific control. Hence we need to wrap the user control up in a facade class:

public class HelpServerControl : Sitecore.Web.UI.HtmlControls.Control
{
    private StringBuilder _html = new StringBuilder();

    public string DatabaseName { get; set; }
    public string ItemID { get; set; }

    protected override void OnPreRender(EventArgs e)
    {
        HelpControl hc = this.Page.LoadControl("~/Testing/Editors/HelpControl.ascx") as HelpControl;
        hc.DatabaseName = this.DatabaseName;
        hc.ItemID = this.ItemID;
        hc.Initialise();
        using (HtmlTextWriter hw = new HtmlTextWriter(new StringWriter(_html)))
        {
            hc.RenderControl(hw);
        }

        base.OnPreRender(e);
    }

    protected override void Render(HtmlTextWriter output)
    {
        output.Write(_html.ToString());
        base.Render(output);
    }
}

					

This wraps up the User Control, passes through the settings required and outputs the HTML generated by the user control.

So the command class can make use of this to generate the data we're going to show and display it as a popup under the button. The ShowPopup() method from Sitecore's UI APIs can render some data into a popup:

This wraps up the User Control, passes through the settings required and outputs the HTML generated by the user control.

public class WebEditHelpCommand : Sitecore.Shell.Applications.WebEdit.Commands.WebEditCommand
{
    public override void Execute(CommandContext context)
    {
        context.Parameters.Add("itemTemplateID", context.Items[0].ID.ToString());
        context.Parameters.Add("itemDatabase", context.Items[0].Database.Name);

        Context.ClientPage.Start(this, "Run", context.Parameters);
    }

    protected void Run(ClientPipelineArgs args)
    {
        HelpServerControl hc = new HelpServerControl();
        hc.DatabaseName = args.Parameters["itemDatabase"];
        hc.ItemID = args.Parameters["itemTemplateID"];

        SheerResponse.ShowPopup("webedithelp", "below", hc);
    }
}

					

So in Page Editor we can now get the template help information to be displayed when clicking the new button:

Looking at this, I'm not sure this is quite the right data to display in this view. Potentially it might make sense to add an extra field for Page Editor specific help, since you can't tell which fields are visible for editing though this code. More thinking required...

↑ Back to top