View Presentation control file path from Experience Editor


Few years ago, I had written a blog on how to quickly view the actual physical file location of a presentation rendering/sublayout from within presentation settings of a sitecore item in content editor (View presentation control code path). That was on Sitecore 8.1. As mentioned there, it is very useful especially when you are mid-way in a Sitecore project or are in the process of reviewing client's existing Sitecore project. 

Today I am going to talk about viewing the presentation file location from within Sitecore 9.2 experience editor itself. Idea is to add a custom button to the web edit ribbon for a rendering, which when clicked will show a popup to display the physical file path of that rendering. Following are the steps:

1- Copy the file "SublayoutPath.aspx" into the location "\Website\sitecore\shell\". It can be found here - SublayoutPath.

2- Open Sitecore Desktop from the Launchpad and Select the Core Database.

3- Go to the Sitecore location: /sitecore/content/Applications/WebEdit/Custom Experience Buttons.

4- You can either create a duplicate item out of existing item "/sitecore/content/Applications/WebEdit/Custom Experience Buttons/Insert" or create a new item out of template " /sitecore/templates/System/WebEdit/WebEdit Button". Name the new item as "Presentation Control Path".

5- If you review the screenshot above, you will notice that there is a specific value put in for "Click" field. The value is "custom:presenation_path". This command handler is what will do the trick of opening a popup to display the physical file path of the rendering. 

6- Create a new command class to be triggered by this button click. In your solution, create a new class that inherits from "Sitecore.Shell.Framework.Commands.Command".

7- Create an Execute method with the following signature. Following is how my command class looks like.

using Sitecore.Shell.Framework.Commands;
using Sitecore.Web;
using Sitecore.Web.UI.Sheer;

namespace Debu.Dev.Foundation.SitecoreExtensions.Commands
{
    public class PresentationControlPathCommand: Sitecore.Shell.Framework.Commands.Command
    {
        public override void Execute(CommandContext context)
        {
            var renderId = context.Parameters["renderingId"];
            Sitecore.Data.Items.Item targetItem = null;

            if (Sitecore.Data.ID.IsID(renderId))
            {
                targetItem = Sitecore.Context.ContentDatabase.GetItem(renderId);
                if (targetItem == null) return;
            }

            string str = string.Concat("/sitecore/shell/SublayoutPath.aspx?Id=", targetItem.ID.ToString());
            SheerResponse.ShowModalDialog(str, "467", "157");
        }


    }
}

As you can see here, we are calling that same sublayout (step-1) passing the item's id.

8- Create a commands config file and put in under "App_Config/Include". 

<configuration>

  <sitecore>

    <commands>

      <command name="custom:presenation_path" type="Debu.Dev.Foundation.SitecoreExtensions.Commands.PresentationControlPathCommand,Debu.Dev.Foundation.SitecoreExtensions"/>

    </commands>

  </sitecore>

</configuration>

9- Next, you need to go to master view of Sitecore, and select all your renderings/sublayouts and add this newly created experience editor button "Presentation Control Path" using the field "Experience Editor Buttons".



10- So now when you view the experience editor for a Sitecore item, and click on a rendering (where you have added this new custom editor button as in step 8), you will notice this new button show up and on clicking it should show a popup display of the physical file path.

SEARCH ARTICLES