Edit hidden fields in page editor

Question

I want to edit on Sitecore Page Editor some hidden fields like meta fields from head html section. How can I do it? I try with

 <sc:FieldRenderer runat="server" ID="scFieldMeta" FieldName="Meta title" /> 

but this is not working for head html section.

Answer 1

Sitecore doesn't have out of the box this kind of functionality but you need to follow few steps to do it:

1. Create under item

    /sitecore/content/Applications/WebEdit/Edit Frame Buttons 
   

   a folder, you can name it: PageProperties. Under folder you have to create a new Field Editor Button. On field Fields you need to enter name of the fields you want to edit separate by pipeline. Will be something like :

       Meta data|Meta title
   

2. Under item :

   /sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Page Editor
   

   you need to create an item of type:

    /sitecore/templates/System/Ribbon/Chunk
   

   Under new item you have to create new item of type:

    /sitecore/templates/System/Ribbon/Small Button
   

   On the field Click you will have something like

    command:executefieldeditor(path=/sitecore/content/Applications/WebEdit/Edit Frame Buttons/Page Properties/Page Properties)  
   

   where path will point to item created at step one.

3. On this step you need to create a command. Please create on include folder a new file name it : CustomCommands.config or how do you want with extension config.

   It will contains :

    <?xml version="1.0"?>
    <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
        <sitecore>
            <commands>
                 <command name="command:executefieldeditor" type="yournamespace.ExecuteFieldEditor,yourAssembly"/>
          </commands>
      </sitecore>
 </configuration>

4. Create your class :

using Sitecore;
using Sitecore.Data;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.Shell.Applications.WebEdit;
using Sitecore.Shell.Applications.WebEdit.Commands;
using Sitecore.Text;
using Sitecore.Web.UI.Sheer;
using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace YOURNAMESPACENAME
{
    public class ExecuteFieldEditor : FieldEditorCommand
    {
        /// <summary>
        /// The fieldname
        /// </summary>
        private const string Fieldname = "Fields";

        /// <summary>
        /// The header
        /// </summary>
        private const string Header = "Header";

        /// <summary>
        /// The icon
        /// </summary>
        private const string Icon = "Icon";
        /// <summary>
        /// The uriparameter
        /// </summary>
        private const string Uriparameter = "uri";

        /// <summary>
        /// The pathparameter
        /// </summary>
        private const string Pathparameter = "path";

        /// <summary>
        /// The currentitemisnull
        /// </summary>
        private const string Currentitemisnull = "Current item is null";

        /// <summary>
        /// The settingsitemisnull
        /// </summary>
        private const string Settingsitemisnull = "Settings item is null";

        /// <summary>
        /// Gets or sets the current item.
        /// </summary>
        /// <value>
        /// The current item.
        /// </value>
        private Item CurrentItem { get; set; }

        /// <summary>
        /// Gets or sets the settings item.
        /// </summary>
        /// <value>
        /// The settings item.
        /// </value>
        private Item SettingsItem { get; set; }

        /// <summary>
        /// Gets the options.
        /// </summary>
        /// <param name="args">The arguments.</param>
        /// <param name="form">The form.</param>
        /// <returns></returns>
        protected override PageEditFieldEditorOptions GetOptions(ClientPipelineArgs args, NameValueCollection form)
        {
            EnsureContext(args);
            return new PageEditFieldEditorOptions(form, BuildListWithFieldsToShow()) { Title = SettingsItem[Header], Icon = SettingsItem[Icon] };
        }

        /// <summary>
        /// Ensures the context.
        /// </summary>
        /// <param name="args">The arguments.</param>
        private void EnsureContext(ClientPipelineArgs args)
        {
            CurrentItem = Database.GetItem(ItemUri.Parse(args.Parameters[Uriparameter]));
            Assert.IsNotNull(CurrentItem, Currentitemisnull);
            SettingsItem = Client.CoreDatabase.GetItem(args.Parameters[Pathparameter]);
            Assert.IsNotNull(SettingsItem, Settingsitemisnull);
        }

        /// <summary>
        /// Builds the list with fields to show.
        /// </summary>
        /// <returns></returns>
        private IEnumerable<FieldDescriptor> BuildListWithFieldsToShow()
        {
            ListString fieldString = new ListString(SettingsItem[Fieldname]);

            return (from field in new ListString(fieldString) where CurrentItem.Fields[field] != null select new FieldDescriptor(CurrentItem, field)).ToList();
        }
    }
}

Also you can check this post.

Answer 2

I agree the Field Editor button is the right solution, but you can do this all without custom code as well:

1. In the Core DB, create a Field Editor button item as Sitecore Climber explained
2. In the Multi-Line Text Field enter your fields with pipes separating them as Sitecore Climber explained
3. Find a sublayout that appears on all pages, e.g. Header.ascx or something like that.
4. On that sublayout definition item for that, assign the field editor to that UI component via the "Page Editor Buttons" treelist field. See this image:
5. In Page Editor, when you select that sublayout, it's context ribbon will contain an extra button that allows you to edit those fields. See this image:
6. When you click it you get a pop-up to edit those pipe-delimited fields. See this image: