Two-Level Data Folder App

Learn to build a custom tree of grouped data elements with tree definitions

Download the sample app as a CMS Package

In this sample, you will learn how to create a console application that adds a custom tree of tasks grouped by projects and their status in the Content perspective and allows CMS Console users to manage them.

  1. This sample requires two global data types to hold information about projects and tasks.
  2. To add and edit items within the application, you need to create two edit forms.
  3. The tree definition will attach the tree of data elements in the Content perspective.

Global data types

This sample requires two global data types: one for projects and the other one for tasks.

  • Global data type:
    • "Demo.C1ConsoleApps.Projects"
  • Fields:
    • "Name": String (128)
  • Global data type:
    • "Demo.C1ConsoleApps.Tasks"
  • Fields:
    • "Name": String (256)
    • "Project": Data Reference (Demo.C1ConsoleApps.Projects)
    • "Completed": Boolean

Please note that if you change the names used above, you’ll have to update the following tree definition sample accordingly.

Edit forms

You need edit forma that will open when the CMS Console user will add or edit projects or tasks within the application.

The easiest way to create the form is as follows:

  1. Select the "Demo.C1ConsoleApps.Projects" data type in the Data perspective.
  2. Click Edit Form Markup on the toolbar.
  3. Resave the markup.
  4. Repeat Steps 1-3 for "Demo.C1ConsoleApps.Tasks".

This will create two edit forms you need:

  • ~/App_Data/Composite/DynamicTypeForms/Demo/C1ConsoleApps/Projects.xml
  • ~/App_Data/Composite/DynamicTypeForms/Demo/C1ConsoleApps/Tasks.xml

Tree definition

In ~/App_Data/Composite/TreeDefinitions, create an XML file: Tasks.xml.

Add this markup:

<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" Position="Top"/>
  </ElementStructure.AutoAttachments>

	<ElementRoot>
		<Children>
      <Element Id="ProjectsRootId" Label="Projects" ToolTip="Projects" Icon="bookmark">
        <Children>
          <DataElements Type="Demo.C1ConsoleApps.Projects" Icon="website-create-website-file">
            <OrderBy>
              <Field FieldName="Name" Direction="ascending"/>
            </OrderBy>
            <Actions>
              <EditDataAction Label="Edit Project" Icon="website-edit-website-file"/>
              <DeleteDataAction Label="Delete Project" Icon="website-delete-website-file"/>
              <AddDataAction Type="Demo.C1ConsoleApps.Tasks" Label="Add Task" Icon="website-create-website-file"/>
            </Actions>
            <Children>
              <Element Id="CompletedTasksId" Label="Completed Tasks" Icon="accept">
                <Children>
                  <DataElements Type="Demo.C1ConsoleApps.Tasks" Icon="validationrule">
                    <Filters>
                      <ParentIdFilter ParentType="Demo.C1ConsoleApps.Projects" ReferenceFieldName="Project"/>
                      <FieldFilter FieldName="Completed" FieldValue="True"/>
                    </Filters>
                    <OrderBy>
                      <Field FieldName="Name" Direction="ascending"/>
                    </OrderBy>
                    <Actions>
                      <EditDataAction Label="Edit Task" Icon="website-edit-website-file"/>
                      <DeleteDataAction Label="Delete Task" Icon="website-delete-website-file"/>
                    </Actions>
                  </DataElements>
                </Children>
              </Element>
              <Element Id="InProgressTasksId" Label="Tasks in Progress" Icon="clock">
                <Children>
                  <DataElements Type="Demo.C1ConsoleApps.Tasks" Icon="validationrule">
                    <Filters>
                      <ParentIdFilter ParentType="Demo.C1ConsoleApps.Projects" ReferenceFieldName="Project"/>
                      <FieldFilter FieldName="Completed" FieldValue="False"/>
                    </Filters>
                    <OrderBy>
                      <Field FieldName="Name" Direction="ascending"/>
                    </OrderBy>
                    <Actions>
                      <EditDataAction Label="Edit Task" Icon="website-edit-website-file"/>
                      <DeleteDataAction Label="Delete Task" Icon="website-delete-website-file"/>
                    </Actions>
                  </DataElements>
                </Children>
              </Element>
            </Children>
          </DataElements>
        </Children>
        <Actions>
          <AddDataAction Type="Demo.C1ConsoleApps.Projects" Label="Add Project" Icon="website-create-website-file"/>
        </Actions>
      </Element>
		</Children>
	</ElementRoot>
	
</ElementStructure>

Download the source

As you can see:
  • We’ve used an <Element> to set the root for projects in the Content perspective and a <DataElements> to list the projects below.
  • We’ve also used and an <Element> to split tasks by their status (completed vs. in progress) and a <DataElements> to list tasks below projects.
  • We’ve used the <ParentIdFilter> to filter the tasks by projects and the <FieldFilter> to filter tasks by their status.
  • The <AddDataAction>, <EditDataAction> and <DeleteDataAction> add the corresponding buttons on the toolbar to manage both projects and tasks.
  • The application is automatically attached in the root of the Content perspective above the Websites element as defined by <ElementStructure.AutoAttachments>.