为Sitecore数据源选择器添加“新建文件夹”按钮的实现方案咨询

Great question! Adding folder creation directly in the data source selection dialog will definitely streamline content editors' workflows. Here's a step-by-step approach to implement both the right-click menu option and the left panel button:

1. Create a Custom "Create Folder" Command #

First, we need a reusable command that handles creating a folder under the selected item. This command will power both the right-click menu and the panel button.

• Create a new class in your Sitecore project inheriting from Sitecore.Shell.Framework.Commands.Command:

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

namespace YourProject.Commands
{
    public class CreateFolderInDataSourceDialog : Command
    {
        public override void Execute(CommandContext context)
        {
            if (context.Items.Length == 0) return;
            
            var parentItem = context.Items[0];
            var standardFolderTemplate = Context.Database.GetTemplate("{A87A00B1-E6DB-45AB-8B54-636FEC3B5523}"); // Standard Folder ID
            
            // Generate unique folder name
            var folderCount = parentItem.Children.Count;
            var newFolderName = $"New Folder {folderCount + 1}";
            
            // Create and configure the folder
            var newFolder = parentItem.Add(newFolderName, standardFolderTemplate);
            newFolder.Editing.BeginEdit();
            newFolder["__Display Name"] = newFolderName;
            newFolder.Editing.EndEdit();
            
            // Refresh tree and select the new folder
            SheerResponse.TreeRefresh(parentItem.ID.ToString());
            SheerResponse.TreeSelectItem(newFolder.ID.ToString());
        }

        public override CommandState QueryState(CommandContext context)
        {
            // Enable command only when an item is selected
            return context.Items.Length > 0 ? CommandState.Enabled : CommandState.Disabled;
        }
    }
}

• Deploy this class to your Sitecore instance.

2. Add the Right-Click Menu Option #

Next, we'll add a "New Folder" option to the tree's context menu in the data source dialog:

1. Open the Core Database via Sitecore Desktop.
2. Navigate to /sitecore/content/Applications/Dialogs/Select Data Source/Context Menues/Tree.
3. Create a new Menu Item under this node:
   • Name: New Folder
   • Display Name: New Folder
   • Click: item:yourproject:createfolderindatasourcedialog (replace yourproject with your actual namespace, formatted in Sitecore's command syntax)
   • Icon: /sitecore/shell/Themes/Standard/Images/16x16/folder_add.png
4. Save the item.

3. Add the "Add Folder Below Selected" Button to the Left Panel #

To add a button to the dialog's left panel, we'll customize the default dialog form:

Step 3.1: Create a Custom Dialog Form Class #

• Create a class inheriting from the default SelectDataSourceForm:

using Sitecore.Shell.Applications.Dialogs.SelectDataSource;
using Sitecore.Web.UI.HtmlControls;
using Sitecore.Web.UI.Sheer;

namespace YourProject.Dialogs
{
    public class CustomSelectDataSourceForm : SelectDataSourceForm
    {
        protected override void OnInit(System.EventArgs e)
        {
            base.OnInit(e);
            
            // Build the button
            var addFolderButton = new Button
            {
                ID = "AddFolderButton",
                Header = "Add Folder Below Selected",
                Click = "item:yourproject:createfolderindatasourcedialog",
                Icon = "folder_add",
                Class = "scButtonPrimary"
            };
            
            // Insert button into the left "Options" panel
            var optionsPanel = FindControl("Options") as Panel;
            optionsPanel?.Controls.AddAt(0, addFolderButton);
        }
    }
}

Step 3.2: Patch the Dialog to Use Your Custom Class #

Add a patch file to App_Config/Include to replace the default dialog form:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <shell>
      <dialogs>
        <dialog name="selectdatasource">
          <patch:attribute name="type">YourProject.Dialogs.CustomSelectDataSourceForm, YourProjectAssembly</patch:attribute>
        </dialog>
      </dialogs>
    </shell>
  </sitecore>
</configuration>

Replace YourProject.Dialogs.CustomSelectDataSourceForm and YourProjectAssembly with your actual class and assembly names.

4. Test and Validate #

• Clear your Sitecore cache.
• Open the Experience Editor, add a component that uses a data source, and click "Select Data Source".
• Verify both features work:
  • Right-click any item in the tree to see the "New Folder" option.
  • Use the left panel button to create a folder under the selected item.
• Ensure the new folder is created immediately and the tree refreshes automatically.

Key Notes #

• Ensure editors have Create permissions on the parent item where they're adding folders.
• You can replace the standard folder template ID with a custom template if needed.
• This implementation works across Sitecore 9.x and 10+ (adjust API references for older versions if necessary).

内容的提问来源于stack exchange，提问作者Chris