Try our conversational search powered by Generative AI!

Per Nergård
Apr 21, 2010
  6830
(0 votes)

Display the property name for developers in edit mode

For those of you that have read any of my previous blog posts may have noticed that I like things that make the daily life easier. So here is another thing I have had a need for and hopefully can be of use.

A thing that has been a royal pain since I started with EPiServer is all the times when coding and I need to know a property's name. At least for me when this need arise I’m usually in edit mode entering a value in the particular property I’m interested in.

I hate that I need to go into admin mode and check the property name. And since my memory fails me sometimes I need to do this way to often.

If I was using PageTypeBuilder this wouldn’t be an issue but there are lots of “classic” EPiServer sites out there.

From some earlier investigation I remembered that it’s the PropertyDataForm web control that is responsible for doing the rendering. I had an idea that  I could modify it through a page adapter. A bit of googling and I found a post form Andreas Hattestad where he hade done just that.

The PropertyDataForm has a public Itemplate field that we can assign our own template and thus change the rendering of the property's caption.

The result looks like this with  the property name in parentheses. I also added a feature so that if you click the property name it’s added to the clipboard for easy pasting in Visual Studio (IE only for now).

ExtrapropertyDetails

Here’s the code

using System;
using System.Collections.Generic;
using System.Web;
using EPiServer.Web.WebControls;
using EPiServer.UI.WebControls;
using EPiServer;
using EPiServer.Web.PropertyControls;
using System.Web.UI;
using System.Web.UI.Adapters;
using System.Web.UI.WebControls;
using EPiServer.Core;
using System.Configuration;
 
namespace EPiServer.Templates.Public
{
    public class PropertyDataFormAdapter : PageAdapter
    {
        #region Fields
        const string copyScript = "<script>function copyToClipboard(s){if( window.clipboardData && clipboardData.setData ){clipboardData.setData(\"Text\", s);}}</script>";
        #endregion
 
        #region Classes
        /// <summary>
        /// Custom captiontemplate to change the caption rendering for the properties
        /// </summary>
        protected class CaptionTemplate : ITemplate
        {
            public void InstantiateIn(Control container)
            {
                Label lbl = new Label();
                PropertyData property = ((PropertyTemplateContainer)container).DataItem as PropertyData;
                lbl.Text = string.Format("{0} ( \"{1}\" )", property.TranslateDisplayName(), property.Name);
                lbl.Attributes.Add("onclick", string.Format("copyToClipboard(\"{0}\")", property.Name));
                container.Controls.Add(lbl);
            }
        }
        #endregion
 
        #region Methods
        /// <summary>
        /// Finds the propertydataform and add a custom Captiontemplate and javascript for copytoclipboard
        /// </summary>
        protected override void OnInit(EventArgs e)
        {
            PropertyDataForm dataForm = FindControl<PropertyDataForm>(this.Page, null);
            if (dataForm != null)
            {
                dataForm.CaptionTemplate = new CaptionTemplate();
                RegisterCopyScript();
            }
 
            base.OnInit(e);
        }
 
        /// <summary>
        /// Registers the copytoclipboard javascript specified in separete const
        /// </summary>
        private void RegisterCopyScript()
        {
            if (!this.Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(),"displeyExtraInfo"))
            {
                this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "displeyExtraInfo", copyScript);
            }
        }
        #endregion
 
        #region FindControl(s) methods
 
        protected T FindControl<T>(Control control, string id) where T : Control
        {
            T controlTest = control as T;
            if (null != controlTest && (null == id || id.Equals(controlTest.ID)))
                return controlTest;
            foreach (Control c in control.Controls)
            {
                controlTest = FindControl<T>(c, id);
                if (null != controlTest)
                    return controlTest;
            }
            return null;
        }
 
        protected List<PropertyDataControl> FindControlsProperties(Control control)
        {
            List<PropertyDataControl> results = new List<PropertyDataControl>();
            FindControlsProperties(control, results);
            return results;
        }
 
        protected void FindControlsProperties(Control control, List<PropertyDataControl> results)
        {
            if (control is PropertyDataControl)
            {
                results.Add((control as PropertyDataControl));
            }
            else
            {
                foreach (Control c in control.Controls)
                {
                    FindControlsProperties(c, results);
                }
            }
        }
 
        #endregion
 
    }
}

Don’t forget to register the adapter in a .browser file in the App_Browsers folder.

   1: <browsers>
   2:   <browser refID="Default">
   3:     <controlAdapters>
   4:       <adapter
   5:             controlType="EPiServer.UI.Edit.EditPanel"
   6:             adapterType="EPiServer.Templates.Public.PropertyDataFormAdapter"/>
   7:      </controlAdapters>
   8:   </browser>
   9: </browsers>

 

Hope someone find it useful.

As per request here´s a zip with the code.    

Apr 21, 2010

Comments

Joel Abrahamsson
Joel Abrahamsson Sep 21, 2010 10:33 AM

Simple and brilliant!
Any chance you can upload the source code as well? Would make it easier to copy :-)

Sep 21, 2010 10:33 AM

Thank you. Added a zip with the code.


/ Per Nergard

Please login to comment.
Latest blogs
Introducing Image Transformer - AI Assistant for Optimizely

We've got something super cool to share with you, and it's all about giving your images a fresh spin. Image Transformer, the latest feature from ou...

Luc Gosso (MVP) | Feb 26, 2024 | Syndicated blog

Welcome 2024 Winter OMVPs

Hello, Optimizely community! We are thrilled to announce and welcome the newest members to the Optimizely Most Valuable Professionals (OMVP) progra...

Patrick Lam | Feb 26, 2024

Optimizely Opal... what it does actually do?

At Opticon 2023, Optimizely announced its first AI product Opal. AI is definitely the new tech buzzword in 2024 and with promises that AI will be...

Jon Jones | Feb 25, 2024 | Syndicated blog

How to add more Content Area Context Menu Item in Optimizely CMS 12

Hey folks, today I will share something related to Context Menu customization in the Content Area of Optimizely CMS. As you know, the content area ...

Binh Nguyen | Feb 25, 2024