How do I hook the Save event in Sitecore Page Editor?

Question

I'm creating a custom edit control for my content authors to use in the Page Editor. Of course this means I want my control to save data to an Item when the user clicks on the Save button.

How is this done? I've looked through many reams of documentation... feel like I'm missing something basic. Surely I can add my own event handler here?

NOTE: I want this to be INLINE editing in the Page Editor. It seems like a very basic feature that is missing from Sitecore. I could certainly see using a checkbox entry also for a checkbox field (What a crazy notion?!?!). The only built-in options for editing seem to be a textbox or a RichText editor. Am I missing something obvious?

Answer 1

When I need to build a custom control, I use it in Normal mode and then just use an sc:Text (or whatever) while the user is in Edit mode. That way I get all the Sitecore goodness without the hassle. One way to do this is to use a Multiview which looks kinda like:

<MultiView>
<View id=NormalView>
<MyAwesomeCustomControl />
</View>
<View id=EditView>
<sc:Text />
</View>
</MultiView>

Then in the code-behind make sure that you choose the right view for the right mode.

Answer 2

You could also use the field editor to bring up a popup to edit the info you need. Let's say for instance you do:

<sc:EditFrame runat="server" Buttons="MyThing">
<!-- any html, or other controls -->
</sc:EditFrame>

So when somebody in PageEditor (Edit) mode hovers over the html you put inside the EditFrame they will get a pop up menu. In this menu you can display any number of commands, the normal one would be an "Edit" option that then pops up a dialog, where you can edit any fields you want from any content Item in the tree.

How you configure the available options? Through the Buttons property, it has to point to a folder in the core database under the /sitecore/content/Applications/WebEdit/Edit Frame Buttons (see the default one as an example). It is also in there that you can set which fields to edit. In the snippet above, Sitecore expects to find a folder called MyThing.

How does it know which item to edit fields from? If you don't specify anything it will be the Context.Item, if you want something else, use the datasource property of the editFrame control and set it to for example some ID.

Answer 3

OK... after some help from Sitecore support, I've finally got the answer to this question. In order for Page Editor to get new values for fields, the Sitecore.WebEdit.setFieldValue() javascript function needs to called. This creates a hidden input field which the PageEditor then reads when the Save or Save/Close button is clicked.

//RenderItem is the item in question, DropListField is the string name of
//the target Droplist field we want rendered
string itemID = RenderItem.ID.ToShortID().ToString();
string fieldID = RenderItem.Fields[DropListField].ID.ToShortID().ToString();
string language = RenderItem.Language.ToString();
string version = RenderItem.Version.ToString();
string revision = RenderItem[FieldIDs.Revision].Replace("-", string.Empty);

ddlList.Attributes.Add("onchange", string.Format("var ddl = getElementById('{5}');var itemURI = new Sitecore.ItemUri('{0}','{1}','{2}','{3}');Sitecore.WebEdit.setFieldValue(itemURI,'{4}',ddl.options[ddl.selectedIndex].value);",itemID,language,version,revision,fieldID,ddlList.ClientID));

So, basically we just add a client-side onchange handler for the DropDownList which calls this Sitecore js function. Note: I believe this requires Sitecore 6.2.