Create an edit panel

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

Settings and content panels

There are two types of edit panels.

  • Settings panels: Gets shown in the Settings tab when editing a page in backoffice.
  • Content panels: Gets shown in the contents tab when editing a page in backoffice.

Create an edit panel

Following example demonstrate how to create an edit panel, display the parent page name in the panel, and edit the current page name when save button is clicked.

Create a .ascx user control in the directory wwwroot\Site\CMS\Panels called SamplePageContentPanel.ascx

And place the following code to 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 behing file should implement the IPanelData<WorkingCopyCarrier> interface. 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 pagetype. The panel should be displayed in the end of the page.

CMS_edit_panel_output.png

Is this page helpful?
Thank you for your feedback!