Creating an edit panel

The UI of editing pages can be extended to meet customer specific requirements. This article describes how to create an edit panel to a page type.

Settings and content panels

There are two types of edit panels.

  • Settings panels: Shown on the Settings tab when editing a page in back office.
  • Content panels: Shown on the Content tab when editing a page in back office.

Creating an edit panel

The following example demonstrates how to create an edit panel, display the parent page name in the panel, and edit the current page name when clicking the Save button.

Create an .ascx user control in the directory wwwroot\Site\CMS\Panels called SamplePageContentPanel.ascx and place the following code in it:

<%@ Control Language="C#" CodeFile="SamplePageContentPanel.ascx.cs" Inherits="Site.CMS.Panels.SamplePageContentPanel" %>
This is a sample panel.
<br />
TODO: place your controls here.
<br />
Parent Page:
<asp:Label ID="ParentPageName" runat="server" />

The code in the file should implement the IPanelData<WorkingCopyCarrier> interface. The following is a sample code.

using Litium.Foundation.GUI.WebControls;
using Litium.Foundation.ModuleExtensions;
using Litium.Foundation.Modules.CMS.Carriers;
using CMSPages = Litium.Foundation.Modules.CMS.Pages;

namespace Site.CMS.Panels
{
    /// <summary>
    ///    Sample panel to show edit mode content panel.
    /// </summary>
    public partial class SamplePageContentPanel : BaseUserControl, IPanelData<WorkingCopyCarrier>
    {
        #region IPanelData<WorkingCopyCarrier> Members

        /// <summary>
        /// Inits the input fields of the panel.
        /// </summary>
        /// <param name="value">Current working copy carrier.</param>
        public void InitPanelData(WorkingCopyCarrier value)
        {
            if (value != null)
            {
                // you may fetch the current page. (E.g. To get properties of the parent page)
                // and initialize the controls shown in the panel here.
                CMSPages.Page currentPage = CMSPages.Page.GetFromID(value.PageID, FoundationContext.Token);
                if (currentPage != null)
                {
                    var parentPage = currentPage.GetParentPage(FoundationContext.Token);
                    //check for null, because this page can be the top page which doesnt have a parent.
                    if(parentPage != null)
                        ParentPageName.Text = parentPage.ShortName;
                }               
            }
        }

        /// <summary>
        /// Saves the id of the selected override language id.
        /// </summary>
        /// <param name="value">Current working copy.</param>
        public void SavePanel(WorkingCopyCarrier value)
        {
            if (value != null)
            {
                //you may edit the working copy here.
                //example, change page name!
                value.ShortName += " Sample";
            }
        }

        #endregion
    }
}

Add the panel to a field template

Go to Settings > Settings > Page types and templates

Select the page type click Edit.

Edit_CMS_pagetype_and_template.png

In the panels section add a Content panel.

Add_panel_to_pagetype.png

 

Go back to your site and add a page of this page type. The panel should be displayed at the end of the page.

CMS_edit_panel_output.png

Is this page helpful?
Thank you for your feedback!