How can I create a custom menu list of components in the SiteEdit Ribbon Toolbar in Tridion UI 2012?

Question

I have successfully retrieved all the components of a page in the SiteEdit using predefined JS function "getAllComponentPresentations". Now my question is how can I create a menu list of these components in the SiteEdit Ribbon Toolbar. Though I can create static menu item by adding "RibbonContextMenuItem" tags in the "MainToolbar.ascx" file. But I want to know how can I dynamically create the menu item list. Please provide me the steps to implement the same.

Answer 1

The UI extensions just allow you to add buttons, unfortunately it is not possible to do without changing the toolbar source.

Answer 2

As indicated in my other answer, I don't think you can use any of the available controls for the UI extension model to create a dynamic list (so it seems Eric is right). Trying to start with that and then adding Javascript to inject additional menu items is also not a smart thing to do I would say. You basically step away from the supported extension model and start hacking.

I think I would take a look at simply creating a ribbon button which opens a popup (you can display it as a modal dialog) and in there I would add the list and its functionality still staying inside the UI extension framework, but using your own display elements.

For how to create a popup, you can take a look at the Publish from Publishing Queue extension. Instead of calling an existing page ($cme.Popups.PUBLISH.URL) like is done in there, you can call a page you have in your extension (make it extend Tridion.Web.UI.Controls.TridionPage). To format it as a modal dialog, you can create the popup as follows:

My.Editor.POPUP = {
  URL: $config.expandEditorPath("/Views/Popups/MyPopup.aspx", "MyEditorName"),
  FEATURES: { width: 200, height: 400 },
  OPTIONS: { popupType: $popup.Type.MODAL_IFRAME }
};

p.popup = $popup.create(My.Editor.POPUP.URL, My.Editor.POPUP.FEATURES, My.Editor.POPUP.OPTIONS);

I'm not sure on how to add your items and lay them out etc, this isn't something trivial, so you still have some ground work to do here. Hopefully somebody else is inspired by my answer and can given some more tips and tricks for you to build on.

Answer 3

I think what you are looking for is to create a submenu like the Insert Content button on the Home tab of the XPM ribbon (a similar one would be the Open button on the Home tab of the CME ribbon).

Should be possible but I haven't done it myself yet. As I showed in my Ribbon Item Group blog post, you basically need to take a look at the .ascx files in your ..\Tridion\web\WebUI\Editors\CME\Controls directory on your CMS and try to find examples of how this is done.

Looking at the Open button on the Home tab of the CME ribbon, this one I located in ..\Tridion\web\WebUI\Editors\CME\Controls\Toolbars\DashboardToolbar.ascx. So based on that I would say you need to use a RibbonSplitButton with RibbonContextMenuItem. But it doesn't look like this is well suited for a dynamic list like all Component Presentations on a Page. Here is how the RibbonSplitButton and RibbonContextMenuItem could be used in your own custom ribbon control:

<c:RibbonGroup runat="server" Label="my group" ID="MyGroup">
  <c:RibbonSplitButton runat="server" CommandName="MyCommand" Title="My Button" Label="My Button" ID="MyBtn">
    <c:RibbonContextMenuItem runat="server" ID="Itm1" Command="Itm1Cmd"  Title="CP 1" Label="CP 1" />
    <c:RibbonContextMenuItem runat="server" ID="Itm2" Command="Itm2Cmd"  Title="CP 2" Label="CP 2" />
    <c:RibbonContextMenuItem runat="server" ID="Itm3" Command="Itm3Cmd"  Title="CP 3" Label="CP 3" />
  </c:RibbonItemsGroup>
</c:RibbonGroup>