Learn how to attach an information popup to pages and media files with tree definitions

Download the sample apps as a CMS Package

In this sample, you will learn how to create applications that add a button to the toolbar in the Content and/or Media perspectives to show a page’s or media file’s GUID in a popup when clicked.

Tree definition

In ~/App_Data/Composite/TreeDefinitions, create an XML file: PageGuid.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> 
    <DataType Type="Composite.Data.Types.IPage" /> 
  </ElementStructure.AutoAttachments> 
  <ElementRoot> 
    <Actions> 
      <MessageBoxAction Label="GUID" 
						MessageBoxTitle="${C1:Data:Composite.Data.Types.IPage:Title}" 
						MessageBoxMessage="${C1:Data:Composite.Data.Types.IPage:Id}" /> 
    </Actions> 
  </ElementRoot> 
</ElementStructure>

Download the source

Similarly, create an XML file: MediaGuid.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> 
    <DataType Type="Composite.Data.Types.IMediaFile" /> 
  </ElementStructure.AutoAttachments> 
  <ElementRoot> 
    <Actions> 
      <MessageBoxAction Label="GUID" 
						MessageBoxTitle="${C1:Data:Composite.Data.Types.IMediaFile:FileName}" 
						MessageBoxMessage="${C1:Data:Composite.Data.Types.IMediaFile:Id}" /> 
    </Actions> 
  </ElementRoot> 
</ElementStructure>

Download the source

As you can see in both examples:

• We’ve specified data types that stand for CMS Pages and CMS Media files with a <DataType>.
• The <MessageBoxAction> adds a button on the toolbar to show a popup when clicked.
• The message box's title and message are set with dynamic values from the corresponding fields of data types in use.
• The applications are automatically attached to pages and media files as defined by <ElementStructure.AutoAttachments>.