Adding a new tab to Component Presentation on Page view

I started working on adding new tab and first skeleton I took from is
Robert Curlettes sample.
http://www.curlette.com/?p=753 thats nice post

1. Open Visual Studio  and create a new Project, ASP.NET Empty Web Project.
2. Add a new Web User Control (ascx file) to the project. Name it GUIPageViewExtension.ascx

AddComponentToBundle.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddComponentToBundle.ascx.cs" Inherits="GUIPageViewExtension.AddComponentToBundle" %>

   <div class="se-tab-caption">
  Add Component on this Component Presentation to Bundle
 </div>
 <br/>
  <c:Button class="additembutton button2013" runat="server" Title="<%$ Resources: Tridion.Web.UI.Strings, AddSelectedItemsToBundle %>" Label="<%$ Resources: Tridion.Web.UI.Strings, AddSelectedItemsToBundle %>" CommandName="AddSelectedItemsToBundle" />
 

AddComponentToBundle.ascx.cs

protected void Page_Load(object sender, EventArgs e)
{
   
}

Compile and Build the Solution. 

– Copy the DLL “GUIPageViewExtension.dll” file ‘TRIDIONINSTALLATIONPATH \web\WebUI\WebRoot\bin’. This is the location where all the DLLs associated with a GUI Extension are deployed.

Create a config (AddComponentToBundle.config)
This says put Add to Bundle before "Target Groups" when component presentation is opened in pageview
<?xml version="1.0"?>
<Configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge"
               xmlns:cfg="http://www.sdltridion.com/2009/GUI/Configuration"
xmlns:ext="http://www.sdltridion.com/2009/GUI/extensions"
               xmlns:cmenu="http://www.sdltridion.com/2009/GUI/extensions/ContextMenu">

  <resources cache="true">
    <cfg:filters />
    <cfg:groups>
      <cfg:group name="GE.AddComponentToBundle" merge="always">
        <cfg:fileset>
          <cfg:file type="script">/AddComponentToBundle.js</cfg:file>
        </cfg:fileset>
        <cfg:dependencies>
          <cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
          <cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
        </cfg:dependencies>
      </cfg:group>
    </cfg:groups>
  </resources>
  <definitionfiles />
  <extensions>
    <ext:dataextenders/>
    <ext:editorextensions>
      <ext:editorextension target="CME">
        <ext:editurls/>
        <ext:listdefinitions/>
        <ext:taskbars/>
        <ext:commands/>
        <ext:commandextensions/>        
        <ext:contextmenus/>
        <ext:lists />

        <ext:tabpages>
<ext:add>
<ext:extension insertbefore="targetGroups" assignid="AddComponentToBundle" name="Add to Bundle">
 <ext:control>~/AddComponentToBundle.ascx</ext:control>
 <ext:pagetype>GE.AddComponentToBundle</ext:pagetype>
 <ext:dependencies>
<cfg:dependency>GE.AddComponentToBundle</cfg:dependency>
 </ext:dependencies>
<ext:apply>
<ext:view name="PageView">
 <ext:control id="ComponentPresentationPropertiesTabControl" />
</ext:view>
 </ext:apply>
</ext:extension>
</ext:add>

        </ext:tabpages>
        <ext:toolbars/>
        <ext:ribbontoolbars/>
      </ext:editorextension>
    </ext:editorextensions>
  </extensions>
  <commands>
  <cfg:commandset id="Tridion.GUI.Core">
        <!-- Bundle related commands -->
      <cfg:command name="AddItemToBundle" implementation="Tridion.Cme.Commands.AddItemToBundle" />
 </cfg:commandset>
  </commands>
  <contextmenus />
  <localization />
  <settings>
    <defaultpage/>
    <navigatorurl/>
    <editurls/>
    <listdefinitions />
    <itemicons/>
    <theme>
      <path>theme/</path>
    </theme>
    <customconfiguration />
  </settings>

</Configuration>

Create a JS file AddComponentToBundle.js

Type.registerNamespace("GE");

GE.AddComponentToBundle = function GE$GUIPageViewExtension$AddComponentToBundle(element) {
    console.log('Constructor');
    Tridion.OO.enableInterface(this, "GE.AddComponentToBundle");
    this.addInterface("Tridion.Controls.DeckPage", [element]); 
var p = this.properties;
var controls = p.controls;
p.selectedComponentPresentation;
p.selectedComponentId;
};

GE.AddComponentToBundle.prototype.initialize = function AddComponentToBundle$initialize()
{
    console.log('init');
var p = this.properties;
var c = p.controls;
var element = this.getElement();
c.AddToBundleButton = $controls.getControl($(".additembutton", element), "Tridion.Controls.Button");
    this.callBase("Tridion.Controls.DeckPage", "initialize");
c.list = $controls.getControl($("#ComponentPresentationListItems"), "Tridion.Controls.List");
var list = this.properties.controls.list;
$evt.addEventHandler(list, "selectionchange", this.getDelegate(this.updateView));
$evt.addEventHandler(c.AddToBundleButton, "click", this.getDelegate(this._handleAddToBundleButtonClick));

};

GE.AddComponentToBundle.prototype.select = function AddComponentToBundle$select() {
    var p = this.properties;
    var masterTabControl = $controls.getControl($("#MasterTabControl"), 
                                            "Tridion.Controls.TabControl");
    var compPresTab = masterTabControl.getPage("ComponentPresentationsTab");
    p.selectedComponentPresentation 
                       = compPresTab.getSelectedComponentPresentation();   
    p.selectedComponentId =p.selectedComponentPresentation.getComponentId();    console.log('select');
    this.callBase("Tridion.Controls.DeckPage", "select");
    this.updateView();
};

GE.AddComponentToBundle.prototype.updateView = function AddComponentToBundle$updateView()
{
    console.log('update');
    if (this.isSelected()) 
    {
var p = this.properties;
    var masterTabControl = $controls.getControl($("#MasterTabControl"), 
                                            "Tridion.Controls.TabControl");
    var compPresTab = masterTabControl.getPage("ComponentPresentationsTab");
    p.selectedComponentPresentation 
                       = compPresTab.getSelectedComponentPresentation();
    p.selectedComponentId =p.selectedComponentPresentation.getComponentId();
    console.log('selected')           
    }
};

GE.AddComponentToBundle.prototype._handleAddToBundleButtonClick = function AddComponentToBundle$_handleAddToBundleButtonClick(event)
{
    var p = this.properties;
var selection = new Tridion.Cme.Selection();
var itemId = p.selectedComponentId;
selection.addItem(itemId);
selection.setParentItemUri(itemId);
selection.setProperty("IncludeSharedChildPublications", true);
$cme.executeCommand("AddSelectedItemsToBundle", selection);
};



Tridion.Controls.Deck.registerPageType(GE.AddComponentToBundle, "GE.AddComponentToBundle");

Create folder and copy files
– Create a new Folder in the Editors folder called ‘GUIPageViewExtension’. Full path is TRIDIONINSTALLATIONPATH\web\WebUI\Editors\ GUIPageViewExtension

Eg: D:\Tridion\web\WebUI\Editors GUIPageViewExtension

– Copy AddComponentToBundle.ascx, AddComponentToBundle.js, and AddComponentToBundle.config files to the above folder

Add Extension to System.config

<editor name="GUIPageViewExtension" xmlns="http://www.sdltridion.com/2009/GUI/Configuration">

      <installpath xmlns="http://www.sdltridion.com/2009/GUI/Configuration">D:\Tridion\web\WebUI\Editors\GUIPageViewExtension\</installpath>

      <configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration">AddComponentToBundle.config</configuration>

      <vdir xmlns="http://www.sdltridion.com/2009/GUI/Configuration">GUIPageViewExtension</vdir>

</editor>

Setup Virtual Directory in IIS
– Add VDIR to IIS, point to GUIPageViewExtension Editor folder TRIDIONINSTALLATIONPATH\web\WebUI\Editors\ GUIPageViewExtension

– The name of the VDIR should match the VDIR node in the system.config file.

Restart IIS

Test
The new Tab should appear in the Page -ComponentPresentattions screen

Editor cannot Add items to shared Bundle (That is put of box tridion behavior) However refer next screenshot

Editor can Add items to Bundle by selecting parent Bundle from 020 Publication in this case