Using the new Tree XML for building applications

One of the major developer features in C1 CMS 1.3 is a new ‘domain specific language’ for defining tree structures in the C1 CMS Console. It’s a XML based ‘language’ where you can layout tree structures containing static elements, data elements and data driven folder elements. Commands are easily attached to elements which can invoke the generic   add, edit, delete, publish etc. commands in addition invoke custom URLs (like a custom ASP.NET page) and XSLT functions (great for quickly creating report views using familiar tools).

This feature is intended to give developers fine grained control over tree for applications they are building, without having to write .NET based providers and is a key component in out strategy for enabling front-end developers to build rich administrative applications using tools they know.

Getting started

If you have upgraded from version 1.2 you should execute the following steps:

  • Edit your user profile under the Users perspective
  • On the ‘Permissions’ tab check the box next to "Developer Apps" and save.
  • The UI reloads and you have access to a new perspective titled  "Developer Apps"

The Developer Apps perspective enables you to quickly create a new tree definition as well as edit existing definitions. We suggest that you primarily use this for creating a new definition file (which can give you a template) and then use your favourite XML editor (like Visual Studio or Eclipse) to edit the file – these editors have schema support which will give you intellisense and syntax check on the XML you write – highly recommended.

XML Schema access

You can find the XML schema here: http://localhost/Composite/schemas/Trees/Tree.xsd (substitute ‘localhost’ with the path to your CMS site). Load this schema into your XML editor to get validation and intellisense.

Creating a new Tree Definition

You can create a new Tree definition in one of two ways:

  1. Use the ‘Add’ command on the ‘Tree Definitions’ node and specify name, template (predefined XML to inspire you) and location – the your tree should show up.
  2. Add a new XML file to the folder /App_Data/Composite/TreeDefinitions

Tree Definition XML files always live in the   /App_Data/Composite/TreeDefinitions folder and you will find your XML file here even if you created it via the UI.

Working with Tree Definitions

To get the best experience you should use a dedicated XML editing tool (like Visual Studio or Eclipse) to edit the Tree Definition XML file. Load in the XML schema described above to get validation and intelligence.

When you save your XML file the CMS Server will pick up your change and instruct the CMS Console to refresh the tree – the CMS Console will check for refresh messages every 15 seconds, so you might want to refresh using the right click Refresh command.

Sample XML

 
<ElementStructure xmlns="http://www.composite.net/ns/management/trees/treemarkup/1.0" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <ElementStructure.AutoAttachments> 
    <NamedParent Name="Content" /> 
  </ElementStructure.AutoAttachments> 
  <ElementRoot> 
    <Children> 
      <Element Label="Demo 01" Id="Demo01"> 
        <Children> 
          <Element Label="Page types with pages" Icon="pagetype-pagetype" Id="Page types with pages"> 
            <Children> 
              <DataFolderElements Type="Composite.Data.Types.IPageType" FieldGroupingName="Name" FirstLetterOnly="true"> 
                <Children> 
                  <DataElements Type="Composite.Data.Types.IPageType" Label="${C1:Data:Composite.Data.Types.IPageType:Name} page type"> 
                    <Children> 
                      <DataFolderElements Type="Composite.Data.Types.IPage" DateFormat="yyyy MMMM" FieldGroupingName="ChangeDate"> 
                        <Children> 
                          <DataElements Type="Composite.Data.Types.IPage" Label="${C1:Data:Composite.Data.Types.IPage:Title} (Page Type: ${C1:Data:Composite.Data.Types.IPageType:Name})"> 
                            <Filters> 
                              <ParentIdFilter ParentType="Composite.Data.Types.IPageType" ReferenceFieldName="PageTypeId" /> 
                            </Filters> 
                          </DataElements> 
                        </Children> 
                      </DataFolderElements> 
                    </Children> 
                  </DataElements> 
                </Children> 
              </DataFolderElements> 
            </Children> 
          </Element> 
        </Children> 
      </Element> 
    </Children> 
  </ElementRoot> 
</ElementStructure>

Videos

The following videos show the Tree XML in action: