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".

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.