Question

When you create a Data Extender for a CME list – for instance to add a column for the Schema as in this example – it all works fine and dandy whenever you do actions that force a List reload.

However, some actions don’t force a list reload (like editing a component in a folder, then saving & closing) and it looks like Anguilla is loading the data for the item that changed using a different mechanism that loads only the data for the item in question (which makes sense).

If I would want my extended list view to behave properly and also load my additional attributes whenever a given item changes (instead of only when the list view is reloaded) what else do I need to do?

Answer 1

I found how Anguilla takes care of this. When you implement a Data Extender, you are extending the information regarding the items displayed in the list, which basically means that you are extending the Data (Model) behind the item in question.

Each Item in Tridion has its own class in the Anguilla Framework, for example a Component has its own Tridion.ContentManager.Component javascript “class”.

Having said this, and going back to the example that shows the schema name of the component, we are not actually extending the model, since that information is already available in the component. However, we need to overwrite the methods exposed on each used for displaying information in the lists the item is in, in this case a Component.

So, when we deal with a Data Extender, if we want a full implementation of this functionality, we not only need to define the data extender:

<ext:dataextender 
    name="IntelligentDataExtender" 
    type="Com.Tridion.PS.Extensions.IntelligentDataExtender,PS.GUI.Extensions">
    <ext:description>Shows extra info</ext:description>
</ext:dataextender>

But also we need to define what’s the column we are adding:

<ext:lists>
    <ext:add>
        <ext:extension name="IntelligentColumnExtender"   
                       assignid="IntelligentDataColumnExtender">
          <ext:listDefinition>
            <ext:selectornamespaces/>
            <ext:columns>
              <column 
                  xmlns="http://www.sdltridion.com/2009/GUI/extensions/List"
                  id="IntelligentData" 
                  type="data"  
                  title="Additional Info" 
                  selector="@ExtendedInfo" 
                  translate="String"/>
            </ext:columns>
          </ext:listDefinition>
          <ext:apply>
            <ext:view name="DashboardView" />
          </ext:apply>
        </ext:extension>
      </ext:add>
  </ext:lists>

Once we have this, the GUI will display the column we just added: “Additional Info”

Well, now we need to achieve the list refreshing when the item is edited/checked-out and in, etc…

For that, we need to extend the model and implement a few methods in the Object we are extending. In this example I am extending the Page object, so whenever a page is edited, the row in the list we want to update gets refreshed, together with the rest of the cells in the table.

To extend the model we need to define what types are we extending, in this example I am going to use the “Page” class as an example. First of all you need to define the model extension in the config file of your Editor:

<cfg:group name="Com.Tridion.PS.Extensions.UI.Model"
     merger="Tridion.Web.UI.Core.Configuration.Resources.DomainModelProcessor" 
     merge="always">
    <cfg:domainmodel name="Com.Tridion.PS.Extensions.UI.Model">
      <cfg:fileset>
        <cfg:file type="script">/Scripts/PSPage.js</cfg:file>            
      </cfg:fileset>
      <cfg:services />
    </cfg:domainmodel>
</cfg:group>

and

<ext:modelextensions>
  <cfg:itemtypes>
    <cfg:itemtype id="tcm:64" implementation="Com.Tridion.PS.Extensions.UI.PSPage" />        
  </cfg:itemtypes>
</ext:modelextensions>

As you can see I am extending the Page by using the “Com.Tridion.PS.Extensions.UI.PSPage” class that is defined in the Javascript file “/Scripts/PSPage.js”.

The only method that handles the row refreshing is the following:

Com.Tridion.PS.Extensions.UI.PSPage.prototype.getListItemXmlAttributes 
= function PSPage$getListItemXmlAttributes(customAttributes) {
    var attribs = {};
    var p = this.properties;   

    if (customAttributes) {
        for (var attr in customAttributes) {
            attribs[attr] = customAttributes[attr];
        }
    }
    //This adds my custom column back when the item is updated
    attribs["ExtendedInfo"] = p.extendedInfo;

    return this.callBase(
        "Tridion.ContentManager.Page", 
        "getListItemXmlAttributes", 
        [attribs])
};

As you can see I am implementing the “ExtendedInfo” attribute which is the one displayed in my additional column.

There’s more than just adding a Data Extender when dealing with adding a column to our lists. I will write a post in my blog here to provide with a fully working example.

I hope it makes sense.