How to integrate my custom button into Experience Manager

Question

I have created a custom button, JS and Configuration file and integrated it with the System.Config file and it works successfully. For this I need only to add my config path, virtual directory name and folder installation path inside the <editor> element tag.

But I want to know how can I integrate this same custom button in SiteEdit 2012 like the way I did for CME? I have not seen any <editors> tag inside the SiteEditEditor.config file. Please provide me a way to integrate to SiteEdit 2012. For CME I have the following view configured in my editor configuration.

<ext:view name="ComponentView">
<ext:control id="ItemToolbar"/> 
</ext:view>

What view I have to use for SiteEdit?

Answer 1

SiteEdit 2012 (or actually the official name for it is: User interface update for SDL Tridion 2011 SP1, sometimes also mentioned as UI 2012) is the predecessor of Experience Manager (XPM in SDL Tridion 2013) and it basically is an extension on the CME.

So when extending it, you don't need its configuration file, but you specify inside your Editor extension that it targets both the CME and SiteEdit (in the extension configuration, it is still called SiteEdit). I've written a blog post about this, explaining the basics and added some sample code on SDL Tridion World.

In there you can see that I've targeted both the CME and SiteEdit for my extension. Below is a snipped of the Editor.config file:

...
<extensions>
    <ext:editorextensions>
        <ext:editorextension target="CME">
            ...
            <ext:extendedareas>
                <ext:add>
                    <ext:extension assignid="FirstButton" name="Newest">
                        <ext:control>~/Controls/FirstButton.ascx</ext:control>
                        <ext:pagetype></ext:pagetype>
                        <ext:renderinblock>false</ext:renderinblock>
                        <ext:apply>
                            <ext:view name="TridionDashboard">
                                <ext:control id="MainDeckPageButtons" />
                            </ext:view>
                        </ext:apply>
                    </ext:extension>
                </ext:add>
            </ext:extendedareas>
            ...
        </ext:editorextension>
        <ext:editorextension target="SiteEdit">
           ...
            <ext:extendedareas>
                <ext:add>
                    <ext:extension assignid="FirstButton" name="Newest">
                        <ext:control>~/Controls/FirstButton.ascx</ext:control>
                        <ext:pagetype></ext:pagetype>
                        <ext:renderinblock>false</ext:renderinblock>
                        <ext:apply>
                            <ext:view name="DashboardView">
                                <ext:control id="MainDeckPageButtons" />
                            </ext:view>
                        </ext:apply>
                    </ext:extension>
                </ext:add>
            </ext:extendedareas>
            ...
        </ext:editorextension>
    </ext:editorextensions>
    ...
</extensions>
...

So you see that I've basically added the same configuration for my example button twice, once targeting the CME and then targeting SiteEdit. But the is a slight difference in the view names. This example adds a button in the Dashboard page, which exists in both the CME and XPM view, but they are named differently (TridionDashboard for the CME and DashboardView in XPM).

To find the different view (and control) names, you will have to inspect the HTML of that view and see what unique IDs are given. Also you can check out the code of the existing views already on the server.

Just keep in mind the extension points might be completely different between the two views. As shown in my ECL Import extension, you might need to adopt a complete different approach when extending XPM, as the flow and view might differ. If that is not the case, then you should only have to worry about finding the right view and control.

Update

The ItemToolbar in the ComponentView for the CME is something specific for the CME. In XPM the Component is basically represented as a Component Presentation on the Page. There are several options you have available to add your specific buttons:

1. Just leave it where it is, and have your editors open the Component in Form view (that will load the CME view and thus show your custom button).

2. Add your button in the properties window for the Component, that will be the view: EditorView and the control: PBComponentPropertyPanel

3. Add your button in the XPM ribbon toolbar and enable it only when a Component is selected. You can then simply apply it to <ext:view name="EditorView" /> and add it to one of the existing pages (tabs) and groups.

Answer 2

You can do it by adding configuration in your editor configuration file. You should add the configuration here:

<extensions>
  <ext:editorextensions>
    <ext:editorextension target="SiteEdit">
      <ext:editurls />
      <ext:listdefinitions />
      <ext:taskbars />
      <ext:commands />
      <ext:commandextensions />
      <ext:contextmenus />
      <ext:lists />
      <ext:tabpages />
      <ext:toolbars />
      <ext:ribbontoolbars />
    </ext:editorextension>
  </ext:editorextensions>
  <ext:dataextenders />
</extensions>

Even though most of your CME configuration will work for Site Edit, be aware that Site Edit uses different views and different ids in some cases. For instance CME uses Dashboard as a View, Site Edit uses Editor as a View.

I hope this helps.

Answer 3

I have added my view for SiteEdit as shown below and its working fine. Thanks to everyone for helping me.

<ext:apply>
               <ext:view name="EditorView">
              <ext:control id="MainToolbar"/>
            </ext:view>       
              </ext:apply>