How do I add a button to the Experience Editor Ribbon?

Question

I would like to add a button to the Experience Editor ribbon that will open a modal or new window with a set of fields from the context item. I had some custom code to do this with the old Sheer UI ribbon but would like to implement this within the new Speak UI ribbon. I have found Sitecore's documentation to create the button: Customize the Experience Editor ribbon

However, I'm having a hard time finding a good example of what to perform within the execute method of my custom javascript.

What javascript would I need to open a window that displays a pre-configured set of fields that exist on the context item?

Answer 1

Starting with version 8 or 8.1 it was changed how to add a button to experience button. Please follow next link to add new button to experience editor:

http://reyrahadian.com/2015/04/15/sitecore-8-adding-edit-meta-data-button-in-experience-editor/

Before it was very simple, you didn't need to add new code for editing hidden field:

https://blog.istern.dk/2012/05/21/running-sitecore-field-editor-from-a-command/

Answer 2

It sounds like you want to open a Field Editor dialog. Unfortunately, SPEAK makes this much more complicated than it really should be. This blog post by Thomas Stern gives all the dirty details.

The executive summary is that you need to create a URL for the field editor dialog that has all of the parameters it needs like the list of fields, height, width, title, etc. While you might be able to hard-code that URL into your JavaScript, it is generally preferable to generate it based on a settings item or as Thomas does by re-purposing a field on the button item. To do that, you need to create a SPEAK request which will execute a method in a class that you will need to write. You'll end up with like 4 files and a couple of items just to open a dialog. Welcome to the world of SPEAK.